From e0242ead0f798a1f0e6fa32ce46b4241eab963ec Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Wed, 4 Sep 2024 18:55:21 +0200
Subject: [PATCH] Update Menu component: update style, add nav details for
 projects and footer, use div instead of aside

---
 src/components/Menu.vue | 295 +++++++++++++++++++++++++++-------------
 1 file changed, 198 insertions(+), 97 deletions(-)

diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index 4e144b8..cfe7ccc 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -1,114 +1,215 @@
 <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"/>
-		</svg>
-	</button>
-	<aside v-if="isExpanded" id="menu" class="flex | rounded-lg">
-		<header class="flex">
-			<h2>Nom du service</h2>
-		</header>
-		<nav>
-			<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>
+  <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">
+    <header class="w-full | flex">
+      <h2>Nom du service</h2>
+    </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</a>
+        </li>
+        <li data-icon="calendar">
+          <a href="#">Réunions</a>
+          <span class="pill pill--secondary">Dans 2h</span>
+        </li>
+        <li data-icon="inspiration">
+          <a href="#">Inspirations</a>
+          <span class="pill pill--secondary">Nouveauté</span>
+        </li>
+      </ul>
+      <details open>
+        <summary>Projets en cours</summary>
+        <ul>
+          <li><a href="#" class="new">Miss Dior Blooming Bouquet</a></li>
+          <li><a href="#">Dior J’adore</a></li>
+          <li><a href="#">Gris Dior</a></li>
+          <li><a href="#">Sauvage 60ml</a></li>
+        </ul>
+      </details>
+      <details>
+        <summary>Projets archivés</summary>
+        <ul>
+          <li><a href="#">Titre projet archivé 1</a></li>
+          <li><a href="#">Titre projet archivé 2</a></li>
+        </ul>
+      </details>
+    </nav>
+    <footer class="w-full">
+      <ul class="flex">
+        <li data-icon="user">
+          <a href="#">Profil</a>
+        </li>
+        <li data-icon="logout">
+          <a href="#">Déconnexion</a>
+        </li>
+      </ul>
+    </footer>
+  </div>
 </template>
 
 <style scoped>
 
-	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);
-	}
+button[aria-controls="menu"] {
+  position: absolute;
+  z-index: 10;
+  width: 2.5rem;
+  height: 2.5rem;
+}
+button[aria-controls="menu"] svg {
+  width: 100%;
+  height: 100%;
+}
+button[aria-controls="menu"][aria-expanded="true"] {
+  margin-top: 1rem;
+  padding: 0.625rem; /* 10px */
+  left: var(--gutter);
+  transform: translateX(calc(var(--sidebar-width) - 100% - 1rem));
+}
+button[aria-controls="menu"][aria-expanded="false"] {
+  width: 3.75rem;
+  height: 3.75rem;
+  padding: 1.25rem;
+  transform: rotate(180deg);
+}
 
-	/* Menu */
+/* Menu */
 
-	#menu {
-		--flow-space: var(--space-2xl);
-		--direction: column;
-		--items: flex-start;
-		width: var(--sidebar-width);
-		padding: var(--gap);
-		background: var(--color-background);
-	}
+#menu {
+  --flow-space: var(--space-32);
+  --direction: column;
+  --items: flex-start;
+  --wrap: no-wrap;
+  width: var(--sidebar-width);
+  height: calc(100vh - var(--gutter) * 2);
+  height: calc(100dvh - var(--gutter) * 2);
+  padding: var(--gap);
+  background: var(--color-background);
+  overflow-y: auto;
+}
 
-	#menu header {
-		--justify: center;
-		padding-left: var(--gap);
-		height: 40px;
-		font-family: var(--font-serif);
-		font-size: var(--text-lg);
-	}
+#menu [data-icon]::before {
+  background-color: var(--color-grey-700);
+}
 
-	#menu nav {
-		width: 100%;
-	}
+#menu header {
+  --justify: center;
+  padding-left: var(--gap);
+  min-height: var(--space-40);
+  font-family: var(--font-serif);
+  font-size: var(--text-lg);
+  background: var(--color-background);
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+#menu header::before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: -1rem;
+  left: 0;
+  right: 0;
+  bottom: -2rem;
+  background: linear-gradient(to bottom, var(--color-background) 0%, var(--color-background) 75%, transparent 100%);
+}
 
-	#menu ul {
-		--direction: column;
-		--items: flex-start;
-		--row-gap: var(--space-xs);
-		width: 100%;
-	}
+#menu nav {
+  --flow-space: var(--space-32);
+  flex: 1 1 0%;
+}
 
-	#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 ul {
+  --direction: column;
+  --items: flex-start;
+  --row-gap: var(--space-4);
+  width: 100%;
+}
 
-	#menu li[data-count]::after {
-		content: attr(data-count);
-		display: inline-block;
-		color: var(--color-primary);
-		font-size: var(--text-sm);
-		font-weight: 500;
-		margin-left: auto;
-	}
+#menu li,
+#menu summary {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 2.5rem; /* 40px */
+  padding: 0 var(--space-16);
+  gap: var(--space-12);
+  border-radius: var(--rounded-md);
+}
 
-	#menu li .pill {
-		margin-left: auto;
-	}
+#menu li {
+  position: relative;
+  min-height: 2.75rem; /* 44px */
+}
 
-	#menu .active {
-		background-color: var(--color-grey-50);
-	}
+#menu li[data-count]::after {
+  content: attr(data-count);
+  display: inline-block;
+  color: var(--color-primary);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  margin-left: auto;
+}
+
+#menu li .pill {
+  margin-left: auto;
+}
+
+#menu li a::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  cursor: pointer;
+}
+
+#menu .active,
+#menu li:hover {
+  background-color: var(--color-grey-50);
+}
+
+#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-repeat: repeat-x;
+}
+#menu details > summary {
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--color-grey-700);
+  background-color: var(--color-background);
+  width: fit-content;
+}
+#menu details .new::after {
+  content: 'Nouvelles modifications';
+  color: transparent;
+  position: relative;
+  display: inline-block;
+  width: .375rem; /* 6px */
+  height: .375rem; /* 6px */
+  border-radius: var(--rounded-full);
+  background-color: var(--color-primary-100);
+  margin-left: var(--space-8);
+  transform: translateY(-0.1em);
+  overflow: hidden;
+}
 </style>
 
 <script setup>
-	import { ref } from 'vue';
-	const isExpanded = ref(true);
-	function toggleExpand() {
-		isExpanded.value = !isExpanded.value;
-	}	
-</script>
\ No newline at end of file
+import { ref } from 'vue';
+const isExpanded = ref(true);
+function toggleExpand() {
+  isExpanded.value = !isExpanded.value;
+} 
+</script>