add active item to menu

src/components/GamesPage.vue

@@ -3,7 +3,7 @@ import HeaderMenu from '@/components/HeaderMenu.vue'
 </script>
 
 <template>
-    <HeaderMenu :add-logout="true"/>
+    <HeaderMenu :add-logout="true" active="games"/>
 
     Игры
 </template>

src/components/HeaderMenu.vue

@@ -12,6 +12,10 @@ const props = defineProps({
         type: Boolean,
         required: false
     },
+    active: {
+        type: String,
+        required: false
+    }
 })
 
 import { getAuthClient } from '@/api/auth_client';
@@ -66,16 +70,16 @@ const goToLogout = () => {
 <template>
     <div class="menu-block">
         <div class="left-group">
-            <div class="menu-item-block" v-if="authStore.hasRole('user')" @click="router.push('/office')">
+            <div class="menu-item-block" :class="{ active: props.active == 'office' }" v-if="authStore.hasRole('user')" @click="router.push('/office')">
                 Кабинет
             </div>
-            <div class="menu-item-block" v-if="hasPermission('games_page')" @click="router.push('/games')">
+            <div class="menu-item-block" :class="{ active: props.active == 'games' }" v-if="hasPermission('games_page')" @click="router.push('/games')">
                 Игры
             </div>
-            <div class="menu-item-block" v-if="hasPermission('scenarios_page')" @click="router.push('/scenarios')">
+            <div class="menu-item-block" :class="{ active: props.active == 'scenarios' }" v-if="hasPermission('scenarios_page')" @click="router.push('/scenarios')">
                 Мои сценарии
             </div>
-            <div class="menu-item-block" v-if="hasPermission('users_page')" @click="router.push('/users')">
+            <div class="menu-item-block" :class="{ active: props.active == 'users' }" v-if="hasPermission('users_page')" @click="router.push('/users')">
                 Пользователи
             </div>
         </div>
@@ -136,4 +140,8 @@ const goToLogout = () => {
     padding-top: 3px;
     padding-right: 5px;
 }
+
+.active {
+    color: #63e2b7;
+}
 </style>

src/components/OfficePage.vue

@@ -19,7 +19,7 @@ getPermissions()
 </script>
 
 <template>
-    <HeaderMenu :add-logout="true"/>
+    <HeaderMenu :add-logout="true" active="office"/>
 
     <p>
         Доброго времени суток, {{ authStore.username }}.

src/components/ScenariosPage.vue

@@ -3,7 +3,7 @@ import HeaderMenu from '@/components/HeaderMenu.vue'
 </script>
 
 <template>
-    <HeaderMenu :add-logout="true"/>
+    <HeaderMenu :add-logout="true" active="scenarios"/>
 
     Сценарии
 </template>

src/components/UsersPage.vue

@@ -3,7 +3,7 @@ import HeaderMenu from '@/components/HeaderMenu.vue'
 </script>
 
 <template>
-    <HeaderMenu :add-logout="true"/>
+    <HeaderMenu :add-logout="true" active="users"/>
 
     Пользователи
 </template>