Add tablet navigation drawer to shell

This commit is contained in:
2026-03-21 13:32:44 +01:00
parent a7bacbabfc
commit 4934c39f9f
3 changed files with 146 additions and 0 deletions

View File

@@ -1,3 +1,6 @@
@implements IDisposable
@inject NavigationManager NavigationManager
<div class="app-shell">
<a class="skip-link" href="#app-main">Skip to main content</a>
@@ -39,6 +42,17 @@
</div>
<div class="app-shell-header-actions">
<button
type="button"
class="app-shell-menu-toggle"
aria-expanded="@isNavMenuOpen"
aria-controls="app-shell-drawer"
@onclick="ToggleNavMenu">
<span class="app-shell-menu-toggle-bar"></span>
<span class="app-shell-menu-toggle-bar"></span>
<span class="app-shell-menu-toggle-bar"></span>
<span class="visually-hidden">Toggle navigation</span>
</button>
@UtilityContent
</div>
</div>
@@ -57,6 +71,26 @@
</div>
</main>
@if (isNavMenuOpen)
{
<button
type="button"
class="app-shell-drawer-backdrop"
aria-label="Close navigation"
@onclick="CloseNavMenu"></button>
<aside id="app-shell-drawer" class="app-shell-drawer" aria-label="Primary navigation">
<div class="app-shell-drawer-header">
<strong>Navigate</strong>
<button type="button" class="app-shell-drawer-close" @onclick="CloseNavMenu">
Close
</button>
</div>
<ShellPrimaryNav />
</aside>
}
<nav class="app-shell-mobile-nav" aria-label="Primary">
<ShellPrimaryNav IsBottomNav="true" />
</nav>
@@ -80,4 +114,32 @@
[Parameter]
public RenderFragment? UtilityContent { get; set; }
private bool isNavMenuOpen;
protected override void OnInitialized()
{
NavigationManager.LocationChanged += HandleLocationChanged;
}
private void ToggleNavMenu()
{
isNavMenuOpen = !isNavMenuOpen;
}
private void CloseNavMenu()
{
isNavMenuOpen = false;
}
private void HandleLocationChanged(object? sender, LocationChangedEventArgs args)
{
isNavMenuOpen = false;
_ = InvokeAsync(StateHasChanged);
}
public void Dispose()
{
NavigationManager.LocationChanged -= HandleLocationChanged;
}
}