From f17f8fe74db5f411d56c02a3240db687c7c2543f Mon Sep 17 00:00:00 2001
From: carla <carla@local-it.org>
Date: Mon, 21 Jul 2025 11:45:29 +0200
Subject: [PATCH] feat (navbar): updated navbar with daisy UI component as demo

---
 lib/mv_web/components/layouts.ex        | 39 ++---------------------
 lib/mv_web/components/layouts/navbar.ex | 42 +++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 36 deletions(-)
 create mode 100644 lib/mv_web/components/layouts/navbar.ex

diff --git a/lib/mv_web/components/layouts.ex b/lib/mv_web/components/layouts.ex
index f08c6ba..b109b25 100644
--- a/lib/mv_web/components/layouts.ex
+++ b/lib/mv_web/components/layouts.ex
@@ -8,6 +8,8 @@ defmodule MvWeb.Layouts do
   in regular views and live views.
   """
   use MvWeb, :html
+  use Gettext, backend: MvWeb.Gettext
+  import MvWeb.Layouts.Navbar
 
   embed_templates "layouts/*"
 
@@ -31,42 +33,7 @@ defmodule MvWeb.Layouts do
 
   def app(assigns) do
     ~H"""
-    <header class="navbar px-4 sm:px-6 lg:px-8">
-      <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>
-
+    <.navbar />
     <main class="px-4 py-20 sm:px-6 lg:px-16">
       <div class="mx-auto max-full space-y-4">
         {render_slot(@inner_block)}
diff --git a/lib/mv_web/components/layouts/navbar.ex b/lib/mv_web/components/layouts/navbar.ex
new file mode 100644
index 0000000..08184f3
--- /dev/null
+++ b/lib/mv_web/components/layouts/navbar.ex
@@ -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