colgora/Mangarr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

33
assets/vue/app/shared/components/layout/sidebar/MenuGroup.vue
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">
<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 => {