feat: nav-suite : sidebar layout variant + search dialog + mobile bar

examples/ShellDocs.Preview/Components/Pages/DocsPage.razor

@@ -20,7 +20,7 @@ else
     <div class="doc-not-found">
         <h1>Page not found</h1>
         <p>The page <code>@Path</code> doesn't exist yet.</p>
-        <p><a href="/docs/introduction">← Back to introduction</a></p>
+        <p><a href="/docs/introduction"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle;margin-right:0.35rem"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>Back to introduction</a></p>
     </div>
 }
 

examples/ShellDocs.Preview/Components/Pages/Home.razor

@@ -196,7 +196,10 @@ Works in Server, WASM, and static output.
         <h2>Built by the ShellUI team.</h2>
         <p>Same taste, same craftsmanship, same install-and-go DX. Free forever, MIT-licensed, community-driven.</p>
         <div class="hero-actions">
-            <a class="btn primary" href="/docs/introduction">Read the docs <span>→</span></a>
+            <a class="btn primary" href="/docs/introduction">
+                <span>Read the docs</span>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+            </a>
             <a class="btn ghost" href="https://github.com/shellui-dev/shelldocs" target="_blank" rel="noopener">Contribute on GitHub</a>
         </div>
     </div>
@@ -328,16 +331,18 @@ Works in Server, WASM, and static output.
     .btn {
         display: inline-flex;
         align-items: center;
-        gap: 0.5rem;
-        padding: 0.65rem 1.25rem;
+        gap: 0.4rem;
+        padding: 0.6rem 1.15rem;
         border-radius: 9999px;
         border: 1px solid transparent;
         text-decoration: none;
         font-weight: 500;
         font-size: 0.9rem;
         letter-spacing: -0.005em;
+        white-space: nowrap;
         transition: background 150ms, border-color 150ms, color 150ms;
     }
