From 9f1b7eefe97ebd1ab3fe553d569d280f3d947f90 Mon Sep 17 00:00:00 2001
From: Moritz <moritz.m@local-it.org>
Date: Thu, 3 Jul 2025 17:28:00 +0200
Subject: [PATCH] feat: add backpex layout

---
 lib/mv_web/components/layouts/app.html.heex | 66 +++++++++++----------
 lib/mv_web/live/member_live.ex              |  2 +-
 2 files changed, 35 insertions(+), 33 deletions(-)

diff --git a/lib/mv_web/components/layouts/app.html.heex b/lib/mv_web/components/layouts/app.html.heex
index 3b3b607..892d4a5 100644
--- a/lib/mv_web/components/layouts/app.html.heex
+++ b/lib/mv_web/components/layouts/app.html.heex
@@ -1,32 +1,34 @@
-<header class="px-4 sm:px-6 lg:px-8">
-  <div class="flex items-center justify-between border-b border-zinc-100 py-3 text-sm">
-    <div class="flex items-center gap-4">
-      <a href="/">
-        <img src={~p"/images/logo.svg"} width="36" />
-      </a>
-      <p class="bg-brand/5 text-brand rounded-full px-2 font-medium leading-6">
-        v{Application.spec(:phoenix, :vsn)}
-      </p>
-    </div>
-    <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900">
-      <a href="https://twitter.com/elixirphoenix" class="hover:text-zinc-700">
-        @elixirphoenix
-      </a>
-      <a href="https://github.com/phoenixframework/phoenix" class="hover:text-zinc-700">
-        GitHub
-      </a>
-      <a
-        href="https://hexdocs.pm/phoenix/overview.html"
-        class="rounded-lg bg-zinc-100 px-2 py-1 hover:bg-zinc-200/80"
-      >
-        Get Started <span aria-hidden="true">&rarr;</span>
-      </a>
-    </div>
-  </div>
-</header>
-<main class="px-4 py-20 sm:px-6 lg:px-8">
-  <div class="mx-auto max-w-2xl">
-    <.flash_group flash={@flash} />
-    {@inner_content}
-  </div>
-</main>
+<Backpex.HTML.Layout.app_shell fluid={@fluid?}>
+  <:topbar>
+    <Backpex.HTML.Layout.topbar_branding />
+
+    <Backpex.HTML.Layout.theme_selector
+      socket={@socket}
+      themes={[
+        {"Light", "light"},
+        {"Dark", "dark"}
+      ]}
+    />
+
+    <Backpex.HTML.Layout.topbar_dropdown class="mr-2 md:mr-0">
+      <:label>
+        <label tabindex="0" class="btn btn-square btn-ghost">
+          <.icon name="hero-user" class="size-6" />
+        </label>
+      </:label>
+      <li>
+        <.link navigate={~p"/"} class="text-error flex justify-between hover:bg-base-200">
+          <p>Logout</p>
+          <.icon name="hero-arrow-right-on-rectangle" class="size-5" />
+        </.link>
+      </li>
+    </Backpex.HTML.Layout.topbar_dropdown>
+  </:topbar>
+  <:sidebar>
+    <Backpex.HTML.Layout.sidebar_item current_url={@current_url} navigate={~p"/members"}>
+      <.icon name="hero-users" class="size-5" /> Members
+    </Backpex.HTML.Layout.sidebar_item>
+  </:sidebar>
+  <Backpex.HTML.Layout.flash_messages flash={@flash} />
+  <%= @inner_content %>
+</Backpex.HTML.Layout.app_shell> 
\ No newline at end of file
diff --git a/lib/mv_web/live/member_live.ex b/lib/mv_web/live/member_live.ex
index e3d2854..5556059 100644
--- a/lib/mv_web/live/member_live.ex
+++ b/lib/mv_web/live/member_live.ex
@@ -6,7 +6,7 @@ defmodule MvWeb.Live.MemberLive do
       update_changeset: &Mv.Membership.Member.update_changeset/3,
       create_changeset: &Mv.Membership.Member.create_changeset/3
     ],
-    layout: {MvWeb.Layouts, :admin}
+    layout: {MvWeb.Layouts, :app}
 
   @impl Backpex.LiveResource
   def singular_name, do: "Member"