feat: uses an svg hamburger menu and pure css for mobile menu (#40)

esacteksab · web-flow · commit bed221b321d5 · 2025-04-08T01:15:57.000-05:00
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -92,41 +92,64 @@ code {
   @apply rounded-sm no-underline;
 }
 
-nav input[type="checkbox"],
-nav label {
+.menu-home {
+  @apply block md:hidden;
+}
+
+.hamburger,
+.close-menu {
   display: none;
+  top: 0.375rem;
+  right: 0.375rem;
+  border-radius: 0.25rem;
+  background-color: var(--accent-color);
 }
 
 @media (max-width: 576px) {
-  nav ul {
-    display: inline-flex;
-    flex-direction: column;
+  .hamburger,
+  .close-menu {
+    display: block; /* Show on mobile */
   }
 
-  input[type="checkbox"]:not(:checked) + ul {
+  .mobile-menu {
     display: none;
+    z-index: 40;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    overflow-y: auto;
+    background-color: rgba(0, 0, 0, 0.9);
+  }
+
+  .menu-content {
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding-top: 2rem;
   }
 
-  nav {
-    flex-direction: row-reverse;
-    flex-wrap: wrap;
-    margin-right: 0;
-    margin-left: 0;
+  .mobile-menu:target {
+    display: flex;
   }
 
-  nav label {
+  .mobile-menu ul {
     display: flex;
     flex-direction: column;
-    align-self: center;
-    line-height: 1.6em;
-    text-align: right;
+    align-items: center;
+    width: 100%;
+    padding: 0;
   }
 
-  nav ul li {
-    width: 100%;
-    margin-bottom: 0;
-    padding: 0.125rem;
-    text-align: left;
+  .mobile-menu ul li {
+    margin: 1rem 0;
+    text-align: center;
   }
 }
 
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -6,7 +6,7 @@
 <head>
   {{- partial "head.html" . }}
 </head>
-<body class="@container flex flex-col">
+<body id="body" class="@container flex flex-col w-full overflow-x-hidden relative">
 <header class="flex flex-row items-baseline m-0 p-0 px-2 md:pb-2 lg:mx-32 bg-neutral-100 dark:bg-neutral-900">
   {{- partial "header.html" . }}
 </header>
diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
@@ -9,17 +9,23 @@
   {{- end -}}
 {{- end -}}
 {{- if $hasValidEntries -}}
-<nav class="flex flex-1 flex-row-reverse">
-<label for="menu" tabindex="0">
-<span class="fa-stack">
-  <i class="fas fa-square fa-stack-2x"></i>
-  <i class="fas fa-bars fa-stack-1x fa-inverse"></i>
-</span>
-</label>
-<input id="menu" type="checkbox" />
+<nav class="md:flex flex-1 flex-row-reverse">
+  <a href="#mobile-menu" class="hamburger fixed z-20 rounded">
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+    </svg>
+  </a>
+  <div id="mobile-menu" class="mobile-menu">
+    <div class="menu-content pt-8">
+    <a href="#" class="close-menu fixed z-20 rounded">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+      </svg>
+    </a>
 <ul class="md:flex m-0 p-0 md:pr-4">
   {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" $menu) -}}
 </ul>
+</div></div>
 </nav>
 {{- end -}}
 