+    .btn svg { width: 0.9rem; height: 0.9rem; flex-shrink: 0; }
     .btn.primary {
         background: var(--primary);
         color: var(--primary-foreground);

examples/ShellDocs.Preview/Components/Pages/Showcase.razor

@@ -45,7 +45,10 @@
     <div class="show-cta">
         <h2>Ship your docs on ShellDocs?</h2>
         <p>Open a PR to get listed here. Include a screenshot, a one-line description, and your live URL.</p>
-        <a class="btn primary" href="https://github.com/shellui-dev/shelldocs" target="_blank" rel="noopener">Submit on GitHub →</a>
+        <a class="btn primary" href="https://github.com/shellui-dev/shelldocs" target="_blank" rel="noopener">
+            <span>Submit on GitHub</span>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="14" height="14"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+        </a>
     </div>
 </div>
 

examples/ShellDocs.Preview/Program.cs

@@ -14,6 +14,8 @@
     o.SiteName = "ShellDocs";
     o.SiteTagline = "the docs framework for .NET";
     o.GitHubRepo = "shellui-dev/shelldocs";
+    // Try the new floating-sidebar variant. Flip to TopNav for the classic look.
+    o.LayoutVariant = DocsLayoutVariant.Sidebar;
     o.AddNavMenu("Documentation",
         new NavMenuItem("Getting Started", "/docs/introduction",
             "Install, configure, and ship your first ShellDocs site.",

src/ShellDocs.Components/Chrome/DocsHeader.razor

@@ -1,5 +1,6 @@
 @inject ShellDocsOptions Options
 @inject ShellDocs.Components.Chrome.MobileNavState MobileNav
+@inject IJSRuntime JS
 
 <header class="docs-header">
     <div class="docs-header-inner">
@@ -62,14 +63,17 @@
         </nav>
 
         <div class="docs-header-actions">
-            <button type="button" class="docs-header-search" aria-label="Search">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/></svg>
-                <span class="docs-header-search-label">Search</span>
-                <span class="docs-header-kbd">
-                    <kbd>Ctrl</kbd>
-                    <kbd>K</kbd>
-                </span>
-            </button>
+            @if (ShowSearch)
+            {
+                <button type="button" class="docs-header-search" @onclick="OpenSearch" aria-label="Search">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/></svg>
+                    <span class="docs-header-search-label">Search</span>
+                    <span class="docs-header-kbd">
+                        <kbd>Ctrl</kbd>
+                        <kbd>K</kbd>
+                    </span>
+                </button>
+            }
 
             <ThemeToggle />
 
@@ -86,9 +90,15 @@
 @implements IDisposable
 
 @code {
+    /* Search chip toggle. Marketing pages (HomeLayout) pass false — visitors
+       there aren't looking to grep docs. Docs pages (DocsLayout TopNav variant)
+       leave the default true. */
+    [Parameter] public bool ShowSearch { get; set; } = true;
+
     private const string DefaultIcon =
         "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"3\"/></svg>";
 
     protected override void OnInitialized() => MobileNav.OnChange += StateHasChanged;
     public void Dispose() => MobileNav.OnChange -= StateHasChanged;
+    private Task OpenSearch() => JS.InvokeVoidAsync("shelldocsSearch.open").AsTask();
 }

src/ShellDocs.Components/Chrome/DocsMobileBar.razor

@@ -0,0 +1,30 @@
+@inject MobileNavState MobileNav
+@inject IJSRuntime JS
+
+<div class="docs-mobile-bar" role="toolbar" aria-label="Mobile toolbar">
+    <button type="button" class="docs-mobile-tool" @onclick="MobileNav.Toggle" aria-label="Toggle navigation">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            @if (MobileNav.IsOpen)
+            {
+                <line x1="18" y1="6" x2="6" y2="18"/>
+                <line x1="6" y1="6" x2="18" y2="18"/>
+            }
+            else
+            {
+                <line x1="3" y1="6" x2="21" y2="6"/>
+                <line x1="3" y1="12" x2="21" y2="12"/>
+                <line x1="3" y1="18" x2="21" y2="18"/>
+            }
+        </svg>
+    </button>
+
+    <button type="button" class="docs-mobile-tool" @onclick="OpenSearch" aria-label="Search">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/></svg>
+    </button>
+
+    <ThemeToggle />
+</div>
+
+@code {
+    private Task OpenSearch() => JS.InvokeVoidAsync("shelldocsSearch.open").AsTask();
+}

src/ShellDocs.Components/Chrome/DocsMobileBar.razor.css

@@ -0,0 +1,36 @@
+.docs-mobile-bar {
+    position: sticky;
+    top: 0;
+    z-index: 30;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.5rem 0.75rem;
+    background: color-mix(in oklch, var(--background) 90%, transparent);
+    backdrop-filter: saturate(180%) blur(12px);
+    -webkit-backdrop-filter: saturate(180%) blur(12px);
+    border-bottom: 1px solid var(--border);
+}
+@media (min-width: 1024px) {
+    .docs-mobile-bar { display: none; }
+}
+
+::deep .docs-mobile-tool {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    border-radius: calc(var(--radius) - 3px);
+    color: var(--muted-foreground);
+    cursor: pointer;
+    transition: color 150ms, background 150ms;
+}
+::deep .docs-mobile-tool:hover { color: var(--foreground); background: var(--muted); }
+::deep .docs-mobile-tool svg { width: 1.15rem; height: 1.15rem; }
+
+/* Push ThemeToggle to the right end */
+::deep .theme-toggle { margin-left: auto; }

src/ShellDocs.Components/Chrome/DocsSidebarHeader.razor

@@ -0,0 +1,32 @@
+@inject ShellDocsOptions Options
+@inject IJSRuntime JS
+@inject SidebarCollapseState Collapse
+
+<div class="docs-sidebar-header">
+    <div class="docs-sidebar-brand-row">
+        <a class="docs-sidebar-brand" href="/">
+            <span class="docs-sidebar-logo-dot"></span>
+            <span class="docs-sidebar-brand-name">@(!string.IsNullOrEmpty(Options.SiteName) ? Options.SiteName : "Docs")</span>
+        </a>
+        <button type="button" class="docs-sidebar-collapse" @onclick="Collapse.Toggle" aria-label="Collapse sidebar" title="Collapse sidebar">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+                <rect x="3" y="4" width="18" height="16" rx="2"/>
+                <line x1="9" y1="4" x2="9" y2="20"/>
+            </svg>
+        </button>
+    </div>
+
+    <button type="button" class="docs-sidebar-search" @onclick="OpenSearch" aria-label="Search">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/></svg>
+        <span class="docs-sidebar-search-label">Search…</span>
+        <span class="docs-sidebar-search-kbd">
+            <kbd>@ShortcutKey</kbd>
+            <kbd>K</kbd>
+        </span>
+    </button>
+</div>
+
+@code {
+    private string ShortcutKey => OperatingSystem.IsMacOS() ? "⌘" : "Ctrl";
+    private Task OpenSearch() => JS.InvokeVoidAsync("shelldocsSearch.open").AsTask();
+}

src/ShellDocs.Components/Chrome/DocsSidebarHeader.razor.css

@@ -0,0 +1,93 @@
+.docs-sidebar-header {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    padding: 0.85rem 0.75rem 0.5rem 1rem;
+    flex-shrink: 0;
+}
+
+.docs-sidebar-brand-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+}
+
+.docs-sidebar-brand {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-decoration: none;
+    color: var(--foreground);
+    font-weight: 600;
+    font-size: 0.95rem;
+    letter-spacing: -0.01em;
+    padding: 0.15rem 0.2rem;
+    border-radius: calc(var(--radius) - 3px);
+    transition: opacity 150ms;
+    min-width: 0;
+    flex: 1;
+}
+.docs-sidebar-brand:hover { opacity: 0.8; }
+
+.docs-sidebar-collapse {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.85rem;
+    height: 1.85rem;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    border-radius: calc(var(--radius) - 3px);
+    color: var(--muted-foreground);
+    cursor: pointer;
+    transition: color 150ms, background 150ms;
+    flex-shrink: 0;
+}
+.docs-sidebar-collapse:hover { color: var(--foreground); background: var(--muted); }
+.docs-sidebar-collapse svg { width: 1rem; height: 1rem; }
+.docs-sidebar-logo-dot {
+    width: 1.125rem;
+    height: 1.125rem;
+    border-radius: 4px;
+    background: var(--foreground);
+    flex-shrink: 0;
+}
+
+.docs-sidebar-search {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.4rem 0.5rem 0.4rem 0.6rem;
+    background: var(--muted);
+    border: 1px solid transparent;
+    color: var(--muted-foreground);
+    border-radius: calc(var(--radius) - 2px);
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.8125rem;
+    text-align: left;
+    width: 100%;
+    transition: background 150ms, color 150ms, border-color 150ms;
+}
+.docs-sidebar-search:hover {
+    color: var(--foreground);
+    border-color: var(--border);
+}
+.docs-sidebar-search svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
+.docs-sidebar-search-label { flex: 1; }
+.docs-sidebar-search-kbd { display: inline-flex; gap: 0.2rem; }
+.docs-sidebar-search-kbd kbd {
+    font-family: var(--font-mono);
+    font-size: 0.62rem;
+    font-weight: 600;
+    background: var(--background);
+    border: 1px solid var(--border);
+    padding: 0.05rem 0.3rem;
+    border-radius: 4px;
+    color: var(--muted-foreground);
+    line-height: 1;
+    min-width: 1.1rem;
+    text-align: center;
+}

src/ShellDocs.Components/Chrome/PackageSelector.razor

@@ -8,9 +8,8 @@
             </svg>
         </span>
         <span class="pkg-value">@Selected.Title</span>
-        <svg class="pkg-chevrons" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <polyline points="8 10 12 6 16 10"/>
-            <polyline points="16 14 12 18 8 14"/>
+        <svg class="pkg-chevron @(_open ? "open" : "")" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="6 9 12 15 18 9"/>
         </svg>
     </button>
 

src/ShellDocs.Components/Chrome/PackageSelector.razor.css

@@ -46,14 +46,17 @@
     white-space: nowrap;
 }
 
-/* Stacked select-style chevrons — fumadocs pattern */
-.pkg-chevrons {
+/* Single chevron-down that rotates 180° when the menu opens — matches
+   the collapsible section toggles in the sidebar. */
+.pkg-chevron {
     width: 0.9rem;
     height: 0.9rem;
     color: var(--muted-foreground);
     flex-shrink: 0;
     margin-left: 0.25rem;
+    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
 }
+.pkg-chevron.open { transform: rotate(180deg); }
 
 .pkg-menu {
     position: absolute;