Add tablet navigation drawer to shell
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user