add admin sidebar layout with responsive drawer navigation

- New admin root + child layouts with daisyUI drawer sidebar
- AdminLayoutHook tracks current path for active nav highlighting
- Split router into :admin, :admin_theme, :user_settings live_sessions
- Theme editor stays full-screen with back link to admin
- Admin bar on shop pages for logged-in users (mount_current_scope)
- Strip Layouts.app wrapper from admin LiveViews
- Remove nav from root.html.heex (now only serves auth pages)
- 9 new layout tests covering sidebar, active state, theme editor, admin bar

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

lib/simpleshop_theme_web/admin_layout_hook.ex

@@ -0,0 +1,19 @@
+defmodule SimpleshopThemeWeb.AdminLayoutHook do
+  @moduledoc """
+  LiveView on_mount hook that assigns the current path for admin sidebar navigation.
+  """
+  import Phoenix.Component
+
+  def on_mount(:assign_current_path, _params, _session, socket) do
+    socket =
+      socket
+      |> assign(:current_path, "")
+      |> Phoenix.LiveView.attach_hook(:set_current_path, :handle_params, fn _params,
+                                                                            uri,
+                                                                            socket ->
+        {:cont, assign(socket, :current_path, URI.parse(uri).path)}
+      end)
+
+    {:cont, socket}
+  end
+end

lib/simpleshop_theme_web/components/layouts.ex

@@ -35,35 +35,8 @@ defmodule SimpleshopThemeWeb.Layouts do
 
   def app(assigns) do
     ~H"""
-    <header class="navbar px-4 sm:px-6 lg:px-8">
+    <main class="px-4 py-12 sm:px-6 lg:px-8">
-      <div class="flex-1">
+      <div class="mx-auto max-w-lg flex flex-col gap-4">
-        <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>
-            <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-8">
-      <div class="mx-auto max-w-2xl flex flex-col gap-4">
         {render_slot(@inner_block)}
       </div>
     </main>
@@ -72,6 +45,11 @@ defmodule SimpleshopThemeWeb.Layouts do
     """
   end
 
