From 1f6dfa3aa51a1c8207f47456a34c342a73147da1 Mon Sep 17 00:00:00 2001
From: Elias Kohout <elias@kohout.de>
Date: Fri, 10 Jan 2025 19:33:44 +0100
Subject: [PATCH] collapse nav for sm width screens

---
 golang/assets/templates/layout.html | 35 ++++++++++++++++++++---------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/golang/assets/templates/layout.html b/golang/assets/templates/layout.html
index 9ed4b42..6428e53 100644
--- a/golang/assets/templates/layout.html
+++ b/golang/assets/templates/layout.html
@@ -9,30 +9,43 @@
     <nav class="fixed top-0 z-50 w-full p-4">
       <div class="navbar bg-base-300 rounded-box drop-shadow-md">
 
+        {{/* Logo with navigation */}}
+
         <div class="flex-1">
           <a href="/" class="btn btn-ghost text-xl">crowsnest</a>
-          <ul class="menu menu-horizontal">
+          <ul class="menu menu-horizontal hidden sm:flex">
             <li><a class="active">Artikel</a></li>
             <li><a>Themen</a></li>
           </ul>
         </div>
 
-        <div class="flex-none pe-4">
+        {{/* Search field for normal sized screen */}}
+
+        <div class="hidden sm:flex flex-none pe-4">
             <form role="search" method="post" action="/up/search" up-submit up-autosubmit up-target=".content">
               <label class="input input-bordered input-sm flex items-center gap-2">
                 <input name="search" type="search" class="grow" placeholder="Suche" />
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 16 16"
-                  fill="currentColor"
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                   class="h-4 w-4 opacity-70">
-                  <path
-                    fill-rule="evenodd"
-                    d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
-                    clip-rule="evenodd" />
+                  <path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd" />
                 </svg>
               </label>
-          </form>
+            </form>
+        </div>
+
+        {{/* Dropdown for small screens */}}
+
+        <div class="dropdown dropdown-end sm:hidden">
+          <div tabindex="0" role="button" class="btn btn-ghost">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
+                class="h-6 w-6 opacity-70">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5M12 17.25h8.25" />
+            </svg>
+          </div>
+          <ul tabindex="0" class="menu dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
+            <li><a class="active">Artikel</a></li>
+            <li><a>Themen</a></li>
+          </ul>
         </div>
 
       </div>