Mobile menu

src/components/navbar.module.css

@@ -1,18 +1,70 @@
 .navBar {
-    @apply top-6 left-6 right-6 transition-all duration-300 z-50 h-20;
+    @apply transition-all duration-300;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 1em 2em;
+    position: fixed;
+    align-items: stretch;
+    top: 0;
+    left: 0;
+    padding: 2rem;
+    z-index: 1000;
+    background: hsl(0 0% 100% / .2);
+    backdrop-filter: blur(1rem);
+  }
+
+
+  @media screen and (width < 768px) {
+    .navBar {
+      flex-direction: column;
+      right: 30%;
+      bottom: 0;
+      transform: translateX(-100%);
+      transition: transform 350ms ease-out;
+      padding: min(30vh, 10rem) 2em;
+    }
+    .mobileNavToggle {
+      position: absolute;
+      display: block;
+      width: 2rem;
+      top: 2rem;
+      left: 2rem;
+      aspect-ratio: 1;
+      z-index: 9999;
+      background-image: url('/icons/menu.svg');
+      background-repeat: no-repeat;
+      background-size: contain; /* Adjust as needed: cover, 100% 100%, etc. */
+      background-position: center;
+    }
+    .navBar[data-visible="true"] {
+      transform: translateX(0);
+    }
+    .mobileNavToggle[aria-expanded="true"] {
+      background-image: url('/icons/close.svg');
+    }
+    
+  }
+  @media screen and (width >= 768px) {
+    .navBar {
+      right: 0;
+      flex-direction: row;
+      height: 5rem;
+      border-radius:0 0 0.5rem 0.5rem;
+      }
+  }
+  .navBar > div {
+    display: flex;
+    align-items: center;
+    gap: var(--gap, 2rem);
   }
   
-  .navBarInitial {
+  /* .navBarInitial {
     @apply bg-white/30 text-black rounded-lg shadow-lg absolute;
   }
   
   .navBarScrolledUp {
     @apply bg-gradient-to-b from-black/30 to-black/10 text-white  rounded-lg fixed;
-  }
+  } */
   
   /* Custom style */
   .navBarScrolledUp {