✨ feature: Menu bar component updated

src/components/menu/VMenuBar.vue

@@ -2,6 +2,7 @@
 import Menubar from 'primevue/menubar';
 import type IVMenuBar from './IVMenuBar.type.js';
 import styles from '@visua/typography.module.css'
+import { useRoute } from 'vue-router';
 
 const props = withDefaults(defineProps<IVMenuBar>(), {
   searchbarId: 'searchbar-header',
@@ -14,6 +15,8 @@ const props = withDefaults(defineProps<IVMenuBar>(), {
   menuLabel: undefined,
   logoPath: '/home',
 })
+
+const route = useRoute();
 </script>
 
 <template>
@@ -50,7 +53,9 @@ const props = withDefaults(defineProps<IVMenuBar>(), {
         :tabindex="0"
         v-bind="props.action"
         class="item"
-        :class="[styles['text-body-LG-article-text-Regular']]"
+        :class="[styles['text-body-LG-article-text-Regular'],
+          item.to === route.path ? 'active' : ''
+        ]"
       >
         <slot name="itemicon" :item="item" v-if="'icon' in item">
           <i :class="[item.icon]"></i>
@@ -105,7 +110,13 @@ a{
 }
 
 .item:hover,
-.item:active{
+.item.active{
   color: var(--menu-active-color);
 }
+
+.item.active {
+  height: 100%;
+  font-weight: bold;
+}
+
 </style>