119 lines
4 KiB
Elixir
119 lines
4 KiB
Elixir
defmodule MvWeb.Layouts.Navbar do
|
|
@moduledoc """
|
|
Navbar that is used in the rootlayout shown on every page
|
|
"""
|
|
use Phoenix.Component
|
|
use Gettext, backend: MvWeb.Gettext
|
|
use MvWeb, :verified_routes
|
|
|
|
alias Mv.Membership
|
|
|
|
attr :current_user, :map,
|
|
required: true,
|
|
doc: "The current user - navbar is only shown when user is present"
|
|
|
|
def navbar(assigns) do
|
|
club_name = get_club_name()
|
|
|
|
assigns = assign(assigns, :club_name, club_name)
|
|
|
|
~H"""
|
|
<header class="navbar bg-base-100 shadow-sm">
|
|
<div class="flex-1">
|
|
<a class="btn btn-ghost text-xl">{@club_name}</a>
|
|
<ul class="menu menu-horizontal bg-base-200">
|
|
<li><.link navigate="/members">{gettext("Members")}</.link></li>
|
|
<li><.link navigate="/custom_fields">{gettext("Custom Fields")}</.link></li>
|
|
<li><.link navigate="/users">{gettext("Users")}</.link></li>
|
|
</ul>
|
|
</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 cursor-pointer gap-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"
|
|
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="bg-neutral text-neutral-content w-12 rounded-full">
|
|
<span>AA</span>
|
|
</div>
|
|
</div>
|
|
<ul
|
|
tabindex="0"
|
|
class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow"
|
|
>
|
|
<li>
|
|
<.link navigate={~p"/users/#{@current_user.id}"}>
|
|
{gettext("Profil")}
|
|
</.link>
|
|
</li>
|
|
<li>
|
|
<.link navigate={~p"/settings"}>{gettext("Settings")}</.link>
|
|
</li>
|
|
<li>
|
|
<.link href={~p"/sign-out"}>{gettext("Logout")}</.link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
"""
|
|
end
|
|
|
|
# Helper function to get club name from settings
|
|
# Falls back to "Mitgliederverwaltung" if settings can't be loaded
|
|
defp get_club_name do
|
|
case Membership.get_settings() do
|
|
{:ok, settings} -> settings.club_name
|
|
_ -> "Mitgliederverwaltung"
|
|
end
|
|
end
|
|
end
|