From d8a3ac126cc62bc86a9ee0740c30f24b5e73c7d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20Can=20Karag=C3=B6z?= <m.cankaragoz@outlook.com>
Date: Tue, 20 Oct 2026 23:26:29 +0300
Subject: [PATCH 1/2] Docs Minor Improvements

---
 .../Layout/DocsLayout.razor                           | 10 +++++-----
 .../Pages/DocsContent.razor                           | 11 +++++++----
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Layout/DocsLayout.razor b/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Layout/DocsLayout.razor
index 4de87865..9d041a9f 100644
--- a/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Layout/DocsLayout.razor
+++ b/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Layout/DocsLayout.razor
@@ -12,13 +12,13 @@
         @Body
     </MudMainContent>
 
-    @if (!IsDocsLandingPage)
-    {
-        <MudDrawer Open="true" Elevation="0" Class="pa-2 docs-toc-container" Style="width:260px; background: transparent" Anchor="Anchor.End">
+    <MudDrawer Open="true" Elevation="0" Class="pa-2 docs-toc-container" Style="width:260px; background: transparent" Anchor="Anchor.End">
+        @if (!IsDocsLandingPage)
+        {
             <DocsToc />
             <MudPageContentNavigation SectionClassSelector="mud-scrollspy-section" />
-        </MudDrawer>
-    }
+        }
+    </MudDrawer>
 </MudLayout>
 
 @code {
diff --git a/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Pages/DocsContent.razor b/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Pages/DocsContent.razor
index d1c9fcfe..c93b92e9 100644
--- a/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Pages/DocsContent.razor
+++ b/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Pages/DocsContent.razor
@@ -75,6 +75,7 @@ else if (_doc is not null)
     private PersistingComponentStateSubscription _subscription;
     private DocPage? _doc;
     private bool _notFound;
+    private string? _highlightedHtml;
     private ElementReference _contentRef;
 
     protected override void OnInitialized()
@@ -127,10 +128,12 @@ else if (_doc is not null)
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
-        if (firstRender)
-        {
-            await JS.InvokeVoidAsync("highlightDocsCode");
-        }
+        if (_doc is null || _doc.Html == _highlightedHtml)
+            return;
+
+        await JS.InvokeVoidAsync("highlightDocsCode");
+
+        _highlightedHtml = _doc.Html;
     }
 
     private Task PersistDocAsync()

From e1cb900f4dfebab23d2320dba2b3017f18cf029a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20Can=20Karag=C3=B6z?= <m.cankaragoz@outlook.com>
Date: Tue, 20 Oct 2026 23:38:44 +0300
Subject: [PATCH 2/2] Sticky Drawers

---
 .../Layout/DocsLayout.razor                   | 33 ++++++----
 .../Pages/DocsSidebar.razor                   |  3 +-
 .../wwwroot/app.css                           | 64 +++++++++++++++++--
 3 files changed, 80 insertions(+), 20 deletions(-)

diff --git a/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Layout/DocsLayout.razor b/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Layout/DocsLayout.razor
index 9d041a9f..3fb18b8b 100644
--- a/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Layout/DocsLayout.razor
+++ b/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Layout/DocsLayout.razor
@@ -3,24 +3,33 @@
 @layout MainLayout
 @inject NavigationManager Nav
 
-<MudLayout>
-    <MudDrawer Open="true" Elevation="1" Class="pa-2" Style="width:260px; background: transparent">
-        <DocsSidebar />
-    </MudDrawer>
+<div class="docs-shell">
 
-    <MudMainContent Class="docs-main">
+    <aside class="docs-sidebar-column">
+        <div class="docs-sticky">
+            <DocsSidebar />
+        </div>
+    </aside>
+
+    <main class="docs-main-column">
         @Body
-    </MudMainContent>
+    </main>
 
-    <MudDrawer Open="true" Elevation="0" Class="pa-2 docs-toc-container" Style="width:260px; background: transparent" Anchor="Anchor.End">
+    <aside class="docs-toc-column">
         @if (!IsDocsLandingPage)
         {
-            <DocsToc />
-            <MudPageContentNavigation SectionClassSelector="mud-scrollspy-section" />
+            <div class="docs-sticky">
+                <DocsToc />
+                <MudPageContentNavigation SectionClassSelector="mud-scrollspy-section" />
+            </div>
         }
