From 9e3067627cd99d763ed151a0021ea5c43690541c Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 11 Aug 2025 18:07:18 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feature:=20Menu=20bar=20component?=
 =?UTF-8?q?=20updated?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/VMenuBar.vue | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/menu/VMenuBar.vue b/src/components/menu/VMenuBar.vue
index 86e487d..dd5267b 100644
--- a/src/components/menu/VMenuBar.vue
+++ b/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>