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
|
|
@ -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