local-it/mitgliederverwaltung
2
3
Fork 0
Code Issues 51 Pull requests 13 Projects 1 Releases Packages 1 Activity Actions

feat (navbar): updated navbar with daisy UI component as demo

Browse source
This commit is contained in:
carla 2025-07-21 11:45:29 +02:00
parent bbf760c2b5
commit f17f8fe74d
2 changed files with 45 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

39
lib/mv_web/components/layouts.ex
View file

@ -8,6 +8,8 @@ defmodule MvWeb.Layouts do
in regular views and live views. in regular views and live views.
""" """
use MvWeb, :html use MvWeb, :html
use Gettext, backend: MvWeb.Gettext
import MvWeb.Layouts.Navbar
embed_templates "layouts/*" embed_templates "layouts/*"
@ -31,42 +33,7 @@ defmodule MvWeb.Layouts do
def app(assigns) do def app(assigns) do
~H""" ~H"""
<header class="navbar px-4 sm:px-6 lg:px-8"> <.navbar />
<div class="flex-1">
<a href="/" class="flex-1 flex w-fit items-center gap-2">
<img src={~p"/images/logo.svg"} width="36" />
<span class="text-sm font-semibold">v{Application.spec(:phoenix, :vsn)}</span>
</a>
</div>
<div class="flex-none">
<ul class="flex flex-column px-1 space-x-4 items-center">
<li>
<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>
</li>
<li>
<a href="https://phoenixframework.org/" class="btn btn-ghost">Website</a>
</li>
<li>
<a href="https://github.com/phoenixframework/phoenix" class="btn btn-ghost">GitHub</a>
</li>
<li>
<.theme_toggle />
</li>
<li>
<a href="https://hexdocs.pm/phoenix/overview.html" class="btn btn-primary">
Get Started <span aria-hidden="true">&rarr;</span>
</a>
</li>
</ul>
</div>
</header>
<main class="px-4 py-20 sm:px-6 lg:px-16"> <main class="px-4 py-20 sm:px-6 lg:px-16">
<div class="mx-auto max-full space-y-4"> <div class="mx-auto max-full space-y-4">
{render_slot(@inner_block)} {render_slot(@inner_block)}

42
lib/mv_web/components/layouts/navbar.ex Normal file
View file

@ -0,0 +1,42 @@
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
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("Listing Members")}</a></li>
<li><a>Transaktionen</a></li>
</ul>
</div>
<div class="flex gap-2">
<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>
<a>
{gettext("Profil")}
</a>
</li>
<li><a>{gettext("Settings")}</a></li>
<li><a href="sign-out">{gettext("Logout")}</a></li>
</ul>
</div>
</div>
</header>
"""
end
end