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

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

@ -34,7 +34,13 @@
</script>
</head>
<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">
<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}
@ -57,6 +63,7 @@
</li>
<% end %>
</ul>
</nav>
{@inner_content}
</body>
</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(:header_image, header_image)
|> assign(:customise_open, false)
|> assign(:sidebar_collapsed, false)
|> allow_upload(:logo_upload,
accept: ~w(.png .jpg .jpeg .webp .svg),
max_entries: 1,
@ -280,6 +281,11 @@ defmodule SimpleshopThemeWeb.ThemeLive.Index do
{:noreply, assign(socket, :customise_open, !socket.assigns.customise_open)}
end
@impl true
def handle_event("toggle_sidebar", _params, socket) do
{:noreply, assign(socket, :sidebar_collapsed, !socket.assigns.sidebar_collapsed)}
end
@impl true
def handle_event("noop", _params, socket) do
{:noreply, socket}

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

@ -1,12 +1,49 @@
<div class="min-h-screen bg-base-200">
<div class="flex flex-col lg:flex-row lg:h-screen">
<!-- 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 -->
<div class="mb-6">
<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">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>
<!-- Site Name -->
<div class="mb-6">
@ -838,6 +875,7 @@
</div>
<div class="text-xs text-base-content/40 mt-2">One of 100,000+ possible combinations</div>
</div>
<% end %>
</div>
<!-- Preview Area -->