From 957203ec7bd82e974df5e85270083c44059c6aca Mon Sep 17 00:00:00 2001
From: Joseph Doherty <dohejw01@gmail.com>
Date: Wed, 3 Jun 2026 03:31:10 -0400
Subject: [PATCH] feat(centralui): MainLayout/NavMenu delegate to
 ZB.MOM.WW.Theme ThemeShell + kit nav

---
 .../Components/Layout/MainLayout.razor        |  42 +-
 .../Components/Layout/NavMenu.razor           | 415 +++++-------------
 .../Components/Layout/NavSection.razor        |  35 --
 .../Layout/NavMenuTests.cs                    | 155 ++++---
 .../Pages/AuditLogPageScaffoldTests.cs        |  15 +-
 5 files changed, 237 insertions(+), 425 deletions(-)
 delete mode 100644 src/ZB.MOM.WW.ScadaBridge.CentralUI/Components/Layout/NavSection.razor

diff --git a/src/ZB.MOM.WW.ScadaBridge.CentralUI/Components/Layout/MainLayout.razor b/src/ZB.MOM.WW.ScadaBridge.CentralUI/Components/Layout/MainLayout.razor
index 388e2452..675eef3d 100644
--- a/src/ZB.MOM.WW.ScadaBridge.CentralUI/Components/Layout/MainLayout.razor
+++ b/src/ZB.MOM.WW.ScadaBridge.CentralUI/Components/Layout/MainLayout.razor
@@ -1,26 +1,28 @@
 @inherits LayoutComponentBase
 
-<div class="d-flex flex-column flex-lg-row" style="min-height: 100vh;">
-    @* Hamburger toggle: visible only on viewports <lg.
-       Bootstrap collapse JS lives in bootstrap.bundle.min.js (loaded in App.razor). *@
-    <button class="btn btn-outline-secondary btn-sm d-lg-none m-2 align-self-start"
-            type="button"
-            data-bs-toggle="collapse"
-            data-bs-target="#sidebar-collapse"
-            aria-controls="sidebar-collapse"
-            aria-expanded="false"
-            aria-label="Toggle navigation">
-        &#9776;
-    </button>
-
-    <div class="collapse d-lg-block" id="sidebar-collapse">
+@* The side-rail chassis (brand bar + responsive hamburger) is the shared
+   ZB.MOM.WW.Theme ThemeShell. NavMenu fills the rail's <Nav> slot with the
+   policy-gated nav groups; the session/sign-out block fills <RailFooter>. *@
+<ThemeShell Product="ScadaBridge" Accent="#2f5fd0">
+    <Nav>
         <NavMenu />
-    </div>
-
-    <main class="flex-grow-1 p-3">
-        @Body
-    </main>
-</div>
+    </Nav>
+    <RailFooter>
+        <AuthorizeView>
+            <Authorized>
+                @* CentralUI-024: claim type resolved via JwtTokenService. *@
+                <span class="rail-user">@context.User.GetDisplayName()</span>
+                <form method="post" action="/auth/logout" data-enhance="false">
+                    @* CentralUI-017: logout is a state-changing POST and is
+                       CSRF-protected — the antiforgery token is required. *@
+                    <AntiforgeryToken />
+                    <button type="submit" class="rail-btn">Sign Out</button>
+                </form>
+            </Authorized>
+        </AuthorizeView>
+    </RailFooter>
+    <ChildContent>@Body</ChildContent>
+</ThemeShell>
 
 @* Global host for IDialogService. One instance per layout renders all confirm/prompt
    dialogs raised via IDialogService.ConfirmAsync / PromptAsync. *@
diff --git a/src/ZB.MOM.WW.ScadaBridge.CentralUI/Components/Layout/NavMenu.razor b/src/ZB.MOM.WW.ScadaBridge.CentralUI/Components/Layout/NavMenu.razor
index c4a7f508..f8abf82b 100644
--- a/src/ZB.MOM.WW.ScadaBridge.CentralUI/Components/Layout/NavMenu.razor
+++ b/src/ZB.MOM.WW.ScadaBridge.CentralUI/Components/Layout/NavMenu.razor
@@ -1,324 +1,117 @@
-@using System.Linq
 @using ZB.MOM.WW.ScadaBridge.Security
 @using Microsoft.AspNetCore.Components.Routing
-@using Microsoft.JSInterop
-@implements IDisposable
-@inject NavigationManager Navigation
-@inject IJSRuntime JS
 
