fix: sidebar active style (#82)
Release / release (push) Successful in 48s

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

---------

Co-authored-by: admin malio <malio@yuno.malio.fr>
Co-authored-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr>
Co-authored-by: matthieu <matthieu@yuno.malio.fr>
Reviewed-on: #82
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #82.
This commit is contained in:
2026-06-19 14:01:41 +00:00
committed by Autin
parent b6fcd3c186
commit 251c939ba0
4 changed files with 73 additions and 8 deletions
+16
View File
@@ -57,6 +57,7 @@
:class="twMerge(
'block truncate text-[15px] leading-[150%]',
collapsed ? 'px-3 text-center' : 'pl-[32px]',
isActive(item) ? '!text-m-primary font-semibold' : '',
)"
>
<span v-if="!collapsed">{{ item.label }}</span>
@@ -87,6 +88,7 @@
<script setup lang="ts">
import {computed, ref, useId} from 'vue'
import {useRoute} from 'vue-router'
import {Icon as IconifyIcon} from '@iconify/vue'
import {twMerge} from 'tailwind-merge'
@@ -95,6 +97,10 @@ defineOptions({name: 'MalioSidebar', inheritAttrs: false})
export type SidebarItem = {
label: string
to: string
// Par défaut, un lien est actif sur sa route ET ses sous-routes (préfixe) :
// `/supplier` reste actif sur `/supplier/1/edit`. `exact: true` force le match
// strict (actif uniquement sur la route exacte).
exact?: boolean
}
export type SidebarSection = {
@@ -123,6 +129,16 @@ const emit = defineEmits<{
const generatedId = useId()
const componentId = computed(() => props.id || `malio-sidebar-${generatedId}`)
const route = useRoute()
// Actif si la route courante est le lien lui-même OU une de ses sous-routes
// (match par préfixe), pour que `/supplier` reste actif sur `/supplier/1/edit`.
// `item.exact` force le match strict.
function isActive(item: SidebarItem): boolean {
const path = route.path
if (item.exact) return path === item.to
return path === item.to || path.startsWith(`${item.to}/`)
}
const isControlled = computed(() => props.modelValue !== undefined)
const localValue = ref(false)