Wrap nav in sticky LiveView to preserve sidebar state across navigation

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

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

@@ -48,27 +48,18 @@
 </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/nav.ex

@@ -24,10 +24,23 @@ defmodule LiveAdmin.Components.Nav do
           !String.match?(r.helper, ~r/(home|session)/)
       end)
 
+    open_groups =
+      case assigns[:resource] do
+        nil ->
+          socket.assigns[:open_groups] || MapSet.new()
+
+        resource ->
+          resource.__live_admin_config__()
+          |> Keyword.fetch!(:schema)
+          |> Module.split()
+          |> Enum.drop(-1)
+          |> MapSet.new()
+      end
+
     socket =
       socket
       |> assign(assigns)
-      |> assign(extra_pages: extra_pages)
+      |> assign(extra_pages: extra_pages, open_groups: open_groups)
 
     {:ok, socket}
   end
@@ -88,6 +101,7 @@ defmodule LiveAdmin.Components.Nav do
           items={@nested_resources}
           base_path={@base_path}
           current_resource={assigns[:resource]}
+          open_groups={@open_groups}
           config={@config}
         />
       </div>
@@ -133,7 +147,7 @@ defmodule LiveAdmin.Components.Nav do
             type="checkbox"
             id={"#{parent}-toggle"}
             class="nav-toggle-input"
-            checked={open?(assigns, parent)}
+            checked={MapSet.member?(@open_groups, parent)}
           />
           <label for={"#{parent}-toggle"} class="nav-toggle-label">
             <span class="nav-icon">
@@ -195,6 +209,7 @@ defmodule LiveAdmin.Components.Nav do
               items={children}
               base_path={@base_path}
               current_resource={@current_resource}
+              open_groups={@open_groups}
               config={@config}
             />
           </div>
@@ -204,18 +219,4 @@ defmodule LiveAdmin.Components.Nav do
     """
   end
 
-  defp open?(assigns, schema) do
-    assigns.current_resource
-    |> case do
-      nil ->
-        false
-
-      resource ->
-        resource.__live_admin_config__()
-        |> Keyword.fetch!(:schema)
-        |> Module.split()
-        |> Enum.drop(-1)
-        |> Enum.member?(schema)
-    end
-  end
 end

lib/live_admin/components/nav/wrapper.ex

@@ -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/router.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