+  @doc false
+  def admin_nav_active?(current_path, link_path) do
+    if String.starts_with?(current_path, link_path), do: "active", else: nil
+  end
+
   @doc """
   Shows the flash group with standard titles and content.
 

lib/simpleshop_theme_web/components/layouts/admin.html.heex

@@ -0,0 +1,102 @@
+<div class="drawer lg:drawer-open h-full">
+  <input id="admin-drawer" type="checkbox" class="drawer-toggle" />
+
+  <%!-- main content area --%>
+  <div class="drawer-content flex flex-col min-h-screen">
+    <%!-- mobile header --%>
+    <header class="navbar bg-base-100 border-b border-base-200 lg:hidden">
+      <div class="flex-none">
+        <label for="admin-drawer" class="btn btn-square btn-ghost" aria-label="Open navigation">
+          <.icon name="hero-bars-3" class="size-5" />
+        </label>
+      </div>
+      <div class="flex-1">
+        <span class="text-lg font-semibold">SimpleShop</span>
+      </div>
+      <div class="flex-none">
+        <.link href={~p"/"} class="btn btn-ghost btn-sm">
+          <.icon name="hero-arrow-top-right-on-square-mini" class="size-4" /> Shop
+        </.link>
+      </div>
+    </header>
+
+    <%!-- page content --%>
+    <main class="flex-1 p-4 sm:p-6 lg:p-8">
+      <div class="mx-auto max-w-5xl">
+        {@inner_content}
+      </div>
+    </main>
+  </div>
+
+  <%!-- sidebar --%>
+  <div class="drawer-side z-40">
+    <label for="admin-drawer" class="drawer-overlay" aria-label="Close navigation"></label>
+    <aside class="bg-base-200 w-64 min-h-full flex flex-col">
+      <%!-- sidebar header --%>
+      <div class="p-4 border-b border-base-300">
+        <.link navigate={~p"/admin/orders"} class="text-lg font-bold tracking-tight">
+          SimpleShop
+        </.link>
+        <p class="text-xs text-base-content/60 mt-0.5 truncate">
+          {@current_scope.user.email}
+        </p>
+      </div>
+
+      <%!-- nav links --%>
+      <nav class="flex-1 p-2" aria-label="Admin navigation">
+        <ul class="menu gap-0.5">
+          <li>
+            <.link
+              navigate={~p"/admin/orders"}
+              class={admin_nav_active?(@current_path, "/admin/orders")}
+            >
+              <.icon name="hero-shopping-bag" class="size-5" /> Orders
+            </.link>
+          </li>
+          <li>
+            <.link
+              href={~p"/admin/theme"}
+              class={admin_nav_active?(@current_path, "/admin/theme")}
+            >
+              <.icon name="hero-paint-brush" class="size-5" /> Theme
+            </.link>
+          </li>
+          <li>
+            <.link
+              navigate={~p"/admin/providers"}
+              class={admin_nav_active?(@current_path, "/admin/providers")}
+            >
+              <.icon name="hero-cube" class="size-5" /> Providers
+            </.link>
+          </li>
+          <li>
+            <.link
+              navigate={~p"/admin/settings"}
+              class={admin_nav_active?(@current_path, "/admin/settings")}
+            >
+              <.icon name="hero-cog-6-tooth" class="size-5" /> Settings
+            </.link>
+          </li>
+        </ul>
+      </nav>
+
+      <%!-- sidebar footer --%>
+      <div class="p-2 border-t border-base-300">
+        <ul class="menu gap-0.5">
+          <li>
+            <.link href={~p"/"}>
+              <.icon name="hero-arrow-top-right-on-square" class="size-5" /> View shop
+            </.link>
+          </li>
+          <li>
+            <.link href={~p"/users/log-out"} method="delete">
+              <.icon name="hero-arrow-right-start-on-rectangle" class="size-5" /> Log out
+            </.link>
+          </li>
+        </ul>
+      </div>
+    </aside>
+  </div>
+</div>
+
+<.flash_group flash={@flash} />

lib/simpleshop_theme_web/components/layouts/admin_root.html.heex

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en" class="h-full">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="csrf-token" content={get_csrf_token()} />
+    <.live_title default="Admin" suffix=" · SimpleShop">
+      {assigns[:page_title]}
+    </.live_title>
+    <link phx-track-static rel="stylesheet" href={~p"/assets/css/app.css"} />
+    <script defer phx-track-static src={~p"/assets/js/app.js"}>
+    </script>
+    <script>
+      (() => {
+        const setTheme = (theme) => {
+          if (theme === "system") {
+            localStorage.removeItem("phx:theme");
+            document.documentElement.removeAttribute("data-theme");
+          } else {
+            localStorage.setItem("phx:theme", theme);
+            document.documentElement.setAttribute("data-theme", theme);
+          }
+        };
+        if (!document.documentElement.hasAttribute("data-theme")) {
+          setTheme(localStorage.getItem("phx:theme") || "system");
+        }
+        window.addEventListener("storage", (e) => e.key === "phx:theme" && setTheme(e.newValue || "system"));
+        window.addEventListener("phx:set-theme", (e) => setTheme(e.target.dataset.phxTheme));
+      })();
+    </script>
+  </head>
+  <body class="h-full">
+    {@inner_content}
+  </body>
+</html>

lib/simpleshop_theme_web/components/layouts/root.html.heex

@@ -31,42 +31,6 @@
     </script>
   </head>
   <body>
-    <nav class="w-full relative z-10 flex items-center px-4 sm:px-6 lg:px-8 justify-between">
-      <div>
-        <%= if @current_scope && assigns[:conn] && @conn.request_path == "/admin/theme" do %>
-          <.link href={~p"/"} class="text-sm hover:underline">&larr; View Shop</.link>
-        <% end %>
-      </div>
-      <ul class="menu menu-horizontal flex items-center gap-4">
-        <%= if @current_scope do %>
-          <li>
-            {@current_scope.user.email}
-          </li>
-          <li>
-            <.link href={~p"/admin/theme"}>Theme</.link>
-          </li>
-          <li>
-            <.link href={~p"/admin/orders"}>Orders</.link>
-          </li>
-          <li>
-            <.link href={~p"/admin/settings"}>Credentials</.link>
-          </li>
-          <li>
-            <.link href={~p"/users/settings"}>Settings</.link>
-          </li>
-          <li>
-            <.link href={~p"/users/log-out"} method="delete">Log out</.link>
-          </li>
-        <% else %>
-          <li>
-            <.link href={~p"/users/register"}>Register</.link>
-          </li>
-          <li>
-            <.link href={~p"/users/log-in"}>Log in</.link>
-          </li>
-        <% end %>
-      </ul>
-    </nav>
     {@inner_content}
   </body>
 </html>

lib/simpleshop_theme_web/components/layouts/shop.html.heex

@@ -1,2 +1,13 @@
+<div
+  :if={assigns[:current_scope]}
+  style="background-color: var(--t-surface-raised, #f5f5f5); border-bottom: 1px solid var(--t-border-default, #e5e5e5); padding: 0.25rem 1rem; font-size: 0.75rem; text-align: right;"
+>
+  <.link
+    href={~p"/admin/orders"}
+    style="color: var(--t-text-secondary, #666); text-decoration: none;"
+  >
+    Admin
+  </.link>
+</div>
 <.shop_flash_group flash={@flash} />
 {@inner_content}

lib/simpleshop_theme_web/controllers/admin_controller.ex

@@ -2,6 +2,6 @@ defmodule SimpleshopThemeWeb.AdminController do
   use SimpleshopThemeWeb, :controller
 
   def index(conn, _params) do
-    redirect(conn, to: ~p"/admin/theme")
+    redirect(conn, to: ~p"/admin/orders")
   end
 end

lib/simpleshop_theme_web/live/admin/order_show.ex

@@ -28,7 +28,6 @@ defmodule SimpleshopThemeWeb.Admin.OrderShow do
   @impl true
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} current_scope={@current_scope}>
     <.header>
       <.link
         navigate={~p"/admin/orders"}
@@ -190,7 +189,6 @@ defmodule SimpleshopThemeWeb.Admin.OrderShow do
         </table>
       </div>
     </div>
-    </Layouts.app>
     """
   end
 

