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

feat: add navigation and collapsible sidebar to theme editor

Browse Source 
- Add "← View Shop" link on admin/theme page for easy navigation
- Add collapsible sidebar with chevron toggle button
- Include proper ARIA attributes for accessibility (aria-label,
  aria-expanded, aria-controls)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jamey Greenwood 2026-01-19 21:37:34 +00:00
parent 8eda40f175
commit 848c4ea146
3 changed files with 78 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

6
lib/simpleshop_theme_web/live/theme_live/index.ex
View File

@ -31,6 +31,7 @@ defmodule SimpleshopThemeWeb.ThemeLive.Index do
|> assign(:logo_image, logo_image) |> assign(:logo_image, logo_image)
|> assign(:header_image, header_image) |> assign(:header_image, header_image)
|> assign(:customise_open, false) |> assign(:customise_open, false)
|> assign(:sidebar_collapsed, false)
|> allow_upload(:logo_upload, |> allow_upload(:logo_upload,
accept: ~w(.png .jpg .jpeg .webp .svg), accept: ~w(.png .jpg .jpeg .webp .svg),
max_entries: 1, max_entries: 1,
@ -280,6 +281,11 @@ defmodule SimpleshopThemeWeb.ThemeLive.Index do
{:noreply, assign(socket, :customise_open, !socket.assigns.customise_open)} {:noreply, assign(socket, :customise_open, !socket.assigns.customise_open)}
end end
@impl true
def handle_event("toggle_sidebar", _params, socket) do
{:noreply, assign(socket, :sidebar_collapsed, !socket.assigns.sidebar_collapsed)}
end
@impl true @impl true
def handle_event("noop", _params, socket) do def handle_event("noop", _params, socket) do
{:noreply, socket} {:noreply, socket}

46
lib/simpleshop_theme_web/live/theme_live/index.html.heex
View File

@ -1,11 +1,48 @@
<div class="min-h-screen bg-base-200"> <div class="min-h-screen bg-base-200">
<div class="flex flex-col lg:flex-row lg:h-screen"> <div class="flex flex-col lg:flex-row lg:h-screen">
<!-- Controls Sidebar --> <!-- Controls Sidebar -->
<div class="w-full lg:w-[380px] bg-base-100 border-r border-base-300 p-6 overflow-y-auto lg:h-screen flex-shrink-0"> <div
id="theme-sidebar"
class={[
"bg-base-100 border-r border-base-300 lg:h-screen flex-shrink-0 transition-all duration-300",
if(@sidebar_collapsed, do: "w-12 overflow-hidden", else: "w-full lg:w-[380px] overflow-y-auto p-6")
]}
>
<!-- Collapsed state: just show expand button -->
<%= if @sidebar_collapsed do %>
<div class="h-full flex items-start justify-center pt-4">
<button
type="button"
phx-click="toggle_sidebar"
class="p-2 rounded-lg hover:bg-base-200 transition-colors"
aria-label="Expand sidebar"
aria-expanded="false"
aria-controls="theme-sidebar"
>
<svg class="w-5 h-5 text-base-content/70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</button>
</div>
<% else %>
<!-- Header --> <!-- Header -->
<div class="mb-6"> <div class="mb-6 flex items-start justify-between gap-3">
<h1 class="text-xl font-semibold tracking-tight mb-2 text-base-content">Theme Studio</h1> <div class="flex-1">
<p class="text-sm text-base-content/60 leading-relaxed">One theme, infinite possibilities. Every combination is designed to work beautifully.</p> <h1 class="text-xl font-semibold tracking-tight mb-2 text-base-content">Theme Studio</h1>
<p class="text-sm text-base-content/60 leading-relaxed">One theme, infinite possibilities. Every combination is designed to work beautifully.</p>
</div>
<button
type="button"
phx-click="toggle_sidebar"
class="p-2 rounded-lg hover:bg-base-200 transition-colors flex-shrink-0 -mr-2 -mt-1"
aria-label="Collapse sidebar"
aria-expanded="true"
aria-controls="theme-sidebar"
>
<svg class="w-5 h-5 text-base-content/70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<polyline points="15 18 9 12 15 6"></polyline>
</svg>
</button>
</div> </div>
<!-- Site Name --> <!-- Site Name -->
@ -838,6 +875,7 @@
</div> </div>
<div class="text-xs text-base-content/40 mt-2">One of 100,000+ possible combinations</div> <div class="text-xs text-base-content/40 mt-2">One of 100,000+ possible combinations</div>
</div> </div>
<% end %>
</div> </div>
<!-- Preview Area --> <!-- Preview Area -->