add active item to menu

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>