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

Update Menu component: fix icons and active state

Browse source
This commit is contained in:
Timothée Goguely 2024-09-10 15:40:43 +02:00
parent 41ac6ec9eb
commit db4e1fd84a
1 changed files with 7 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/Menu.vue
View file

@ -38,7 +38,7 @@
<ul class="flex"> <ul class="flex">
<li <li
v-for="mainItem in mainItems" v-for="mainItem in mainItems"
data-icon="calendar" :data-icon="mainItem.icon"
:key="mainItem.path" :key="mainItem.path"
:class="{ active: isCurrent(mainItem) }" :class="{ active: isCurrent(mainItem) }"
> >
@ -108,7 +108,7 @@ const mainItems = [
{ {
title: "Inspirations", title: "Inspirations",
path: "/inspirations", path: "/inspirations",
icon: "inspirations", icon: "inspiration",
pill: "Nouveauté", pill: "Nouveauté",
}, },
]; ];
@ -246,11 +246,15 @@ button[aria-controls="menu"][aria-expanded="false"] {
cursor: pointer; cursor: pointer;
} }
#menu .active,
#menu li:hover { #menu li:hover {
background-color: var(--color-grey-50); background-color: var(--color-grey-50);
} }
#menu .active {
background-color: var(--color-primary-10);
}
#menu details { #menu details {
font-family: var(--font-serif); font-family: var(--font-serif);
background-size: 1px 21px; background-size: 1px 21px;