lib/simpleshop_theme_web/live/admin/orders.ex

@@ -36,7 +36,6 @@ defmodule SimpleshopThemeWeb.Admin.Orders do
   @impl true
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} current_scope={@current_scope}>
     <.header>
       Orders
     </.header>
@@ -96,7 +95,6 @@ defmodule SimpleshopThemeWeb.Admin.Orders do
       <p class="text-lg font-medium">No orders yet</p>
       <p class="text-sm mt-1">Orders will appear here once customers check out.</p>
     </div>
-    </Layouts.app>
     """
   end
 

lib/simpleshop_theme_web/live/admin/providers/form.html.heex

@@ -1,9 +1,8 @@
-<Layouts.app flash={@flash}>
+<.header>
-  <.header>
   {if @live_action == :new, do: "Connect to Printify", else: "Printify settings"}
-  </.header>
+</.header>
 
-  <div class="max-w-xl mt-6">
+<div class="max-w-xl mt-6">
   <%= if @live_action == :new do %>
     <div class="prose prose-sm mb-6">
       <p>
@@ -100,5 +99,4 @@
       </.link>
     </div>
   </.form>
-  </div>
+</div>
-</Layouts.app>

lib/simpleshop_theme_web/live/admin/providers/index.html.heex

@@ -1,14 +1,13 @@
-<Layouts.app flash={@flash}>
+<.header>
-  <.header>
   Providers
   <:actions>
     <.button navigate={~p"/admin/providers/new"}>
       <.icon name="hero-plus" class="size-4 mr-1" /> Connect Printify
     </.button>
   </:actions>
-  </.header>
+</.header>
 
-  <div id="connections" phx-update="stream" class="mt-6 space-y-4">
+<div id="connections" phx-update="stream" class="mt-6 space-y-4">
   <div class="hidden only:block text-center py-12">
     <.icon name="hero-cube" class="size-16 mx-auto mb-4 text-base-content/30" />
     <h2 class="text-xl font-medium">Connect your Printify account</h2>
@@ -77,5 +76,4 @@
       </div>
     </div>
   </div>
-  </div>
+</div>
-</Layouts.app>

lib/simpleshop_theme_web/live/admin/settings.ex

@@ -119,7 +119,6 @@ defmodule SimpleshopThemeWeb.Admin.Settings do
   @impl true
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} current_scope={@current_scope}>
     <div class="max-w-2xl">
       <.header>
         Settings
@@ -200,7 +199,6 @@ defmodule SimpleshopThemeWeb.Admin.Settings do
         <% end %>
       </section>
     </div>
-    </Layouts.app>
     """
   end
 

lib/simpleshop_theme_web/live/admin/theme/index.html.heex

@@ -35,7 +35,14 @@
           </button>
         </div>
       <% else %>
-        <!-- Header -->
+        <.link
+          href={~p"/admin/orders"}
+          class="inline-flex items-center gap-1 text-sm text-base-content/60 hover:text-base-content mb-4"
+        >
+          <.icon name="hero-arrow-left-mini" class="size-4" /> Admin
+        </.link>
+        
+<!-- Header -->
         <div class="mb-6 flex items-start justify-between gap-3">
           <div class="flex-1">
             <h1 class="text-xl font-semibold tracking-tight mb-2 text-base-content">

lib/simpleshop_theme_web/router.ex