-    </MudDrawer>
-</MudLayout>
+    </aside>
+
+</div>
 
 @code {
-    private bool IsDocsLandingPage => Nav.ToBaseRelativePath(Nav.Uri).Trim('/').Equals("docs", StringComparison.OrdinalIgnoreCase);
+    private bool IsDocsLandingPage =>
+        Nav.ToBaseRelativePath(Nav.Uri)
+           .Trim('/')
+           .Equals("docs", StringComparison.OrdinalIgnoreCase);
 }
diff --git a/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Pages/DocsSidebar.razor b/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Pages/DocsSidebar.razor
index f83a73ec..1b3dff87 100644
--- a/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Pages/DocsSidebar.razor
+++ b/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Pages/DocsSidebar.razor
@@ -4,7 +4,7 @@
 @implements IDisposable
 @inject PersistentComponentState PersistentState
 
-<div style="min-height: 20vh; max-height: 90vh; overflow-y: auto;">
+<div class="ua-docs-sidebar">
     @if (!Inline)
     {
         <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center" Class="ua-docs-header">
@@ -12,7 +12,6 @@
                 <MudText Typo="Typo.subtitle1">UltimateAuth</MudText>
                 <span>DOCUMENTATION</span>
             </div>
-            @* <MudText Typo="Typo.h6" Class="mb-2 px-2">UAuth Docs</MudText> *@
 
             <MudIconButton Icon="@(HasExpandedGroups ? Icons.Material.Filled.UnfoldLess : Icons.Material.Filled.UnfoldMore)" Color="Color.Default" Size="Size.Small" OnClick="ToggleAllGroups" />
         </MudStack>
diff --git a/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm/wwwroot/app.css b/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm/wwwroot/app.css
index 0dd5faef..f03bac21 100644
--- a/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm/wwwroot/app.css
+++ b/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm/wwwroot/app.css
@@ -214,7 +214,6 @@ h1:focus {
 
 .ua-footer {
     position: relative;
-    z-index: calc(var(--mud-zindex-drawer) + 1);
     background: var(--mud-palette-background) !important;
     border-top: 1px solid var(--mud-palette-lines-default);
 }
@@ -302,11 +301,9 @@ h1:focus {
 
 /* Sidebar container */
 .ua-docs-sidebar {
-    min-height: 20vh;
-    max-height: 90vh;
-    overflow-y: auto;
-    scrollbar-width: thin;
-    scrollbar-color: var(--mud-palette-lines-default) transparent;
+    min-height: 0;
+    max-height: none;
+    overflow: visible;
 }
 
 /* Header */
@@ -790,3 +787,58 @@ h1:focus {
         text-decoration: underline;
         text-underline-offset: 2px;
     }
+
+
+
+/* Documentation layout */
+
+.docs-shell {
+    display: grid;
+    grid-template-columns: 260px minmax(0, 1fr) 260px;
+    min-height: calc(100vh - 64px);
+}
+
+.docs-sidebar-column,
+.docs-toc-column {
+    min-width: 0;
+    padding: 8px;
+}
+
+.docs-main-column {
+    min-width: 0;
+}
+
+.docs-sticky {
+    position: sticky;
+    top: 80px;
+    max-height: calc(100dvh - 96px);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+    scrollbar-color: var(--mud-palette-lines-default) transparent;
+}
+
+/* Tablet: left sidebar + content */
+
+@media (min-width: 600px) and (max-width: 1199px) {
+    .docs-shell {
+        grid-template-columns: 260px minmax(0, 1fr);
+    }
+
+    .docs-toc-column {
+        display: none;
+    }
+}
+
+/* Mobile: content only */
+
+@media (max-width: 599px) {
+    .docs-shell {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .docs-sidebar-column,
+    .docs-toc-column {
+        display: none;
+    }
+}