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:
parent
cc27fc4564
commit
d219ed1b3b
@@ -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é',
|
||||
|
||||
@@ -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">
|
||||
<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" />
|
||||
: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>
|
||||
</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 => {
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user