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

create projects store

Browse source
This commit is contained in:
isUnknown 2024-09-10 08:49:09 +02:00
parent 18ac3b9173
commit 893d173c59
6 changed files with 360 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

131
src/components/Menu.vue
View file

@ -1,8 +1,33 @@
<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">{{ 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"/>
<!-- Changer le Menu actif
class="active" sur le <li>
aria-current="page" sur le <a>
-->
<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">
{{ 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>
<div v-if="isExpanded" id="menu" class="flex | rounded-lg">
@ -11,19 +36,18 @@
</header>
<nav class="w-full | flow">
<ul class="flex">
<li data-icon="home" class="active">
<a href="/" aria-current="page">Home</a>
</li>
<li data-icon="megaphone" data-count="4">
<a href="/notifications">Notifications</a>
</li>
<li data-icon="calendar">
<a href="/reunions">Réunions</a>
<span class="pill pill--secondary">Dans 2h</span>
</li>
<li data-icon="inspiration">
<a href="/inspirations">Inspirations</a>
<span class="pill pill--secondary">Nouveauté</span>
<li
v-for="mainItem in mainItems"
data-icon="calendar"
:key="mainItem.path"
:class="{ active: isCurrent(mainItem) }"
>
<a :href="mainItem.path" :aria-current="isCurrent(mainItem)">{{
mainItem.title
}}</a>
<span v-if="mainItem.pill" class="pill pill--secondary">{{
mainItem.pill
}}</span>
</li>
</ul>
<details open>
@ -56,8 +80,46 @@
</div>
</template>
<style scoped>
<script setup>
import { ref } from "vue";
const isExpanded = ref(true);
const mainItems = [
{
title: "Home",
path: "/",
icon: "home",
},
{
title: "Notifications",
path: "/notifications",
icon: "megaphone",
},
{
title: "Réunions",
path: "/reunions",
icon: "calendar",
pill: "Dans 2h",
},
{
title: "Inspirations",
path: "/inspirations",
icon: "inspirations",
pill: "Nouveauté",
},
];
function toggleExpand() {
isExpanded.value = !isExpanded.value;
}
function isCurrent(navItem) {
return navItem.path === window.location.pathname;
}
</script>
<style scoped>
button[aria-controls="menu"] {
position: fixed;
z-index: 10;
@ -116,7 +178,7 @@ button[aria-controls="menu"][aria-expanded="false"] {
z-index: 1;
}
#menu header::before {
content: '';
content: "";
display: block;
position: absolute;
top: -1rem;
@ -124,7 +186,12 @@ button[aria-controls="menu"][aria-expanded="false"] {
right: 0;
bottom: -2rem;
z-index: -1;
background: linear-gradient(to bottom, var(--color-background) 0%, var(--color-background) 75%, transparent 100%);
background: linear-gradient(
to bottom,
var(--color-background) 0%,
var(--color-background) 75%,
transparent 100%
);
}
#menu nav {
@ -169,7 +236,7 @@ button[aria-controls="menu"][aria-expanded="false"] {
}
#menu li a::before {
content: '';
content: "";
position: absolute;
inset: 0;
z-index: 1;
@ -184,7 +251,13 @@ button[aria-controls="menu"][aria-expanded="false"] {
#menu details {
font-family: var(--font-serif);
background-size: 1px 21px;
background-image: repeating-linear-gradient(0deg, var(--color-grey-50), var(--color-grey-50) 1px, transparent 1px, transparent);
background-image: repeating-linear-gradient(
0deg,
var(--color-grey-50),
var(--color-grey-50) 1px,
transparent 1px,
transparent
);
background-repeat: repeat-x;
}
#menu details > summary {
@ -196,12 +269,12 @@ button[aria-controls="menu"][aria-expanded="false"] {
width: fit-content;
}
#menu details .new::after {
content: 'Nouvelles modifications';
content: "Nouvelles modifications";
color: transparent;
position: relative;
display: inline-block;
width: .375rem; /* 6px */
height: .375rem; /* 6px */
width: 0.375rem; /* 6px */
height: 0.375rem; /* 6px */
border-radius: var(--rounded-full);
background-color: var(--color-primary-100);
margin-left: var(--space-8);
@ -209,11 +282,3 @@ button[aria-controls="menu"][aria-expanded="false"] {
overflow: hidden;
}
</style>
<script setup>
import { ref } from 'vue';
const isExpanded = ref(true);
function toggleExpand() {
isExpanded.value = !isExpanded.value;
}
</script>