-<nav class="sidebar d-flex flex-column">
-    <div class="brand"><span class="mark">&#9646;</span> ScadaBridge</div>
+@* Rail navigation — rendered inside ThemeShell's <Nav> slot. The chassis
+   (brand bar + responsive hamburger) belongs to ThemeShell; this component
+   contributes only the nav items. Collapsible sections use the kit's
+   NavRailSection (<details>); their open/closed state is persisted client-side
+   by the kit's nav-state.js (localStorage, keyed by Key) — no JS interop here. *@
 
-    <div style="overflow-y:auto; flex:1 1 auto; min-height:0;">
-        <ul class="nav flex-column">
-            <li class="nav-item">
-                <NavLink class="nav-link" href="/" Match="NavLinkMatch.All">Dashboard</NavLink>
-            </li>
+<NavRailItem Href="/" Text="Dashboard" Match="NavLinkMatch.All" />
 
-            <AuthorizeView>
-                <Authorized>
-                    @* Admin section — Administrator role only *@
-                    <AuthorizeView Policy="@AuthorizationPolicies.RequireAdmin">
-                        <Authorized Context="adminContext">
-                            <NavSection Title="Admin"
-                                        Expanded="@_expanded.Contains("admin")"
-                                        OnToggle="@(() => ToggleAsync("admin"))">
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/admin/ldap-mappings">LDAP Mappings</NavLink>
-                                </li>
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/admin/sites">Sites</NavLink>
-                                </li>
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/admin/api-keys">API Keys</NavLink>
-                                </li>
-                                @* Import Bundle requires Administrator only — Designer role is not sufficient.
-                                   Export Bundle lives in the Design section (RequireDesign). *@
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/design/transport/import">Import Bundle</NavLink>
-                                </li>
-                            </NavSection>
-                        </Authorized>
-                    </AuthorizeView>
+<AuthorizeView>
+    <Authorized>
+        @* Admin section — Administrator role only *@
+        <AuthorizeView Policy="@AuthorizationPolicies.RequireAdmin">
+            <Authorized Context="adminContext">
+                <NavRailSection Title="Admin" Key="admin">
+                    <NavRailItem Href="/admin/ldap-mappings" Text="LDAP Mappings" />
+                    <NavRailItem Href="/admin/sites" Text="Sites" />
+                    <NavRailItem Href="/admin/api-keys" Text="API Keys" />
+                    @* Import Bundle requires Administrator only — Designer role is not sufficient.
+                       Export Bundle lives in the Design section (RequireDesign). *@
+                    <NavRailItem Href="/design/transport/import" Text="Import Bundle" />
+                </NavRailSection>
+            </Authorized>
+        </AuthorizeView>
 
-                    @* Design section — Designer role *@
-                    <AuthorizeView Policy="@AuthorizationPolicies.RequireDesign">
-                        <Authorized Context="designContext">
-                            <NavSection Title="Design"
-                                        Expanded="@_expanded.Contains("design")"
-                                        OnToggle="@(() => ToggleAsync("design"))">
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/design/templates">Templates</NavLink>
-                                </li>
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/design/shared-scripts">Shared Scripts</NavLink>
-                                </li>
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/design/connections">Connections</NavLink>
-                                </li>
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/design/external-systems">External Systems</NavLink>
-                                </li>
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/design/transport/export">Export Bundle</NavLink>
-                                </li>
-                            </NavSection>
-                        </Authorized>
-                    </AuthorizeView>
+        @* Design section — Designer role *@
+        <AuthorizeView Policy="@AuthorizationPolicies.RequireDesign">
+            <Authorized Context="designContext">
+                <NavRailSection Title="Design" Key="design">
+                    <NavRailItem Href="/design/templates" Text="Templates" />
+                    <NavRailItem Href="/design/shared-scripts" Text="Shared Scripts" />
+                    <NavRailItem Href="/design/connections" Text="Connections" />
+                    <NavRailItem Href="/design/external-systems" Text="External Systems" />
+                    <NavRailItem Href="/design/transport/export" Text="Export Bundle" />
+                </NavRailSection>
+            </Authorized>
+        </AuthorizeView>
 
