Skip to content

Commit 943267c

Browse files
mckaragozmckaragoz
authored
fix(docs): improve responsive layout and navigation (#91)
* Docs Minor Improvements * Sticky Drawers
1 parent 16dfd31 commit 943267c

4 files changed

Lines changed: 90 additions & 27 deletions

File tree

‎docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Layout/DocsLayout.razor‎

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,33 @@
33
@layout MainLayout
44
@inject NavigationManager Nav
55

6-
<MudLayout>
7-
<MudDrawer Open="true" Elevation="1" Class="pa-2" Style="width:260px; background: transparent">
8-
<DocsSidebar />
9-
</MudDrawer>
6+
<div class="docs-shell">
107

11-
<MudMainContent Class="docs-main">
8+
<aside class="docs-sidebar-column">
9+
<div class="docs-sticky">
10+
<DocsSidebar />
11+
</div>
12+
</aside>
13+
14+
<main class="docs-main-column">
1215
@Body
13-
</MudMainContent>
16+
</main>
17+
18+
<aside class="docs-toc-column">
19+
@if (!IsDocsLandingPage)
20+
{
21+
<div class="docs-sticky">
22+
<DocsToc />
23+
<MudPageContentNavigation SectionClassSelector="mud-scrollspy-section" />
24+
</div>
25+
}
26+
</aside>
1427

15-
@if (!IsDocsLandingPage)
16-
{
17-
<MudDrawer Open="true" Elevation="0" Class="pa-2 docs-toc-container" Style="width:260px; background: transparent" Anchor="Anchor.End">
18-
<DocsToc />
19-
<MudPageContentNavigation SectionClassSelector="mud-scrollspy-section" />
20-
</MudDrawer>
21-
}
22-
</MudLayout>
28+
</div>
2329

2430
@code {
25-
private bool IsDocsLandingPage => Nav.ToBaseRelativePath(Nav.Uri).Trim('/').Equals("docs", StringComparison.OrdinalIgnoreCase);
31+
private bool IsDocsLandingPage =>
32+
Nav.ToBaseRelativePath(Nav.Uri)
33+
.Trim('/')
34+
.Equals("docs", StringComparison.OrdinalIgnoreCase);
2635
}

‎docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Pages/DocsContent.razor‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ else if (_doc is not null)
7575
private PersistingComponentStateSubscription _subscription;
7676
private DocPage? _doc;
7777
private bool _notFound;
78+
private string? _highlightedHtml;
7879
private ElementReference _contentRef;
7980

8081
protected override void OnInitialized()
@@ -127,10 +128,12 @@ else if (_doc is not null)
127128

128129
protected override async Task OnAfterRenderAsync(bool firstRender)
129130
{
130-
if (firstRender)
131-
{
132-
await JS.InvokeVoidAsync("highlightDocsCode");
133-
}
131+
if (_doc is null || _doc.Html == _highlightedHtml)
132+
return;
133+
134+
await JS.InvokeVoidAsync("highlightDocsCode");
135+
136+
_highlightedHtml = _doc.Html;
134137
}
135138

136139
private Task PersistDocAsync()

‎docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Pages/DocsSidebar.razor‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,14 @@
44
@implements IDisposable
55
@inject PersistentComponentState PersistentState
66

7-
<div style="min-height: 20vh; max-height: 90vh; overflow-y: auto;">
7+
<div class="ua-docs-sidebar">
88
@if (!Inline)
99
{
1010
<MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center" Class="ua-docs-header">
1111
<div class="ua-docs-brand">
1212
<MudText Typo="Typo.subtitle1">UltimateAuth</MudText>
1313
<span>DOCUMENTATION</span>
1414
</div>
15-
@* <MudText Typo="Typo.h6" Class="mb-2 px-2">UAuth Docs</MudText> *@
1615

1716
<MudIconButton Icon="@(HasExpandedGroups ? Icons.Material.Filled.UnfoldLess : Icons.Material.Filled.UnfoldMore)" Color="Color.Default" Size="Size.Small" OnClick="ToggleAllGroups" />
1817
</MudStack>

‎docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm/wwwroot/app.css‎

Lines changed: 58 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -214,7 +214,6 @@ h1:focus {
214214

215215
.ua-footer {
216216
position: relative;
217-
z-index: calc(var(--mud-zindex-drawer) + 1);
218217
background: var(--mud-palette-background) !important;
219218
border-top: 1px solid var(--mud-palette-lines-default);
220219
}
@@ -302,11 +301,9 @@ h1:focus {
302301

303302
/* Sidebar container */
304303
.ua-docs-sidebar {
305-
min-height: 20vh;
306-
max-height: 90vh;
307-
overflow-y: auto;
308-
scrollbar-width: thin;
309-
scrollbar-color: var(--mud-palette-lines-default) transparent;
304+
min-height: 0;
305+
max-height: none;
306+
overflow: visible;
310307
}
311308

312309
/* Header */
@@ -790,3 +787,58 @@ h1:focus {
790787
text-decoration: underline;
791788
text-underline-offset: 2px;
792789
}
790+
791+
792+
793+
/* Documentation layout */
794+
795+
.docs-shell {
796+
display: grid;
797+
grid-template-columns: 260px minmax(0, 1fr) 260px;
798+
min-height: calc(100vh - 64px);
799+
}
800+
801+
.docs-sidebar-column,
802+
.docs-toc-column {
803+
min-width: 0;
804+
padding: 8px;
805+
}
806+
807+
.docs-main-column {
808+
min-width: 0;
809+
}
810+
811+
.docs-sticky {
812+
position: sticky;
813+
top: 80px;
814+
max-height: calc(100dvh - 96px);
815+
overflow-y: auto;
816+
overscroll-behavior: contain;
817+
scrollbar-width: thin;
818+
scrollbar-color: var(--mud-palette-lines-default) transparent;
819+
}
820+
821+
/* Tablet: left sidebar + content */
822+
823+
@media (min-width: 600px) and (max-width: 1199px) {
824+
.docs-shell {
825+
grid-template-columns: 260px minmax(0, 1fr);
826+
}
827+
828+
.docs-toc-column {
829+
display: none;
830+
}
831+
}
832+
833+
/* Mobile: content only */
834+
835+
@media (max-width: 599px) {
836+
.docs-shell {
837+
grid-template-columns: minmax(0, 1fr);
838+
}
839+
840+
.docs-sidebar-column,
841+
.docs-toc-column {
842+
display: none;
843+
}
844+
}

0 commit comments

Comments
 (0)