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

Add CSS icons and with-sidebar files, rename cluster to flex, move menu inside Menu component

Browse source
This commit is contained in:
Timothée Goguely 2024-09-02 21:18:25 +02:00
parent 6f2250c847
commit d85a5b3d2f
6 changed files with 167 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

124
src/components/Menu.vue
View file

@ -1,35 +1,113 @@
<template>
<button @click="toggleExpand()" class="btn btn--white | rounded-lg" aria-controls="menu" :aria-expanded="isExpanded">
<svg aria-labelledby="menu-toggle" class="icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<title id="menu-toggle">Masquer le menu</title>
<title id="menu-toggle">{{ isExpanded ? 'Masquer le menu' : 'Afficher le menu' }}</title>
<path d="M10.6751 2.625L3.00007 10.3125C2.94028 10.3686 2.89263 10.4364 2.86005 10.5116C2.82748 10.5869 2.81067 10.668 2.81067 10.75C2.81067 10.832 2.82748 10.9131 2.86005 10.9884C2.89263 11.0636 2.94028 11.1314 3.00007 11.1875L10.6751 18.875M17.1876 2.625L9.50007 10.3125C9.38555 10.4293 9.32141 10.5864 9.32141 10.75C9.32141 10.9136 9.38555 11.0707 9.50007 11.1875L17.1876 18.875" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<aside id="menu" class="cluster | rounded-lg">
<h2>Nom du service</h2>
<aside v-if="isExpanded" id="menu" class="flex | rounded-lg">
<header class="flex">
<h2>Nom du service</h2>
</header>
<nav>
<ul class="cluster">
<li data-icon="home">
<a aria-current="page">Home</a>
</li>
<li data-icon="megaphone">
<a>Notifications</a>
</li>
<li data-icon="calendar">
<a>Réunions</a>
</li>
<li data-icon="inspirations">
<a>Inspirations</a>
</li>
</ul>
<ul class="flex">
<li data-icon="home">
<a aria-current="page">Home</a>
</li>
<li data-icon="megaphone" data-count="4">
<a>Notifications</a>
</li>
<li data-icon="calendar">
<a>Réunions</a>
<span class="pill pill--secondary">Dans 2h</span>
</li>
<li data-icon="inspiration">
<a>Inspirations</a>
<span class="pill pill--secondary">Nouveauté</span>
</li>
</ul>
</nav>
</aside>
</template>
<style>
button[aria-controls="menu"] {
position: fixed;
z-index: 10;
top: 48px;
}
button[aria-controls="menu"][aria-expanded="true"] {
padding: 10px;
left: calc(var(--sidebar-width) - var(--space-xl));
}
button[aria-controls="menu"][aria-expanded="false"] {
top: var(--gutter);
padding: 18px;
transform: rotate(180deg);
}
/* Menu */
#menu {
--flow-space: var(--space-2xl);
--direction: column;
--vertical-alignment: flex-start;
width: var(--sidebar-width);
padding: var(--gap);
background: var(--color-background);
}
#menu header {
--horizontal-alignment: center;
padding-left: var(--gap);
height: 40px;
font-family: var(--font-serif);
font-size: var(--text-lg);
}
#menu nav {
width: 100%;
}
#menu ul {
--direction: column;
--vertical-alignment: flex-start;
--row-gap: var(--space-xs);
width: 100%;
}
#menu li {
display: flex;
align-items: center;
width: 100%;
min-height: 2.5rem; /* 40px */
max-height: 2.75rem; /* 44px */
padding: 0 var(--space-lg);
gap: var(--space-md);
}
#menu li[data-count]::after {
content: attr(data-count);
display: inline-block;
color: var(--color-primary);
font-weight: 500;
margin-left: auto;
}
#menu li .pill {
margin-left: auto;
}
#menu .active {
background-color: var(--color-grey-50);
}
</style>
<script setup>
import { ref } from 'vue';
const isExpanded = ref(true);
function toggleExpand() {
isExpanded.value != isExpanded.value;
}
import { ref } from 'vue';
const isExpanded = ref(true);
function toggleExpand() {
isExpanded.value = !isExpanded.value;
}
</script>