dark theme color scheme

frontend/src/components/MenuBar.vue

@@ -19,22 +19,22 @@ const items = computed(() => [
   {
     label: t("roomFinder"),
     icon: "pi pi-fw pi-calendar",
-    route: `rooms`,
+    route: "/rooms",
   },
   {
     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>
@@ -62,6 +62,7 @@ const items = computed(() => [
           text
           severity="secondary"
           @click="navigate"
+          :class="item.route === $route.path ? 'active' : ''"
         />
       </router-link>
     </template>
@@ -79,4 +80,17 @@ const items = computed(() => [
   background-color: transparent;
   border: none;
 }
+
+:deep(.p-button .p-button-label::after) {
+  content: "";
+  display: block;
+  width: 0;
+  height: 2px;
+  background: var(--primary-color);
+  transition: width 0.3s;
+}
+
+:deep(.p-button.active .p-button-label::after) {
+  width: 100%;
+}
 </style>