@@ -28,6 +28,10 @@ defmodule SimpleshopThemeWeb.Router do
     plug SimpleshopThemeWeb.Plugs.LoadTheme
   end
 
+  pipeline :admin do
+    plug :put_root_layout, html: {SimpleshopThemeWeb.Layouts, :admin_root}
+  end
+
   # Public storefront (root level)
   scope "/", SimpleshopThemeWeb do
     pipe_through [:browser, :shop]
@@ -43,6 +47,7 @@ defmodule SimpleshopThemeWeb.Router do
     live_session :public_shop,
       layout: {SimpleshopThemeWeb.Layouts, :shop},
       on_mount: [
+        {SimpleshopThemeWeb.UserAuth, :mount_current_scope},
         {SimpleshopThemeWeb.ThemeHook, :mount_theme},
         {SimpleshopThemeWeb.ThemeHook, :require_site_live},
         {SimpleshopThemeWeb.CartHook, :mount_cart}
@@ -123,27 +128,46 @@ defmodule SimpleshopThemeWeb.Router do
 
   ## Authentication routes
 
-  # /admin redirects to theme editor (requires auth, will redirect to login if needed)
+  # /admin index redirect
   scope "/admin", SimpleshopThemeWeb do
     pipe_through [:browser, :require_authenticated_user]
 
     get "/", AdminController, :index
   end
 
+  # Admin pages with sidebar layout
+  scope "/admin", SimpleshopThemeWeb do
+    pipe_through [:browser, :require_authenticated_user, :admin]
+
+    live_session :admin,
+      layout: {SimpleshopThemeWeb.Layouts, :admin},
+      on_mount: [
+        {SimpleshopThemeWeb.UserAuth, :require_authenticated},
+        {SimpleshopThemeWeb.AdminLayoutHook, :assign_current_path}
+      ] do
+      live "/orders", Admin.Orders, :index
+      live "/orders/:id", Admin.OrderShow, :show
+      live "/providers", Admin.Providers.Index, :index
+      live "/providers/new", Admin.Providers.Form, :new
+      live "/providers/:id/edit", Admin.Providers.Form, :edit
+      live "/settings", Admin.Settings, :index
+    end
+
+    # Theme editor: admin root layout but full-screen (no sidebar)
+    live_session :admin_theme,
+      on_mount: [{SimpleshopThemeWeb.UserAuth, :require_authenticated}] do
+      live "/theme", Admin.Theme.Index, :index
+    end
+  end
+
+  # User account settings
   scope "/", SimpleshopThemeWeb do
     pipe_through [:browser, :require_authenticated_user]
 
-    live_session :require_authenticated_user,
+    live_session :user_settings,
       on_mount: [{SimpleshopThemeWeb.UserAuth, :require_authenticated}] do
       live "/users/settings", Auth.Settings, :edit
       live "/users/settings/confirm-email/:token", Auth.Settings, :confirm_email
-      live "/admin/theme", Admin.Theme.Index, :index
-      live "/admin/providers", Admin.Providers.Index, :index
-      live "/admin/providers/new", Admin.Providers.Form, :new
-      live "/admin/providers/:id/edit", Admin.Providers.Form, :edit
-      live "/admin/orders", Admin.Orders, :index
-      live "/admin/orders/:id", Admin.OrderShow, :show
-      live "/admin/settings", Admin.Settings, :index
     end
 
     post "/users/update-password", UserSessionController, :update_password

test/simpleshop_theme_web/controllers/user_session_controller_test.exs

@@ -20,12 +20,10 @@ defmodule SimpleshopThemeWeb.UserSessionControllerTest do
       assert get_session(conn, :user_token)
       assert redirected_to(conn) == ~p"/"
 
-      # Now do a logged in request to an admin page and assert on the menu
+      # Now do a logged in request and assert on the page content
       conn = get(conn, ~p"/users/settings")
       response = html_response(conn, 200)
       assert response =~ user.email
-      assert response =~ ~p"/users/settings"
-      assert response =~ ~p"/users/log-out"
     end
 
     test "logs the user in with remember me", %{conn: conn, user: user} do
@@ -84,12 +82,10 @@ defmodule SimpleshopThemeWeb.UserSessionControllerTest do
       assert get_session(conn, :user_token)
       assert redirected_to(conn) == ~p"/"
 
-      # Now do a logged in request to an admin page and assert on the menu
+      # Now do a logged in request and assert on the page content
       conn = get(conn, ~p"/users/settings")
       response = html_response(conn, 200)
       assert response =~ user.email
-      assert response =~ ~p"/users/settings"
-      assert response =~ ~p"/users/log-out"
     end
 
     test "confirms unconfirmed user", %{conn: conn, unconfirmed_user: user} do
@@ -108,12 +104,10 @@ defmodule SimpleshopThemeWeb.UserSessionControllerTest do
 
       assert Accounts.get_user!(user.id).confirmed_at
 
-      # Now do a logged in request to an admin page and assert on the menu
+      # Now do a logged in request and assert on the page content
       conn = get(conn, ~p"/users/settings")
       response = html_response(conn, 200)
       assert response =~ user.email
-      assert response =~ ~p"/users/settings"
-      assert response =~ ~p"/users/log-out"
     end
 
     test "redirects to login page when magic link is invalid", %{conn: conn} do

test/simpleshop_theme_web/live/admin/layout_test.exs

@@ -0,0 +1,91 @@
+defmodule SimpleshopThemeWeb.Admin.LayoutTest do
+  use SimpleshopThemeWeb.ConnCase, async: false
+
+  import Phoenix.LiveViewTest
+  import SimpleshopTheme.AccountsFixtures
+
+  setup do
+    user = user_fixture()
+    %{user: user}
+  end
+
+  describe "admin sidebar" do
+    setup %{conn: conn, user: user} do
+      %{conn: log_in_user(conn, user)}
+    end
+
+    test "renders sidebar nav links on admin pages", %{conn: conn} do
+      {:ok, view, _html} = live(conn, ~p"/admin/orders")
+
+      assert has_element?(view, ~s(a[href="/admin/orders"]), "Orders")
+      assert has_element?(view, ~s(a[href="/admin/theme"]), "Theme")
+      assert has_element?(view, ~s(a[href="/admin/providers"]), "Providers")
+      assert has_element?(view, ~s(a[href="/admin/settings"]), "Settings")
+    end
+
+    test "highlights active nav link for current page", %{conn: conn} do
+      {:ok, view, _html} = live(conn, ~p"/admin/orders")
+
+      assert has_element?(view, ~s(a.active[href="/admin/orders"]))
+      refute has_element?(view, ~s(a.active[href="/admin/settings"]))
+    end
+
+    test "highlights correct link on different pages", %{conn: conn} do
+      {:ok, view, _html} = live(conn, ~p"/admin/settings")
+
+      assert has_element?(view, ~s(a.active[href="/admin/settings"]))
+      refute has_element?(view, ~s(a.active[href="/admin/orders"]))
+    end
+
+    test "shows user email in sidebar", %{conn: conn, user: user} do
+      {:ok, _view, html} = live(conn, ~p"/admin/orders")
+
+      assert html =~ user.email
+    end
+
+    test "shows view shop and log out links", %{conn: conn} do
+      {:ok, view, _html} = live(conn, ~p"/admin/orders")
+
+      assert has_element?(view, ~s(a[href="/"]), "View shop")
+      assert has_element?(view, ~s(a[href="/users/log-out"]), "Log out")
+    end
+  end
+
+  describe "theme editor layout" do
+    setup %{conn: conn, user: user} do
+      %{conn: log_in_user(conn, user)}
+    end
+
+    test "does not render sidebar", %{conn: conn} do
+      {:ok, _view, html} = live(conn, ~p"/admin/theme")
+
+      refute html =~ "admin-drawer"
+    end
+
+    test "shows back link to admin", %{conn: conn} do
+      {:ok, view, _html} = live(conn, ~p"/admin/theme")
+
+      assert has_element?(view, ~s(a[href="/admin/orders"]), "Admin")
+    end
+  end
+
+  describe "admin bar on shop pages" do
+    setup do
+      {:ok, _} = SimpleshopTheme.Settings.set_site_live(true)
+      :ok
+    end
+
+    test "shows admin link when logged in", %{conn: conn, user: user} do
+      conn = log_in_user(conn, user)
+      {:ok, _view, html} = live(conn, ~p"/")
+
+      assert html =~ ~s(href="/admin/orders")
+    end
+
+    test "does not show admin link when logged out", %{conn: conn} do
+      {:ok, _view, html} = live(conn, ~p"/")
+
+      refute html =~ ~s(href="/admin/orders")
+    end
+  end
+end

test/simpleshop_theme_web/live/auth/login_test.exs

@@ -9,7 +9,7 @@ defmodule SimpleshopThemeWeb.Auth.LoginTest do
       {:ok, _lv, html} = live(conn, ~p"/users/log-in")
 
       assert html =~ "Log in"
-      assert html =~ "Register"
+      assert html =~ "Sign up"
       assert html =~ "Log in with email"
     end
   end