feat: add navigation and collapsible sidebar to theme editor

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

lib/simpleshop_theme_web/live/theme_live/index.ex

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

lib/simpleshop_theme_web/live/theme_live/index.html.heex

@@ -1,11 +1,48 @@
 <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">
-        <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 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 -->
@@ -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 -->