local-it/mitgliederverwaltung
2
3
Fork 0
Code Issues 61 Pull requests 10 Projects 1 Releases Packages 1 Activity Actions

feat: adds sidebar as overlay and moves navbar content there
Some checks failed
continuous-integration/drone/push Build is failing
Details

Browse source
This commit is contained in:
carla 2025-12-11 10:11:00 +01:00
parent bb6ea0085b
commit b0097ab99d
4 changed files with 316 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

90
lib/mv_web/components/layouts/navbar.ex
View file

@ -14,10 +14,14 @@ defmodule MvWeb.Layouts.Navbar do
~H"""
<header class="shadow-sm navbar bg-base-100">
<div class="flex-1">
<label
for="main-drawer"
aria-label="open sidebar"
class="mr-2 btn btn-square btn-ghost lg:hidden"
<button
type="button"
onclick="document.getElementById('main-drawer').checked = !document.getElementById('main-drawer').checked"
aria-label={gettext("Toggle navigation menu")}
aria-expanded="false"
aria-controls="main-sidebar"
id="sidebar-toggle"
class="mr-2 btn btn-square btn-ghost focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -28,87 +32,15 @@ defmodule MvWeb.Layouts.Navbar do
fill="none"
stroke="currentColor"
class="my-1.5 inline-block size-4"
aria-hidden="true"
>
<path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z">
</path>
<path d="M9 4v16"></path>
<path d="M14 10l2 2l-2 2"></path>
</svg>
</label>
</div>
<div class="flex gap-2">
<form method="post" action="/set_locale" class="mr-4">
<input type="hidden" name="_csrf_token" value={Plug.CSRFProtection.get_csrf_token()} />
<label class="sr-only" for="locale-select">{gettext("Select language")}</label>
<select
id="locale-select"
name="locale"
onchange="this.form.submit()"
class="select select-sm"
aria-label={gettext("Select language")}
>
<option value="de" selected={Gettext.get_locale() == "de"}>Deutsch</option>
<option value="en" selected={Gettext.get_locale() == "en"}>English</option>
</select>
</form>
<!-- Daisy UI Theme Toggle for dark and light mode-->
<label class="flex gap-2 cursor-pointer" aria-label={gettext("Toggle dark mode")}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<circle cx="12" cy="12" r="5" />
<path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" />
</svg>
<input
type="checkbox"
value="dark"
class="toggle theme-controller"
aria-label={gettext("Toggle dark mode")}
/>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
</label>
<div class="dropdown dropdown-end">
<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar avatar-placeholder">
<div class="w-12 rounded-full bg-neutral text-neutral-content">
<span>AA</span>
</div>
</div>
<ul
tabindex="0"
class="p-2 mt-3 shadow menu menu-sm dropdown-content bg-base-100 rounded-box z-1 w-52"
>
<li>
<.link navigate={~p"/users/#{@current_user.id}"}>
{gettext("Profil")}
</.link>
</li>
<li>
<.link href={~p"/sign-out"}>{gettext("Logout")}</.link>
</li>
</ul>
</div>
<span class="sr-only">{gettext("Toggle navigation menu")}</span>
</button>
</div>
</header>
"""