85 lines
3 KiB
Elixir
85 lines
3 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
|
|
|
|
attr :current_user, :map, required: true, doc: "The current user - navbar is only shown when user is present"
|
|
|
|
def navbar(assigns) do
|
|
~H"""
|
|
<header class="navbar bg-base-100 shadow-sm">
|
|
<div class="flex-1">
|
|
<a class="btn btn-ghost text-xl">Mitgliederverwaltung</a>
|
|
<ul class="menu menu-horizontal bg-base-200">
|
|
<li><a href="/members">{gettext("Members")}</a></li>
|
|
<li><a>Transaktionen</a></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()} />
|
|
<select name="locale" onchange="this.form.submit()" class="select select-sm">
|
|
<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">
|
|
<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"
|
|
>
|
|
<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" />
|
|
<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"
|
|
>
|
|
<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><a>{gettext("Settings")}</a></li>
|
|
<li>
|
|
<.link href={~p"/sign-out"}>{gettext("Logout")}</.link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
"""
|
|
end
|
|
end
|