jamey/simpleshop_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add admin sidebar layout with responsive drawer navigation

Browse Source 
- 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>
This commit is contained in:
jamey 2026-02-12 08:35:22 +00:00
parent deea04885f
commit 26d3bd782a
17 changed files with 756 additions and 541 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
lib/simpleshop_theme_web/admin_layout_hook.ex Normal file
View File

@ -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

36
lib/simpleshop_theme_web/components/layouts.ex
View File

@ -35,35 +35,8 @@ defmodule SimpleshopThemeWeb.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>
<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">
<main class="px-4 py-12 sm:px-6 lg:px-8">
<div class="mx-auto max-w-lg 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.

102
lib/simpleshop_theme_web/components/layouts/admin.html.heex Normal file
View File

@ -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} />

35
lib/simpleshop_theme_web/components/layouts/admin_root.html.heex Normal file
View File

@ -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>

36
lib/simpleshop_theme_web/components/layouts/root.html.heex
View File

@ -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>

11
lib/simpleshop_theme_web/components/layouts/shop.html.heex
View File

@ -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}

2
lib/simpleshop_theme_web/controllers/admin_controller.ex
View File

@ -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

2
lib/simpleshop_theme_web/live/admin/order_show.ex
View File

@ -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

2
lib/simpleshop_theme_web/live/admin/orders.ex
View File

@ -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

10
lib/simpleshop_theme_web/live/admin/providers/form.html.heex
View File

@ -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>
</Layouts.app>
</div>

10
lib/simpleshop_theme_web/live/admin/providers/index.html.heex
View File

@ -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>
</Layouts.app>
</div>

2
lib/simpleshop_theme_web/live/admin/settings.ex
View File

@ -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

9
lib/simpleshop_theme_web/live/admin/theme/index.html.heex
View File

@ -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">

42
lib/simpleshop_theme_web/router.ex
View File

@ -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

12
test/simpleshop_theme_web/controllers/user_session_controller_test.exs
View File

@ -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

91
test/simpleshop_theme_web/live/admin/layout_test.exs Normal file
View File

@ -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

2
test/simpleshop_theme_web/live/auth/login_test.exs
View File

@ -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