Update Menu component: fix icons and active state

This commit is contained in:
Timothée Goguely 2024-09-10 15:40:43 +02:00
parent 41ac6ec9eb
commit db4e1fd84a

View file

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