-                    @* Deployment section — Deployer role *@
-                    <AuthorizeView Policy="@AuthorizationPolicies.RequireDeployment">
-                        <Authorized Context="deploymentContext">
-                            <NavSection Title="Deployment"
-                                        Expanded="@_expanded.Contains("deployment")"
-                                        OnToggle="@(() => ToggleAsync("deployment"))">
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/deployment/topology">Topology</NavLink>
-                                </li>
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/deployment/deployments">Deployments</NavLink>
-                                </li>
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/deployment/debug-view">Debug View</NavLink>
-                                </li>
-                            </NavSection>
-                        </Authorized>
-                    </AuthorizeView>
+        @* Deployment section — Deployer role *@
+        <AuthorizeView Policy="@AuthorizationPolicies.RequireDeployment">
+            <Authorized Context="deploymentContext">
+                <NavRailSection Title="Deployment" Key="deployment">
+                    <NavRailItem Href="/deployment/topology" Text="Topology" />
+                    <NavRailItem Href="/deployment/deployments" Text="Deployments" />
+                    <NavRailItem Href="/deployment/debug-view" Text="Debug View" />
+                </NavRailSection>
+            </Authorized>
+        </AuthorizeView>
 
-                    @* Notifications — mixed-role section; each item gated by its own policy.
-                       The section is ungated: every authenticated user holds at least one of
-                       Admin/Design/Deployment, so it always has a visible child. *@
-                    <NavSection Title="Notifications"
-                                Expanded="@_expanded.Contains("notifications")"
-                                OnToggle="@(() => ToggleAsync("notifications"))">
-                        <AuthorizeView Policy="@AuthorizationPolicies.RequireAdmin">
-                            <Authorized Context="notifAdminContext">
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/notifications/smtp">SMTP Configuration</NavLink>
-                                </li>
-                            </Authorized>
-                        </AuthorizeView>
-                        <AuthorizeView Policy="@AuthorizationPolicies.RequireDesign">
-                            <Authorized Context="notifDesignContext">
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/notifications/lists">Notification Lists</NavLink>
-                                </li>
-                            </Authorized>
-                        </AuthorizeView>
-                        <AuthorizeView Policy="@AuthorizationPolicies.RequireDeployment">
-                            <Authorized Context="notifDeploymentContext">
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/notifications/report">Notification Report</NavLink>
-                                </li>
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/notifications/kpis">Notification KPIs</NavLink>
-                                </li>
-                            </Authorized>
-                        </AuthorizeView>
-                    </NavSection>
-
-                    @* Site Calls — Site Call Audit (#22). Deployer-role only,
-                       matching the Notification Report page's gate; the whole
-                       section sits inside the policy block so a non-Deployer
-                       user does not see the heading. *@
-                    <AuthorizeView Policy="@AuthorizationPolicies.RequireDeployment">
-                        <Authorized Context="siteCallsContext">
-                            <NavSection Title="Site Calls"
-                                        Expanded="@_expanded.Contains("sitecalls")"
-                                        OnToggle="@(() => ToggleAsync("sitecalls"))">
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/site-calls/report">Site Calls</NavLink>
-                                </li>
-                            </NavSection>
-                        </Authorized>
-                    </AuthorizeView>
-
-                    @* Monitoring — Health Dashboard is all-roles; Event Logs and
-                       Parked Messages are Deployer-role only (Component-CentralUI).
-                       The section is ungated because Health Dashboard is always
-                       a visible child. *@
-                    <NavSection Title="Monitoring"
-                                Expanded="@_expanded.Contains("monitoring")"
-                                OnToggle="@(() => ToggleAsync("monitoring"))">
-                        <li class="nav-item">
-                            <NavLink class="nav-link" href="/monitoring/health">Health Dashboard</NavLink>
-                        </li>
-                        <AuthorizeView Policy="@AuthorizationPolicies.RequireDeployment">
-                            <Authorized Context="monitoringContext">
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/monitoring/event-logs">Event Logs</NavLink>
-                                </li>
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/monitoring/parked-messages">Parked Messages</NavLink>
-                                </li>
-                            </Authorized>
-                        </AuthorizeView>
-                    </NavSection>
-
-                    @* Audit — gated on the OperationalAudit policy (#23 M7-T15
-                       / Bundle G). Hosts the Audit Log page (#23 M7) and the
-                       Configuration Audit Log (IAuditService config-change
-                       viewer). The whole section sits inside the policy block:
-                       a non-audit user does not even see the heading.
-                       OperationalAudit is satisfied by the Administrator and
-                       Viewer roles (post-Task-1.7 canonical collapse: former
-                       Audit→Administrator, AuditReadOnly→Viewer). *@
-                    <AuthorizeView Policy="@AuthorizationPolicies.OperationalAudit">
-                        <Authorized Context="auditContext">
-                            <NavSection Title="Audit"
-                                        Expanded="@_expanded.Contains("audit")"
-                                        OnToggle="@(() => ToggleAsync("audit"))">
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/audit/log">Audit Log</NavLink>
-                                </li>
-                                <li class="nav-item">
-                                    <NavLink class="nav-link" href="/audit/configuration">Configuration Audit Log</NavLink>
-                                </li>
-                            </NavSection>
-                        </Authorized>
-                    </AuthorizeView>
+        @* Notifications — mixed-role section; each item gated by its own policy.
+           The section is ungated: every authenticated user holds at least one of
+           Admin/Design/Deployment, so it always has a visible child. *@
+        <NavRailSection Title="Notifications" Key="notifications">
+            <AuthorizeView Policy="@AuthorizationPolicies.RequireAdmin">
+                <Authorized Context="notifAdminContext">
+                    <NavRailItem Href="/notifications/smtp" Text="SMTP Configuration" />
                 </Authorized>
             </AuthorizeView>
-        </ul>
-    </div>
+            <AuthorizeView Policy="@AuthorizationPolicies.RequireDesign">
+                <Authorized Context="notifDesignContext">
+                    <NavRailItem Href="/notifications/lists" Text="Notification Lists" />
+                </Authorized>
+            </AuthorizeView>
+            <AuthorizeView Policy="@AuthorizationPolicies.RequireDeployment">
+                <Authorized Context="notifDeploymentContext">
+                    <NavRailItem Href="/notifications/report" Text="Notification Report" />
+                    <NavRailItem Href="/notifications/kpis" Text="Notification KPIs" />
+                </Authorized>
+            </AuthorizeView>
+        </NavRailSection>
 
-    <AuthorizeView>
-        <Authorized>
-            <div class="border-top px-3 py-2">
-                <div class="d-flex justify-content-between align-items-center">
-                    @* CentralUI-024: claim type resolved via JwtTokenService. *@
-                    <span class="text-body-secondary small">@context.User.GetDisplayName()</span>
-                    <form method="post" action="/auth/logout" data-enhance="false">
-                        @* CentralUI-017: logout is a state-changing POST and is
-                           CSRF-protected — the antiforgery token is required. *@
-                        <AntiforgeryToken />
-                        <button type="submit" class="btn btn-outline-secondary btn-sm py-0 px-2">Sign Out</button>
-                    </form>
-                </div>
-            </div>
-        </Authorized>
-    </AuthorizeView>
-</nav>
+        @* Site Calls — Site Call Audit (#22). Deployer-role only,
+           matching the Notification Report page's gate; the whole
+           section sits inside the policy block so a non-Deployer
+           user does not see the heading. *@
+        <AuthorizeView Policy="@AuthorizationPolicies.RequireDeployment">
+            <Authorized Context="siteCallsContext">
+                <NavRailSection Title="Site Calls" Key="sitecalls">
+                    <NavRailItem Href="/site-calls/report" Text="Site Calls" />
+                </NavRailSection>
+            </Authorized>
+        </AuthorizeView>
 
-@code {
-    // Expanded-section state persists in the "scadabridge_nav" cookie, written
-    // by navState.set / read by navState.get (wwwroot/js/nav-state.js) — a
-    // comma-separated list of section ids.
+        @* Monitoring — Health Dashboard is all-roles; Event Logs and
+           Parked Messages are Deployer-role only (Component-CentralUI).
+           The section is ungated because Health Dashboard is always
+           a visible child. *@
+        <NavRailSection Title="Monitoring" Key="monitoring">
+            <NavRailItem Href="/monitoring/health" Text="Health Dashboard" />
+            <AuthorizeView Policy="@AuthorizationPolicies.RequireDeployment">
+                <Authorized Context="monitoringContext">
+                    <NavRailItem Href="/monitoring/event-logs" Text="Event Logs" />
+                    <NavRailItem Href="/monitoring/parked-messages" Text="Parked Messages" />
+                </Authorized>
+            </AuthorizeView>
+        </NavRailSection>
 
-    // Every collapsible section id. Also the allow-list for parsing the cookie.
-    private static readonly string[] SectionIds =
-        { "admin", "design", "deployment", "notifications", "sitecalls", "monitoring", "audit" };
-
-    // The currently-expanded sections. Populated from the cookie on first
-    // render; mutated by ToggleAsync and by navigating into a section.
-    private readonly HashSet<string> _expanded = new(StringComparer.Ordinal);
-
-    protected override void OnInitialized()
-    {
-        Navigation.LocationChanged += OnLocationChanged;
-    }
-
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        if (!firstRender)
-        {
-            return;
-        }
-
-        // Hydrate from the cookie. Until this completes the sidebar paints
-        // collapsed (the "collapsed by default" state) — matching how TreeView
-        // hydrates its expand state in OnAfterRenderAsync(firstRender).
-        string saved;
-        try
-        {
-            saved = await JS.InvokeAsync<string>("navState.get") ?? string.Empty;
-        }
-        catch (JSDisconnectedException)
-        {
-            return;
-        }
-
-        foreach (var id in saved.Split(
-            ',', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries))
-        {
-            if (Array.IndexOf(SectionIds, id) >= 0)
-            {
-                _expanded.Add(id);
-            }
-        }
-
-        // The section of the page we loaded on is always expanded.
-        if (EnsureCurrentSectionExpanded())
-        {
-            await PersistAsync();
-        }
-
-        StateHasChanged();
-    }
-
-    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
-    {
-        // Navigating into a collapsed section expands it (and remembers it).
-        if (EnsureCurrentSectionExpanded())
-        {
-            _ = PersistAsync();
-            _ = InvokeAsync(StateHasChanged);
-        }
-    }
-
-    private async Task ToggleAsync(string id)
-    {
-        if (!_expanded.Remove(id))
-        {
-            _expanded.Add(id);
-        }
-
-        await PersistAsync();
-    }
-
-    // Adds the current page's section to _expanded; returns true if it changed.
-    private bool EnsureCurrentSectionExpanded()
-    {
-        var section = CurrentSection();
-        return section is not null && _expanded.Add(section);
-    }
-
-    // Maps the current URL's first path segment to a section id, or null for
-    // sectionless pages (Dashboard, Login).
-    private string? CurrentSection()
-    {
-        var relative = Navigation.ToBaseRelativePath(Navigation.Uri);
-        var firstSegment = relative.Split('?', '#')[0]
-            .Split('/', StringSplitOptions.RemoveEmptyEntries)
-            .FirstOrDefault();
-
-        return firstSegment switch
-        {
-            "admin" => "admin",
-            "design" => "design",
-            "deployment" => "deployment",
-            "notifications" => "notifications",
-            "site-calls" => "sitecalls",
-            "monitoring" => "monitoring",
-            "audit" => "audit",
-            _ => null,
-        };
-    }
-
-    private async Task PersistAsync()
-    {
-        try
-        {
-            await JS.InvokeVoidAsync("navState.set", string.Join(',', _expanded));
-        }
-        catch (JSDisconnectedException)
-        {
-            // The circuit is gone — nothing to persist to.
-        }
-    }
-
-    public void Dispose()
-    {
-        Navigation.LocationChanged -= OnLocationChanged;
-    }
-}
+        @* Audit — gated on the OperationalAudit policy (#23 M7-T15
+           / Bundle G). Hosts the Audit Log page (#23 M7) and the
+           Configuration Audit Log (IAuditService config-change
+           viewer). The whole section sits inside the policy block:
+           a non-audit user does not even see the heading.
+           OperationalAudit is satisfied by the Administrator and
+           Viewer roles (post-Task-1.7 canonical collapse: former
+           Audit→Administrator, AuditReadOnly→Viewer). *@
+        <AuthorizeView Policy="@AuthorizationPolicies.OperationalAudit">
+            <Authorized Context="auditContext">
+                <NavRailSection Title="Audit" Key="audit">
+                    <NavRailItem Href="/audit/log" Text="Audit Log" />
+                    <NavRailItem Href="/audit/configuration" Text="Configuration Audit Log" />
+                </NavRailSection>
+            </Authorized>
+        </AuthorizeView>
+    </Authorized>
+</AuthorizeView>
diff --git a/src/ZB.MOM.WW.ScadaBridge.CentralUI/Components/Layout/NavSection.razor b/src/ZB.MOM.WW.ScadaBridge.CentralUI/Components/Layout/NavSection.razor
deleted file mode 100644
index e1832582..00000000
--- a/src/ZB.MOM.WW.ScadaBridge.CentralUI/Components/Layout/NavSection.razor
+++ /dev/null
@@ -1,35 +0,0 @@
-@* A collapsible sidebar nav section: an uppercase-eyebrow header button that
-   toggles the visibility of its child nav items. The header <li> and the item
-   <li>s (ChildContent) render as siblings inside NavMenu's <ul>. *@
-
-<li class="nav-item">
-    <button type="button"
-            class="nav-section-toggle"
-            @onclick="OnToggle"
-            aria-expanded="@(Expanded ? "true" : "false")">
-        <i class="bi @(Expanded ? "bi-chevron-down" : "bi-chevron-right")" aria-hidden="true"></i>
-        <span>@Title</span>
-    </button>
-</li>
-@if (Expanded)
-{
-    @ChildContent
-}
-
-@code {
-    /// <summary>Section label shown in the header (e.g. "Deployment").</summary>
-    [Parameter, EditorRequired]
-    public string Title { get; set; } = string.Empty;
-
-    /// <summary>Whether the section is expanded — its items rendered.</summary>
-    [Parameter]
-    public bool Expanded { get; set; }
-
-    /// <summary>Raised when the header button is clicked.</summary>
-    [Parameter]
-    public EventCallback OnToggle { get; set; }
-
-    /// <summary>The section's nav items, rendered only while expanded.</summary>
-    [Parameter]
-    public RenderFragment? ChildContent { get; set; }
-}
diff --git a/tests/ZB.MOM.WW.ScadaBridge.CentralUI.Tests/Layout/NavMenuTests.cs b/tests/ZB.MOM.WW.ScadaBridge.CentralUI.Tests/Layout/NavMenuTests.cs
index c3c80f5c..f1adf124 100644
--- a/tests/ZB.MOM.WW.ScadaBridge.CentralUI.Tests/Layout/NavMenuTests.cs
+++ b/tests/ZB.MOM.WW.ScadaBridge.CentralUI.Tests/Layout/NavMenuTests.cs
@@ -11,26 +11,21 @@ using NavMenu = ZB.MOM.WW.ScadaBridge.CentralUI.Components.Layout.NavMenu;
 namespace ZB.MOM.WW.ScadaBridge.CentralUI.Tests.Layout;
 
 /// <summary>
-/// bUnit rendering tests for the sidebar <see cref="NavMenu"/>. They verify the
-/// collapsible section behaviour (sections collapsed by default, a toggle
-/// reveals a section's items and persists state to a cookie) and that the
-/// Notifications section's items are gated per-policy. The
-/// <c>AuthorizeView Policy=...</c> blocks evaluate the real policies, which
-/// require a claim of type <see cref="JwtTokenService.RoleClaimType"/> (the
-/// canonical <c>ZbClaimTypes.Role</c> framework URI), so the test principal
-/// carries claims of that exact type.
+/// bUnit rendering tests for the rail <see cref="NavMenu"/>. After the
+/// ZB.MOM.WW.Theme adoption (Task 2.4) the nav is composed of the kit's
+/// <c>NavRailSection</c> (a native <c>&lt;details&gt;</c> disclosure, expanded
+/// by default — no JS interop, works in static SSR) and <c>NavRailItem</c>
+/// links. These tests verify the structure (sections render as
+/// <c>details.rail-section</c>, not the old <c>button.nav-section-toggle</c>)
+/// and — the load-bearing security behaviour — that each section's items are
+/// gated by the correct authorization policy. The <c>AuthorizeView Policy=...</c>
+/// blocks evaluate the real policies, which require a claim of type
+/// <see cref="JwtTokenService.RoleClaimType"/> (the canonical
+/// <c>ZbClaimTypes.Role</c> framework URI), so the test principal carries
+/// claims of that exact type.
 /// </summary>
 public class NavMenuTests : BunitContext
 {
-    public NavMenuTests()
-    {
-        // NavMenu reads the nav-collapse cookie via the navState.get JS interop
-        // call in OnAfterRenderAsync and writes it via navState.set on toggle.
-        // Loose mode lets navState.get no-op (returns null) so the sidebar
-        // renders collapsed, and still records navState.set invocations.
-        JSInterop.Mode = JSRuntimeMode.Loose;
-    }
-
     /// <summary>
     /// Renders <see cref="NavMenu"/> under a principal holding the given roles.
     /// <see cref="NavMenu"/>'s top-level <c>AuthorizeView</c> requires the
@@ -44,7 +39,22 @@ public class NavMenuTests : BunitContext
         var claims = new List<Claim> { new(JwtTokenService.UsernameClaimType, "tester") };
         claims.AddRange(roles.Select(r => new Claim(JwtTokenService.RoleClaimType, r)));
 
+        // "TestAuth" authentication type → IsAuthenticated == true.
         var user = new ClaimsPrincipal(new ClaimsIdentity(claims, "TestAuth"));
+        return RenderWithPrincipal(user);
+    }
+
+    /// <summary>
+    /// Renders <see cref="NavMenu"/> with an anonymous (unauthenticated)
+    /// principal — a bare <see cref="ClaimsIdentity"/> with no authentication
+    /// type, so <c>IsAuthenticated == false</c> and every <c>AuthorizeView</c>
+    /// renders its (empty) <c>NotAuthorized</c>/fallthrough branch.
+    /// </summary>
+    private IRenderedComponent<NavMenu> RenderAnonymous()
+        => RenderWithPrincipal(new ClaimsPrincipal(new ClaimsIdentity()));
+
+    private IRenderedComponent<NavMenu> RenderWithPrincipal(ClaimsPrincipal user)
+    {
         Services.AddSingleton<AuthenticationStateProvider>(new TestAuthStateProvider(user));
         Services.AddAuthorizationCore();
         AuthorizationPolicies.AddScadaBridgeAuthorization(Services);
@@ -63,62 +73,46 @@ public class NavMenuTests : BunitContext
         return host.FindComponent<NavMenu>();
     }
 
-    /// <summary>
-    /// Clicks the collapsible section header whose title matches, expanding it.
-    /// </summary>
-    private static void ExpandSection(IRenderedComponent<NavMenu> cut, string title)
-    {
-        var toggle = cut.FindAll("button.nav-section-toggle")
-            .Single(b => b.TextContent.Contains(title, StringComparison.Ordinal));
-        toggle.Click();
-    }
-
     [Fact]
-    public void Sections_AreCollapsedByDefault()
+    public void Sections_RenderAsKitDetailsDisclosures_ExpandedByDefault()
     {
         var cut = RenderWithRoles("Administrator", "Designer", "Deployer");
 
         cut.WaitForAssertion(() =>
         {
-            // Section headers render unconditionally...
+            // Kit nav: sections are <details class="rail-section"> disclosures,
+            // NOT the old interactive button.nav-section-toggle.
+            Assert.Empty(cut.FindAll("button.nav-section-toggle"));
+            Assert.NotEmpty(cut.FindAll("details.rail-section"));
+
+            // Section eyebrows still render their titles.
             Assert.Contains(">Notifications<", cut.Markup);
             Assert.Contains(">Deployment<", cut.Markup);
-            // ...but their items stay out of the DOM until the section opens.
-            Assert.DoesNotContain("/notifications/smtp", cut.Markup);
-            Assert.DoesNotContain("/deployment/topology", cut.Markup);
+
+            // The kit's NavRailSection defaults to open, so items are in the DOM
+            // without any toggle/JS — this is the static-SSR-friendly behaviour.
+            Assert.Contains("/notifications/smtp", cut.Markup);
+            Assert.Contains("/deployment/topology", cut.Markup);
         });
     }
 
     [Fact]
-    public void TogglingSection_RevealsItsItems()
-    {
-        var cut = RenderWithRoles("Deployer");
-        Assert.DoesNotContain("/deployment/topology", cut.Markup);
-
-        ExpandSection(cut, "Deployment");
-
-        Assert.Contains("/deployment/topology", cut.Markup);
-        Assert.Contains("/deployment/deployments", cut.Markup);
-        Assert.Contains("/deployment/debug-view", cut.Markup);
-    }
-
-    [Fact]
-    public void TogglingSection_PersistsStateToCookie()
+    public void DeploymentSection_RendersAllItems_ForDeployer()
     {
         var cut = RenderWithRoles("Deployer");
 
-        ExpandSection(cut, "Deployment");
-
-        // Expanding wrote the cookie through the navState.set JS interop call.
-        var invocation = JSInterop.Invocations.Last(i => i.Identifier == "navState.set");
-        Assert.Equal("deployment", invocation.Arguments[0]);
+        cut.WaitForAssertion(() =>
+        {
+            Assert.Contains("/deployment/topology", cut.Markup);
+            Assert.Contains("/deployment/deployments", cut.Markup);
+            Assert.Contains("/deployment/debug-view", cut.Markup);
+        });
     }
 
     [Fact]
     public void NotificationsSection_ShowsAllItems_ForMultiRoleUser()
     {
         var cut = RenderWithRoles("Administrator", "Designer", "Deployer");
-        ExpandSection(cut, "Notifications");
 
         cut.WaitForAssertion(() =>
         {
@@ -134,7 +128,6 @@ public class NavMenuTests : BunitContext
     public void NotificationsSection_AdminOnlyUser_SeesOnlySmtp()
     {
         var cut = RenderWithRoles("Administrator");
-        ExpandSection(cut, "Notifications");
 
         cut.WaitForAssertion(() =>
         {
@@ -156,4 +149,60 @@ public class NavMenuTests : BunitContext
             Assert.DoesNotContain("/monitoring/notification-outbox", cut.Markup);
         });
     }
+
+    // ── AuthorizeView-gated SECTION visibility (the GAPS open question) ──────
+    // A whole NavRailSection wrapped in <AuthorizeView Policy="..."> must SHOW
+    // (heading + items) for an authorized principal and be entirely ABSENT for
+    // an unauthorized/anonymous one. The Audit section (OperationalAudit policy)
+    // is the witness — its heading lives inside the policy block, so a denied
+    // user must not even see the eyebrow.
+
+    [Fact]
+    public void PolicyGatedSection_IsVisible_ForAuthorizedPrincipal()
+    {
+        // OperationalAudit is satisfied by the Administrator role.
+        var cut = RenderWithRoles("Administrator");
+
+        cut.WaitForAssertion(() =>
+        {
+            Assert.Contains(">Audit<", cut.Markup);          // section heading present
+            Assert.Contains("/audit/log", cut.Markup);        // gated items present
+            Assert.Contains("/audit/configuration", cut.Markup);
+        });
+    }
+
+    [Fact]
+    public void PolicyGatedSection_IsAbsent_ForUnauthorizedPrincipal()
+    {
+        // Designer satisfies RequireDesign but NOT OperationalAudit.
+        var cut = RenderWithRoles("Designer");
+
+        cut.WaitForAssertion(() =>
+        {
+            Assert.DoesNotContain(">Audit<", cut.Markup);     // heading hidden, not just items
+            Assert.DoesNotContain("/audit/log", cut.Markup);
+            Assert.DoesNotContain("/audit/configuration", cut.Markup);
+        });
+    }
+
+    [Fact]
+    public void PolicyGatedSections_AllAbsent_ForAnonymousPrincipal()
+    {
+        var cut = RenderAnonymous();
+
+        cut.WaitForAssertion(() =>
+        {
+            // The Dashboard link is always-visible (outside every AuthorizeView)...
+            Assert.Contains("Dashboard", cut.Markup);
+            // ...but no policy-gated section or its items leak to an anonymous user.
+            Assert.DoesNotContain(">Admin<", cut.Markup);
+            Assert.DoesNotContain(">Design<", cut.Markup);
+            Assert.DoesNotContain(">Deployment<", cut.Markup);
+            Assert.DoesNotContain(">Notifications<", cut.Markup);
+            Assert.DoesNotContain(">Audit<", cut.Markup);
+            Assert.DoesNotContain("/admin/sites", cut.Markup);
+            Assert.DoesNotContain("/design/templates", cut.Markup);
+            Assert.DoesNotContain("/audit/log", cut.Markup);
+        });
+    }
 }
diff --git a/tests/ZB.MOM.WW.ScadaBridge.CentralUI.Tests/Pages/AuditLogPageScaffoldTests.cs b/tests/ZB.MOM.WW.ScadaBridge.CentralUI.Tests/Pages/AuditLogPageScaffoldTests.cs
index 79858b73..5bd7c756 100644
--- a/tests/ZB.MOM.WW.ScadaBridge.CentralUI.Tests/Pages/AuditLogPageScaffoldTests.cs
+++ b/tests/ZB.MOM.WW.ScadaBridge.CentralUI.Tests/Pages/AuditLogPageScaffoldTests.cs
@@ -103,15 +103,18 @@ public class AuditLogPageScaffoldTests : BunitContext
     }
 
     /// <summary>
-    /// Clicks the collapsible section header whose title matches, expanding it.
-    /// Nav sections are collapsed by default, so a section's items are only in
-    /// the DOM once expanded.
+    /// Asserts the named rail section is present. After the ZB.MOM.WW.Theme
+    /// adoption (Task 2.4) nav sections are the kit's <c>NavRailSection</c> —
+    /// native <c>&lt;details class="rail-section"&gt;</c> disclosures that are
+    /// open by default, so a section's items are already in the DOM (no click
+    /// needed, no JS). This helper just confirms the section's
+    /// <c>summary.rail-eyebrow-toggle</c> eyebrow exists for the given title.
     /// </summary>
     private static void ExpandNavSection(IRenderedComponent<NavMenu> cut, string title)
     {
-        var toggle = cut.FindAll("button.nav-section-toggle")
-            .Single(b => b.TextContent.Contains(title, StringComparison.Ordinal));
-        toggle.Click();
+        Assert.Contains(
+            cut.FindAll("details.rail-section > summary.rail-eyebrow-toggle"),
+            s => s.TextContent.Contains(title, StringComparison.Ordinal));
     }
 
     [Fact]