Dashboard: Navigation drawer doesn't work properly on mobile #51

New issue

Closed

opened 2026-01-18 21:35:13 +00:00 by joezombie · 0 comments

joezombie commented

2026-01-18 21:35:13 +00:00

(Migrated from github.com)

Description

The navigation drawer (sidebar menu) has usability issues on mobile devices:

Drawer doesn't auto-close when clicking a navigation link
Drawer is open by default on all screen sizes
No responsive behavior for small screens

Analysis

MainLayout.razor

<MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2">
    <NavMenu />
</MudDrawer>

@code {
    private bool _drawerOpen = true;  // Always open by default

NavMenu.razor

Navigation links have no onclick to close the drawer:

<MudNavLink Href="/" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Dashboard">Dashboard</MudNavLink>

Expected Mobile Behavior

Drawer should be closed by default on small screens
Clicking a nav link should close the drawer on mobile
Hamburger menu should toggle drawer visibility

Files

Components/Layout/MainLayout.razor - Drawer component
Components/Layout/NavMenu.razor - Navigation links

Steps to Fix

Use MudBlazor's responsive drawer variant:

<MudDrawer @bind-Open="_drawerOpen" 
           Variant="@(IsSmallScreen ? DrawerVariant.Temporary : DrawerVariant.Mini)"
           ClipMode="DrawerClipMode.Always">

Pass callback to NavMenu to close drawer on click:
```
<NavMenu OnNavigation="CloseDrawerOnMobile" />
```
Add breakpoint detection using MudBlazor.Services.IBreakpointService

Acceptance Criteria

Drawer closed by default on mobile (<600px)
Clicking nav link closes drawer on mobile
Drawer remains open/persistent on desktop
Hamburger menu works correctly on all screen sizes

## Description The navigation drawer (sidebar menu) has usability issues on mobile devices: 1. Drawer doesn't auto-close when clicking a navigation link 2. Drawer is open by default on all screen sizes 3. No responsive behavior for small screens ## Analysis ### MainLayout.razor ```razor <MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2"> <NavMenu /> </MudDrawer> @code { private bool _drawerOpen = true; // Always open by default ``` ### NavMenu.razor Navigation links have no onclick to close the drawer: ```razor <MudNavLink Href="/" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Dashboard">Dashboard</MudNavLink> ``` ## Expected Mobile Behavior - Drawer should be closed by default on small screens - Clicking a nav link should close the drawer on mobile - Hamburger menu should toggle drawer visibility ## Files - `Components/Layout/MainLayout.razor` - Drawer component - `Components/Layout/NavMenu.razor` - Navigation links ## Steps to Fix 1. Use MudBlazor's responsive drawer variant: ```razor <MudDrawer @bind-Open="_drawerOpen" Variant="@(IsSmallScreen ? DrawerVariant.Temporary : DrawerVariant.Mini)" ClipMode="DrawerClipMode.Always"> ``` 2. Pass callback to NavMenu to close drawer on click: ```razor <NavMenu OnNavigation="CloseDrawerOnMobile" /> ``` 3. Add breakpoint detection using `MudBlazor.Services.IBreakpointService` ## Acceptance Criteria - [ ] Drawer closed by default on mobile (<600px) - [ ] Clicking nav link closes drawer on mobile - [ ] Drawer remains open/persistent on desktop - [ ] Hamburger menu works correctly on all screen sizes

👀 1