197 lines
8 KiB
Elixir
197 lines
8 KiB
Elixir
defmodule MvWeb.Layouts.Sidebar do
|
|
@moduledoc """
|
|
Sidebar navigation component used in the drawer layout
|
|
"""
|
|
use MvWeb, :html
|
|
|
|
attr :current_user, :map, default: nil, doc: "The current user"
|
|
attr :club_name, :string, required: true, doc: "The name of the club"
|
|
|
|
def sidebar(assigns) do
|
|
~H"""
|
|
<div class="drawer-side is-drawer-close:overflow-visible">
|
|
<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 role="none">
|
|
<.link
|
|
navigate="/members"
|
|
class={[
|
|
"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" aria-hidden="true" />
|
|
<span class="is-drawer-close:hidden">{gettext("Members")}</span>
|
|
</.link>
|
|
</li>
|
|
<li role="none">
|
|
<.link
|
|
navigate="/users"
|
|
class={[
|
|
"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" aria-hidden="true" />
|
|
<span class="is-drawer-close:hidden">{gettext("Users")}</span>
|
|
</.link>
|
|
</li>
|
|
<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" aria-hidden="true" />
|
|
{gettext("Contributions")}
|
|
</h2>
|
|
<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" 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 role="none">
|
|
<.link
|
|
navigate="/settings"
|
|
class={[
|
|
"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" aria-hidden="true" />
|
|
<span class="is-drawer-close:hidden">{gettext("Settings")}</span>
|
|
</.link>
|
|
</li>
|
|
<% end %>
|
|
</ul>
|
|
<%= 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
|
|
end
|