Wrap nav in sticky LiveView to preserve sidebar state across navigation

- Add Nav.Wrapper sticky LiveView that hosts the nav LiveComponent
  and Jobs LiveView, preserving DOM state across navigate events
- Broadcast URI via attach_hook on handle_params so the sticky nav
  can update active link highlighting via PubSub
- Update CSS selectors from sibling (~) to :has() since the sidebar
  toggle checkbox now lives inside the sticky wrapper

Author: tfwright

assets/css/layout.css

@@ -62,7 +62,7 @@
     transition: margin-left 0.2s, max-width 0.2s;
 }
 
-.sidebar-toggle-input:not(:checked) ~ .main-layout .content {
+.main-layout:has(.sidebar-toggle-input:not(:checked)) .content {
     margin-left: 0;
     max-width: 100vw;
 }
@@ -73,7 +73,7 @@
         max-width: calc(100vw - 300px);
     }
 
-    .sidebar-toggle-input:not(:checked) ~ .main-layout .content {
+    .main-layout:has(.sidebar-toggle-input:not(:checked)) .content {
         margin-left: 0;
         max-width: 100vw;
     }
@@ -85,7 +85,7 @@
         max-width: calc(100vw - 200px);
     }
 
-    .sidebar-toggle-input:not(:checked) ~ .main-layout .content {
+    .main-layout:has(.sidebar-toggle-input:not(:checked)) .content {
         margin-left: 0;
         max-width: 100vw;
     }

assets/css/sidebar.css

@@ -28,7 +28,7 @@
     transition: transform 0.2s;
 }
 
-.sidebar-toggle-input:not(:checked) ~ .main-layout .sidebar-toggle-label svg {
+.sidebar:has(.sidebar-toggle-input:not(:checked)) .sidebar-toggle-label svg {
     transform: rotate(180deg);
 }
 
@@ -54,13 +54,13 @@
     position: relative;
 }
 
-.sidebar-toggle-input:not(:checked) ~ .main-layout .sidebar {
+.sidebar:has(.sidebar-toggle-input:not(:checked)) {
     min-width: 0;
     max-width: 0;
     border-right: none;
 }
 
-.sidebar-toggle-input:not(:checked) ~ .main-layout .sidebar-content {
+.sidebar:has(.sidebar-toggle-input:not(:checked)) .sidebar-content {
     overflow: hidden;
 }
 

dist/css/app.css

@@ -48,27 +48,17 @@
 </header>
 
 <!-- Main Layout -->
-<input type="checkbox" id="sidebar-toggle" class="sidebar-toggle-input" checked>
 <div class="main-layout">
   <aside class="sidebar">
     <div class="sidebar-content">
-      <.live_component
-        id="nav"
-        module={get_in(@config, [:components, :nav])}
-        title={Keyword.fetch!(@config, :title)}
-        base_path={@base_path}
-        resources={@resources}
-        resource={assigns[:resource]}
-        current_view={@socket.view}
-        prefix={assigns[:prefix]}
-        key={assigns[:key]}
-        config={@config}
-        session={@session}
-      />
-      {live_render(@socket, LiveAdmin.Components.Nav.Jobs,
+      {live_render(@socket, LiveAdmin.Components.Nav.Wrapper,
         sticky: true,
-        id: "jobs",
-        session: %{"session_id" => @session.id}
+        id: "nav",
+        session: %{
+          "session_id" => @session.id,
+          "base_path" => @base_path,
+          "opts" => @config
+        }
       )}
     </div>
     <label for="sidebar-toggle" class="sidebar-toggle-label">

lib/live_admin/components/layout/app.html.heex

@@ -0,0 +1,81 @@
+defmodule LiveAdmin.Components.Nav.Wrapper do
+  use Phoenix.LiveView
+
+  @impl true
+  def mount(
+        _params,
+        %{"session_id" => session_id, "base_path" => base_path, "opts" => opts},
+        socket
+      ) do
+    if connected?(socket) do
+      :ok = LiveAdmin.PubSub.subscribe(session_id)
+    end
+
+    session = LiveAdmin.session_store().load!(session_id)
+    resources = LiveAdmin.resources(socket.router, base_path)
+    nav_module = get_in(opts, [:components, :nav])
+
+    socket =
+      assign(socket,
+        session: session,
+        base_path: base_path,
+        resources: resources,
+        config: opts,
+        nav_module: nav_module,
+        title: Keyword.fetch!(opts, :title),
+        resource: nil,
+        current_view: nil,
+        prefix: nil,
+        key: nil
+      )
+
+    {:ok, socket, layout: false}
+  end
+
+  @impl true
+  def handle_info({:nav, %{uri: uri}}, socket) do
+    %URI{host: host, path: path} = URI.parse(uri)
+
+    route_info = Phoenix.Router.route_info(socket.router, "GET", path, host)
+
+    {resource, key} =
+      case route_info do
+        %{resource: {key, mod}} -> {mod, key}
+        _ -> {nil, nil}
+      end
+
+    {current_view, _, _, _} = route_info.phoenix_live_view
+
+    {:noreply, assign(socket, resource: resource, key: key, current_view: current_view)}
+  end
+
+  @impl true
+  def handle_info(_msg, socket), do: {:noreply, socket}
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div>
+      <input type="checkbox" id="sidebar-toggle" class="sidebar-toggle-input" checked>
+      <.live_component
+        id="nav"
+        module={@nav_module}
+        title={@title}
+        base_path={@base_path}
+        resources={@resources}
+        resource={@resource}
+        current_view={@current_view}
+        prefix={@prefix}
+        key={@key}
+        config={@config}
+        session={@session}
+      />
+      {live_render(@socket, LiveAdmin.Components.Nav.Jobs,
+        sticky: true,
+        id: "jobs",
+        session: %{"session_id" => @session.id}
+      )}
+    </div>
+    """
+  end
+end

lib/live_admin/components/nav/wrapper.ex

@@ -1,5 +1,6 @@
 defmodule LiveAdmin.Router do
   import Phoenix.Component, only: [assign: 2]
+  import Phoenix.LiveView, only: [attach_hook: 4]
 
   @doc """
   Defines a group of LiveAdmin resources that share a common path prefix, and optionally, configuration.
@@ -155,6 +156,12 @@ defmodule LiveAdmin.Router do
         _ -> socket
       end
 
+    socket =
+      attach_hook(socket, :nav_uri, :handle_params, fn _params, uri, socket ->
+        LiveAdmin.PubSub.broadcast(session_id, {:nav, %{uri: uri}})
+        {:cont, socket}
+      end)
+
     {:cont, socket}
   end