From 7cba776cb6d3e7e765115cd9a900fb75f7b0e2ab Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Thu, 21 Nov 2024 18:27:25 +0100
Subject: [PATCH] Mobile menu

---
 src/components/Menu.vue | 34 ++++++++++++++++++++++++++++++----
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index 93cc98a..48f9c85 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -144,7 +144,7 @@ function isCurrent(navItem) {
 <style>
 button[aria-controls="menu"] {
   position: fixed;
-  z-index: 10;
+  z-index: 101;
   width: 2.5rem;
   height: 2.5rem;
 }
@@ -164,9 +164,7 @@ button[aria-controls="menu"][aria-expanded="false"] {
   padding: 1.125rem;
   transform: rotate(180deg);
 }
-button[aria-controls="menu"][aria-expanded="false"]
-  + main
-  > header:not([role="tablist"]) {
+button[aria-controls="menu"][aria-expanded="false"] + main > header:not([role="tablist"]) {
   margin-left: 4rem;
 }
 
@@ -189,6 +187,34 @@ button[aria-controls="menu"][aria-expanded="false"]
   overflow-y: auto;
 }
 
+@media (max-width: 1023px) {
+  button[aria-controls="menu"][aria-expanded="true"] {
+    left: 0;
+    margin-top: .4rem;
+  }
+  #menu {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 100;
+    border-radius: 0;
+    height: 100vh;
+    height: 100dvh;
+    padding-top: 2.5rem;
+  }
+  button[aria-controls="menu"][aria-expanded="true"] + #menu::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: var(--sidebar-width);
+    bottom: 0;
+    z-index: -1;
+    background: var(--color-black-50);
+  }
+}
+
 #menu [data-icon]::before {
   background-color: var(--color-grey-700);
 }