●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Top application bar (MudAppBar) with action icons, search, and a profile menu (MudMenu/MudAvatar).
- Persistent left sidebar using MudDrawer with full and mini widths, collapsible labels and navigation groups (MudNavMenu, MudNavGroup, MudNavLink).
- Main content area with a MudPaper placeholder for dashboard widgets or a Router view.
- Drawer toggle behavior with a boolean state and width switching.
## Key components
- MudAppBar, MudIconButton, MudSpacer
- MudDrawer, MudDrawerHeader, MudNavMenu, MudNavGroup, MudNavLink
- MudMenu, MudButton, MudAvatar
- MudPaper, MudText
## How it works
- The drawer collapse state is stored in a private bool (DrawerCollapsed) and toggled by ToggleDrawerCollapsed().
- Sidebar width is computed by GetSidebarWidthStyle() and applied inline to the sidebar container.
- Navigation items use MudNavLink and MudNavGroup to build grouped links; labels are conditionally rendered when the drawer is collapsed.
- Topbar action icons are MudIconButton instances; the profile menu uses MudMenu with ActivatorContent and MudMenuItem entries.
- No data binding to models or EditForm validation is present; the page is a layout/shell component rather than a data entry form.
## Styling
- UI uses MudBlazor components for structure and interactions.
- Bootstrap utility classes (d-flex, flex-grow-1, p-3, img-fluid, border-end, ms-2, fw-bold) are present for layout and spacing.
- Inline styles control the fixed logo width and sidebar widths; responsiveness depends on MudDrawer variants and Bootstrap utilities.
## Reuse steps
1. Add NuGet package MudBlazor and register MudBlazor services in Program.cs (builder.Services.AddMudServices()).
2. Import MudBlazor namespace in _Imports.razor and include MudBlazor CSS in the project layout.
3. Copy the component into a Blazor project and adjust routes or replace the placeholder MudPaper with a Router or child components.
4. Replace hard-coded links and menu labels with route-aware navigation and inject services for data and permissions.
## Limitations & next steps
- This file is a single shell generated by Instruct UI and contains UI only; backend services, routing, authentication and authorization are not wired.
- No form validation, state persistence, or data loading is implemented for navigation targets.
- Accessibility and keyboard focus handling require review (aria-labels exist on some buttons but menu items need context).
- Suggested extensions: integrate Router view or child layout outlet, inject navigation/permission services, add responsive breakpoints and unit tests for toggle behavior.