Add more menu entries

client/src/components/MainNavigationBar.vue

@@ -3,9 +3,11 @@ import * as log from 'loglevel';
 
 import { reactive } from 'vue';
 import { useUserStore } from '@/stores/user';
+import { useRoute } from 'vue-router';
 
 log.debug('MainNavigationBar.vue created');
 
+const route = useRoute()
 const userStore = useUserStore();
 const state = reactive({showMenu: false});
 
@@ -18,6 +20,10 @@ function calcNavigationMobileOpenClasses() {
   return state.showMenu ? ['fixed', 'w-full', 'h-screen'] : [];
 }
 
+function menuActive(checkPath) {
+  return route.path.startsWith(checkPath);
+}
+
 </script>
 
 <template>
@@ -74,21 +80,36 @@ function calcNavigationMobileOpenClasses() {
       >
         <router-link
           to="/dashboard"
-          class="
-              nav-item
-              underline underline-offset-[21px] decoration-sky-500 decoration-4
-          ">
+          class="nav-item"
+          :class="{'nav-item--active': menuActive('/dashboard')}"
+        >
           Dashboard
         </router-link>
-        <router-link to="/shop" class="text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal">Shop</router-link>
+        <router-link
+          to="/shop"
+          class="nav-item"
+          :class="{'nav-item--active': menuActive('/shop')}"
+        >
+          Shop
+        </router-link>
         <hr class="text-white lg:hidden">
         <div class="hidden lg:list-item flex-auto"></div>
-        <div class="text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal">Mediathek</div>
-        <div class="text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal flex flex-row items-center">
+        <router-link
+          to="/mediacenter"
+          class="nav-item"
+          :class="{'nav-item--active': menuActive('/mediacenter')}"
+        >
+          Mediathek
+        </router-link>
+        <router-link
+          to="/messages"
+          class="nav-item flex flex-row items-center"
+        >
           <it-icon-message class="w-8 h-8 mr-2"/>
-        </div>
-        <div
-          class="text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal flex items-center"
+        </router-link>
+        <router-link
+          to="/profile"
+          class="nav-item flex items-center"
         >
           <div v-if="userStore.loggedIn">
             <div v-if="userStore.avatar_url">
@@ -101,7 +122,7 @@ function calcNavigationMobileOpenClasses() {
             </div>
           </div>
           <div v-else><a class="" href="/login">Login</a></div>
-        </div>
+        </router-link>
       </div>
     </nav>
   </div>
@@ -111,4 +132,8 @@ function calcNavigationMobileOpenClasses() {
 .nav-item {
   @apply text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal;
 }
+
+.nav-item--active {
+  @apply underline underline-offset-[21px] decoration-sky-500 decoration-4
+}
 </style>

client/src/router/index.ts

@@ -34,6 +34,10 @@ const router = createRouter({
       path: '/mediacenter',
       component: () => import('@/views/MediaView.vue'),
     },
+    {
+      path: '/messages',
+      component: () => import('@/views/MessagesView.vue'),
+    },
     {
       path: '/profile',
       component: () => import('@/views/ProfileView.vue'),

client/src/views/MessagesView.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import * as log from 'loglevel';
+
+import MainNavigationBar from '@/components/MainNavigationBar.vue';
+
+log.debug('MessagesView created');
+
+</script>
+
+<template>
+  <MainNavigationBar/>
+
+  <main class="px-8 py-8">
+    <h1>Messages</h1>
+  </main>
+</template>
+
+<style scoped>
+</style>