Overhaul the nav bar popover button.

eswan18 · Oct 27, 2024 · 2eec0f5 · 2eec0f5
1 parent 281c38d
commit 2eec0f5
Show file tree

Hide file tree

Showing 3 changed files with 447 additions and 195 deletions.
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -22,19 +22,30 @@
   </head>
   <body>
     {{ partial "navbar/main.html" page }}
-    <div class="flex flex-row mt-8 mx-4">
-      {{/* Left sidebar */}}
-      <div class="flex-auto">
-        {{ block "left-sidebar" . }}
-        {{ end }}
+    <div class="flex flex-row mt-8 mx-4 drawer">
+      <input id="sidebar-drawer" type="checkbox" class="drawer-toggle" />
+      <div class="drawer-content">
+        {{/* Left sidebar */}}
+        <div class="flex-auto">
+          {{ block "left-sidebar" . }}
+          {{ end }}
+        </div>
+        <div class="flex-grow-0 flex-shrink-1 md:max-w-3xl overflow-hidden prose">
+          {{ partial "pageContent/main.html" . }}
+        </div>
+        {{/* Right sidebar */}}
+        <div class="flex-auto">
+          {{ block "right-sidebar" . }}
+          {{ end }}
+        </div>
       </div>
-      <div class="flex-grow-0 flex-shrink-1 md:max-w-3xl overflow-hidden prose">
-        {{ partial "pageContent/main.html" . }}
-      </div>
-      {{/* Right sidebar */}}
-      <div class="flex-auto">
-        {{ block "right-sidebar" . }}
-        {{ end }}
+      <div class="drawer-side">
+        <label for="sidebar-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
+          <ul tabindex="0" class="menu bg-base-200 text-base-content min-h-full w-64 p-4">
+          {{ range $navItem := $.Site.Params.navbar.links }}
+              <li><a href="{{ $navItem.link }}">{{ $navItem.name }}</a></li>
+          {{ end }}
+          </ul>
       </div>
     </div>
     {{ partial "footer.html" . }}

diff --git a/layouts/partials/navbar/siteNav.html b/layouts/partials/navbar/siteNav.html
@@ -1,28 +1,20 @@
-{{/* Expects to be passed an array of objects that have `name` and `link` fields */}}
+{{/* Expects to be passed the page object. */}}
 
+
+{{ $thisPageLink := .RelPermalink | strings.TrimSuffix "/" }}
+{{ $navLinks := .Site.Params.Navbar.links }}
 {{/* The standard site nav for full-size screens */}}
 <div class="hidden lg:flex bg-base-200">
     <ul class="menu menu-horizontal font-semibold text-accent">
-        {{ $thisPageLink := .RelPermalink | strings.TrimSuffix "/" }}
-        {{ range $navitem := .Site.Params.Navbar.links }}{{ with $navitem}}
-        {{ if eq $thisPageLink (.link | strings.TrimSuffix "/") }}
-            <li><a class="active" href="{{ .link }}">{{ .name }}</a></li>
+        {{ range $navItem := $navLinks }}
+        {{ if eq $thisPageLink ($navItem.link | strings.TrimSuffix "/") }}
+            <li><a class="active" href="{{ $navItem.link }}">{{ $navItem.name }}</a></li>
         {{ else }}
-            <li><a href="{{ .link }}">{{ .name }}</a></li>
-        {{ end }}
+            <li><a href="{{ $navItem.link }}">{{ $navItem.name }}</a></li>
         {{ end }}{{ end }}
     </ul>
 </div>
 {{/* The mobile-only dropdown menu */}}
-<div class="lg:hidden dropdown">
-    <div tabindex="0" role="button" class="btn btn-accent btn-sm lg:hidden p-0.5 align-middle dark:text-white">
-        <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 12h8m-8 6h16" /></svg>
-    </div>
-    <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
-    {{/* {{ range $navitem := .}}
-        {{ with $navitem }}
-        <li><a href="{{ .link }}">{{ .name }}</a></li>
-        {{ end }}
-    {{ end }} */}}
-    </ul>
-</div>
+<label for="sidebar-drawer" class="lg:hidden drawer-button btn btn-ghost">
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-16 6h16" /></svg>
+</label>