refactor: amélioration de la Sidebar.vue avec suppression de MenuItem.vue et mise à jour de MenuGroup.vue pour une gestion simplifiée des éléments de menu
This commit is contained in:
parent
53365df456
commit
eeb8447d7a
@@ -9,22 +9,12 @@
|
||||
<nav class="h-full overflow-y-auto">
|
||||
<ul class="h-full flex flex-col">
|
||||
<li v-for="(item, index) in menuItems" :key="index" class="mb-2">
|
||||
<template v-if="item.id">
|
||||
<MenuGroup
|
||||
:id="item.id"
|
||||
:icon="item.icon"
|
||||
:text="item.text"
|
||||
:sub-items="item.subItems"
|
||||
:is-active="isActive(item)"
|
||||
:to="item.to" />
|
||||
</template>
|
||||
<MenuItem
|
||||
v-else
|
||||
<MenuGroup
|
||||
:id="item.id"
|
||||
:icon="item.icon"
|
||||
:text="item.text"
|
||||
:to="item.to"
|
||||
:is-active="isActiveRoute(item.to)"
|
||||
:badge="item.badge" />
|
||||
:sub-items="item.subItems"
|
||||
:to="item.to" />
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
@@ -43,8 +33,7 @@
|
||||
ClockIcon,
|
||||
Cog6ToothIcon,
|
||||
ComputerDesktopIcon
|
||||
} from '@heroicons/vue/24/outline';
|
||||
import MenuItem from './sidebar/MenuItem.vue';
|
||||
} from '@heroicons/vue/24/solid';
|
||||
import MenuGroup from './sidebar/MenuGroup.vue';
|
||||
|
||||
const route = useRoute();
|
||||
@@ -55,22 +44,6 @@
|
||||
}
|
||||
});
|
||||
|
||||
const isActiveRoute = path => {
|
||||
return route.path === path;
|
||||
};
|
||||
|
||||
const isActive = item => {
|
||||
if (!item.to) {
|
||||
return item.subItems?.some(subItem => route.path === subItem.to) || false;
|
||||
}
|
||||
|
||||
if (item.to === '/') {
|
||||
return route.path === '/' || ['/add', '/import', '/discover'].includes(route.path);
|
||||
}
|
||||
|
||||
return route.path.startsWith(item.to);
|
||||
};
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
icon: BookOpenIcon,
|
||||
@@ -90,17 +63,20 @@
|
||||
{
|
||||
icon: ArrowsRightLeftIcon,
|
||||
text: 'Convertir CBR en CBZ',
|
||||
to: '/convert'
|
||||
to: '/convert',
|
||||
id: 'convert'
|
||||
},
|
||||
{
|
||||
icon: CalendarIcon,
|
||||
text: 'Calendrier',
|
||||
to: '/calendar'
|
||||
to: '/calendar',
|
||||
id: 'calendar'
|
||||
},
|
||||
{
|
||||
icon: ClockIcon,
|
||||
text: 'Activité',
|
||||
to: '/activity',
|
||||
id: 'activity',
|
||||
badge: '3'
|
||||
},
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user