eliaskohout/crowsnest
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

collapse nav for sm width screens

Browse Source
This commit is contained in:
Elias Kohout
2025-01-10 19:33:44 +01:00
parent 1efa264f07
commit 1f6dfa3aa5
1 changed files with 24 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
golang/assets/templates/layout.html
View File

@@ -9,32 +9,45 @@
<nav class="fixed top-0 z-50 w-full p-4"> <nav class="fixed top-0 z-50 w-full p-4">
<div class="navbar bg-base-300 rounded-box drop-shadow-md"> <div class="navbar bg-base-300 rounded-box drop-shadow-md">
{{/* Logo with navigation */}}
<div class="flex-1"> <div class="flex-1">
<a href="/" class="btn btn-ghost text-xl">crowsnest</a> <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 class="active">Artikel</a></li>
<li><a>Themen</a></li> <li><a>Themen</a></li>
</ul> </ul>
</div> </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"> <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"> <label class="input input-bordered input-sm flex items-center gap-2">
<input name="search" type="search" class="grow" placeholder="Suche" /> <input name="search" type="search" class="grow" placeholder="Suche" />
<svg <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="h-4 w-4 opacity-70"> class="h-4 w-4 opacity-70">
<path <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" />
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> </svg>
</label> </label>
</form> </form>
</div> </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> </div>
</nav> </nav>