Cellule-financiere-transverse-PMO/visua-vue
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feature: Menu bar component updated

Browse Source
This commit is contained in:
Paul Valerie GOMA 2025-08-11 18:07:18 +02:00
parent fd143ea7a5
commit 9e3067627c
1 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/menu/VMenuBar.vue
View File

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