style(sidebar): supprimer Calendrier, corriger isActive, séparer toggle/nav, harmoniser hover

- Retrait de l'entrée "Calendrier" du menu et de sa route Vue Router
- isActive inclut désormais les sous-items (fix: groupe Mangas actif sur /import)
- Chevron déplacé dans un <button> séparé du RouterLink (plus de double toggle/nav)
- Hover harmonisé : hover:bg-gray-700 + hover:text-white sur parent et sous-items
This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
2026-03-14 00:33:38 +01:00
parent cc27fc4564
commit d219ed1b3b
4 changed files with 19 additions and 31 deletions

View File

@@ -82,12 +82,6 @@ const routes = [
name: 'convert',
component: ConversionPage
},
{
path: '/calendar',
name: 'calendar',
component: PlaceholderComponent,
props: { title: 'Calendrier' }
},
{
path: '/activity',
name: 'activity',

View File

@@ -27,7 +27,6 @@
ArrowDownTrayIcon,
ArrowsRightLeftIcon,
BookOpenIcon,
CalendarIcon,
ClockIcon,
Cog6ToothIcon,
ComputerDesktopIcon,
@@ -69,12 +68,6 @@ import MenuGroup from './sidebar/MenuGroup.vue';
to: '/convert',
id: 'convert'
},
{
icon: CalendarIcon,
text: 'Calendrier',
to: '/calendar',
id: 'calendar'
},
{
icon: ClockIcon,
text: 'Activité',

View File

@@ -3,24 +3,25 @@
class="border-l-4"
:class="{
'border-green-600': isActive,
'hover:bg-gray-700 border-transparent': !isActive
'border-transparent': !isActive
}">
<div class="flex w-full" @click="toggleExpanded">
<div class="flex w-full">
<RouterLink
:to="to"
class="flex-grow px-4 py-2 flex items-center"
:class="{
'text-green-600 bg-gray-800': isActive
}">
<div class="flex items-center flex-grow">
:class="isActive
? 'text-green-600 bg-gray-800'
: 'hover:bg-gray-700 hover:text-white'">
<component :is="icon" class="w-5 h-5 mr-3" />
<span class="px-2">{{ text }}</span>
</div>
<component
v-if="subItems.length > 0"
:is="expanded ? ChevronUpIcon : ChevronDownIcon"
class="w-4 h-4" />
</RouterLink>
<button
v-if="subItems.length > 0"
class="px-3 hover:bg-gray-700"
:class="isActive ? 'text-green-600 bg-gray-800' : 'hover:text-white'"
@click="toggleExpanded">
<component :is="expanded ? ChevronUpIcon : ChevronDownIcon" class="w-4 h-4" />
</button>
</div>
<ul v-if="subItems.length > 0" class="ml-8 mt-2 space-y-4" v-show="expanded">
@@ -71,14 +72,14 @@
const isActive = computed(() => {
if (!props.to) {
return props.subItems?.some(subItem => route.path === subItem.to) || false;
return props.subItems?.some(subItem => route.path.startsWith(subItem.to)) || false;
}
if (props.to === '/') {
return route.path === props.to || props.subItems.map(item => item.to).includes(route.path);
return route.path === props.to || props.subItems.some(item => route.path.startsWith(item.to));
}
return route.path.startsWith(props.to);
return route.path.startsWith(props.to) || props.subItems.some(item => route.path.startsWith(item.to));
});
const isRouteMatching = path => {

View File

@@ -1,9 +1,9 @@
<template>
<li>
<RouterLink v-if="to" :to="to" class="block hover:text-green-600" role="menuitem">
<RouterLink v-if="to" :to="to" class="block px-2 py-1 rounded hover:bg-gray-700 hover:text-white" role="menuitem">
{{ text }}
</RouterLink>
<button v-else @click="$emit('click')" class="w-full text-left hover:text-green-600" role="menuitem">
<button v-else @click="$emit('click')" class="w-full text-left px-2 py-1 rounded hover:bg-gray-700 hover:text-white" role="menuitem">
{{ text }}
</button>
</li>