studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

Add disabled style to menu item #5

Browse source
This commit is contained in:
Timothée Goguely 2024-11-19 16:04:35 +01:00
parent b0c04e277a
commit fa0801668c
1 changed files with 9 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/Menu.vue
View file

@ -36,12 +36,11 @@
v-for="mainItem in mainItems" v-for="mainItem in mainItems"
:data-icon="mainItem.icon" :data-icon="mainItem.icon"
:key="mainItem.path" :key="mainItem.path"
:class="{ active: isCurrent(mainItem) }" :class="{ active: isCurrent(mainItem), disabled: mainItem.disabled }"
> >
<router-link <router-link
:to="mainItem.path" :to="mainItem.path"
:aria-current="isCurrent(mainItem)" :aria-current="isCurrent(mainItem)"
:disabled="mainItem.disabled ? true : undefined"
>{{ mainItem.title }}</router-link >{{ mainItem.title }}</router-link
> >
<span v-if="mainItem.pill" class="pill pill--secondary">{{ <span v-if="mainItem.pill" class="pill pill--secondary">{{
@ -108,7 +107,7 @@ const mainItems = [
title: "Réunions", title: "Réunions",
path: "/reunions", path: "/reunions",
icon: "calendar", icon: "calendar",
pill: "Dans 2h", pill: false,
disabled: true, disabled: true,
}, },
{ {
@ -232,6 +231,13 @@ button[aria-controls="menu"][aria-expanded="false"] {
min-height: 2.75rem; /* 44px */ min-height: 2.75rem; /* 44px */
} }
#menu li.disabled {
opacity: .5;
}
#menu li.disabled a::before {
cursor: not-allowed;
}
#menu li[data-count]::after { #menu li[data-count]::after {
content: attr(data-count); content: attr(data-count);
display: inline-block; display: inline-block;