feat: adds sidebar as overlay and moves navbar content there
Some checks failed
continuous-integration/drone/push Build is failing
Some checks failed
continuous-integration/drone/push Build is failing
This commit is contained in:
parent
bb6ea0085b
commit
b0097ab99d
4 changed files with 316 additions and 100 deletions
|
|
@ -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>
|
||||
"""
|
||||
|
|
|
|||
|
|
@ -10,70 +10,187 @@ defmodule MvWeb.Layouts.Sidebar do
|
|||
def sidebar(assigns) do
|
||||
~H"""
|
||||
<div class="drawer-side is-drawer-close:overflow-visible">
|
||||
<label for="main-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
|
||||
<div class="flex flex-col items-start min-h-full bg-base-200 is-drawer-close:w-14 is-drawer-open:w-64">
|
||||
<ul class="w-64 menu">
|
||||
<button
|
||||
type="button"
|
||||
onclick="document.getElementById('main-drawer').checked = false"
|
||||
aria-label={gettext("Close sidebar")}
|
||||
class="drawer-overlay focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
tabindex="-1"
|
||||
>
|
||||
</button>
|
||||
<nav
|
||||
id="main-sidebar"
|
||||
aria-label={gettext("Main navigation")}
|
||||
class="flex flex-col items-start min-h-full bg-base-200 is-drawer-close:w-14 is-drawer-open:w-64"
|
||||
>
|
||||
<ul class="w-64 menu" role="menubar">
|
||||
<li>
|
||||
<h1 class="mb-2 text-lg font-bold menu-title is-drawer-close:hidden">{@club_name}</h1>
|
||||
</li>
|
||||
<%= if @current_user do %>
|
||||
<li>
|
||||
<li role="none">
|
||||
<.link
|
||||
navigate="/members"
|
||||
class={[
|
||||
"is-drawer-close:tooltip is-drawer-close:tooltip-right"
|
||||
"is-drawer-close:tooltip is-drawer-close:tooltip-right focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
|
||||
]}
|
||||
data-tip={gettext("Members")}
|
||||
role="menuitem"
|
||||
>
|
||||
<.icon name="hero-users" class="size-5" />
|
||||
<.icon name="hero-users" class="size-5" aria-hidden="true" />
|
||||
<span class="is-drawer-close:hidden">{gettext("Members")}</span>
|
||||
</.link>
|
||||
</li>
|
||||
<li>
|
||||
<li role="none">
|
||||
<.link
|
||||
navigate="/users"
|
||||
class={[
|
||||
"is-drawer-close:tooltip is-drawer-close:tooltip-right"
|
||||
"is-drawer-close:tooltip is-drawer-close:tooltip-right focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
|
||||
]}
|
||||
data-tip={gettext("Users")}
|
||||
role="menuitem"
|
||||
>
|
||||
<.icon name="hero-user-circle" class="size-5" />
|
||||
<.icon name="hero-user-circle" class="size-5" aria-hidden="true" />
|
||||
<span class="is-drawer-close:hidden">{gettext("Users")}</span>
|
||||
</.link>
|
||||
</li>
|
||||
<li class="is-drawer-close:hidden">
|
||||
<li class="is-drawer-close:hidden" role="none">
|
||||
<h2 class="flex items-center gap-2 menu-title">
|
||||
<.icon name="hero-currency-dollar" class="size-5" />
|
||||
<.icon name="hero-currency-dollar" class="size-5" aria-hidden="true" />
|
||||
{gettext("Contributions")}
|
||||
</h2>
|
||||
<ul>
|
||||
<li class="is-drawer-close:hidden">
|
||||
<.link navigate="/contribution_types">
|
||||
<ul role="menu">
|
||||
<li class="is-drawer-close:hidden" role="none">
|
||||
<.link
|
||||
navigate="/contribution_types"
|
||||
role="menuitem"
|
||||
class="focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
|
||||
>
|
||||
{gettext("Plans")}
|
||||
</.link>
|
||||
</li>
|
||||
<li class="is-drawer-close:hidden">
|
||||
<.link navigate="/contribution_settings">
|
||||
<li class="is-drawer-close:hidden" role="none">
|
||||
<.link
|
||||
navigate="/contribution_settings"
|
||||
role="menuitem"
|
||||
class="focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
|
||||
>
|
||||
{gettext("Settings")}
|
||||
</.link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<li role="none">
|
||||
<.link
|
||||
navigate="/settings"
|
||||
class={[
|
||||
"is-drawer-close:tooltip is-drawer-close:tooltip-right"
|
||||
"is-drawer-close:tooltip is-drawer-close:tooltip-right focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
|
||||
]}
|
||||
data-tip={gettext("Settings")}
|
||||
role="menuitem"
|
||||
>
|
||||
<.icon name="hero-cog-6-tooth" class="size-5" />
|
||||
<.icon name="hero-cog-6-tooth" class="size-5" aria-hidden="true" />
|
||||
<span class="is-drawer-close:hidden">{gettext("Settings")}</span>
|
||||
</.link>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
<%= if @current_user do %>
|
||||
<div class="flex flex-col gap-4 p-4 mt-auto w-full is-drawer-close:items-center">
|
||||
<form method="post" action="/set_locale" class="w-full">
|
||||
<input type="hidden" name="_csrf_token" value={get_csrf_token()} />
|
||||
<label class="sr-only" for="locale-select-sidebar">{gettext("Select language")}</label>
|
||||
<select
|
||||
id="locale-select-sidebar"
|
||||
name="locale"
|
||||
onchange="this.form.submit()"
|
||||
class="select select-sm w-full is-drawer-close:w-auto focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
|
||||
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 is-drawer-close:justify-center focus-within:outline-none focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2" 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 focus:outline-none"
|
||||
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-top is-drawer-close:dropdown-end">
|
||||
<button
|
||||
type="button"
|
||||
tabindex="0"
|
||||
role="button"
|
||||
aria-label={gettext("User menu")}
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
class="btn btn-ghost btn-circle avatar avatar-placeholder focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
|
||||
>
|
||||
<div class="w-12 rounded-full bg-neutral text-neutral-content">
|
||||
<span aria-hidden="true">AA</span>
|
||||
</div>
|
||||
</button>
|
||||
<ul
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
class="p-2 mt-3 shadow menu menu-sm dropdown-content bg-base-100 rounded-box z-1 w-52 focus:outline-none"
|
||||
>
|
||||
<li role="none">
|
||||
<.link
|
||||
navigate={~p"/users/#{@current_user.id}"}
|
||||
role="menuitem"
|
||||
class="focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
|
||||
>
|
||||
{gettext("Profil")}
|
||||
</.link>
|
||||
</li>
|
||||
<li role="none">
|
||||
<.link
|
||||
href={~p"/sign-out"}
|
||||
role="menuitem"
|
||||
class="focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
|
||||
>
|
||||
{gettext("Logout")}
|
||||
</.link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</nav>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue