fix:#5 fixed menubar active class

frontend/src/components/MenuBar.vue

@@ -9,43 +9,44 @@ const items = computed(() => [
   {
     label: t("createCalendar"),
     icon: "pi pi-fw pi-plus",
-    route: "/",
+    route: "/home"
   },
   {
     label: t("editCalendar"),
     icon: "pi pi-fw pi-pencil",
-    route: "/edit",
+    route: "/edit"
   },
   {
     label: t("rooms"),
     icon: "pi pi-fw pi-angle-down",
+    info: "rooms",
     items: [
       {
         label: t("roomFinderPage.roomSchedule"),
         icon: "pi pi-fw pi-hourglass",
-        route: "/rooms",
+        route: "/rooms/occupancy"
       },
       {
         label: t("freeRooms.freeRooms"),
         icon: "pi pi-fw pi-calendar",
-        route: "/rooms/free",
+        route: "/rooms/free"
       },
     ],
   },
   {
     label: t("faq"),
     icon: "pi pi-fw pi-book",
-    route: "/faq",
+    route: "/faq"
   },
   {
     label: t("imprint"),
     icon: "pi pi-fw pi-id-card",
-    route: "/imprint",
+    route: "/imprint"
   },
   {
     label: t("privacy"),
     icon: "pi pi-fw pi-exclamation-triangle",
-    route: "/privacy-policy",
+    route: "/privacy-policy"
   },
 ]);
 </script>
@@ -59,7 +60,7 @@ const items = computed(() => [
         </Button>
       </router-link>
     </template>
-    <template #item="{ item, props, root }">
+    <template #item="{ item, props }">
       <router-link
         v-if="item.route"
         v-slot="{ navigate }"
@@ -68,7 +69,7 @@ const items = computed(() => [
       >
         <a
           :class="
-            item.route === $route.path
+            $route.path == item.route
               ? 'flex align-items-center active'
               : 'flex align-items-center'
           "
@@ -77,22 +78,12 @@ const items = computed(() => [
         >
           <span :class="item.icon" />
           <span class="ml-2 p-menuitem-label">{{ item.label }}</span>
-          <Badge
-            v-if="item.badge"
-            :class="{ 'ml-auto': !root, 'ml-2': root }"
-            :value="item.badge"
-          />
-          <span
-            v-if="item.shortcut"
-            class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1"
-            >{{ item.shortcut }}</span
-          >
         </a>
       </router-link>
       <a
         v-else
         :class="
-          item.route === $route.path
+          $route.path.includes(item.info)
             ? 'flex align-items-center active'
             : 'flex align-items-center'
         "
@@ -100,16 +91,6 @@ const items = computed(() => [
       >
         <span :class="item.icon" />
         <span class="ml-2 p-menuitem-label">{{ item.label }}</span>
-        <Badge
-          v-if="item.badge"
-          :class="{ 'ml-auto': !root, 'ml-2': root }"
-          :value="item.badge"
-        />
-        <span
-          v-if="item.shortcut"
-          class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1"
-          >{{ item.shortcut }}</span
-        >
       </a>
     </template>
     <template #end>

frontend/src/router/index.ts

@@ -25,7 +25,7 @@ const router = createRouter({
       component: CourseSelection,
     },
     {
-      path: "/rooms",
+      path: "/rooms/occupancy",
       name: "room-schedule",
       component: RoomFinder,
     },

frontend/src/view/FreeRooms.vue

@@ -19,7 +19,7 @@
             :empty-message="$t('roomFinderPage.noRoomsAvailable')"
             date-format="dd.mm.yy"
             panel-class="min-w-min"
-            touchUI
+            touch-u-i
           />
           <div class="break"/>
             <Calendar
@@ -31,7 +31,7 @@
               date-format="HH:mm"
               :class="[{'p-invalid':isLater}, flexSpecs]"
               panel-class="min-w-min"
-              touchUI
+              touch-u-i
             />
             <Calendar
               v-model="end"
@@ -42,7 +42,7 @@
               date-format="HH:mm"
               :class="[{'p-invalid':isLater}, flexSpecs]"
               panel-class="min-w-min"
-              touchUI
+              touch-u-i
             />
     </template>
     <template #content>