●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
A complete, responsive administrative dashboard layout is provided, structured around fixed navigation elements and a main content area using the Bootstrap grid system.
* **Fixed Navigation:** Top navbar handles branding, search, user dropdown, and filter toggle.
* **Responsive Sidebar:** Icon-only navigation column for medium/large screens.
* **Mobile Navigation:** Bottom fixed bar replaces the sidebar on small screens.
* **Stats Cards:** Four data cards showing key metrics (Users, Revenue, Orders, Alerts).
* **Data Presentation:** A basic `table-striped` Bootstrap table displays recent orders.
* **Slide-out Filter Pane:** A right-hand drawer handles dynamic filtering controls.
* **Filtering Form:** Includes standard Blazor `InputDate`, `InputSelect`, and `InputText` components bound to a `FilterModel`.
## Key components
* Standard Blazor components: `NavLink`, `InputDate`, `InputSelect`, `InputText`.
* Bootstrap components simulated via CSS classes: `navbar`, `card`, `table`, `dropdown`.
## How it works
The layout structure manages margins via custom CSS (`DashboardLayout.razor.css`) to prevent content overlap with the fixed top navbar and the left sidebar.
The right-hand filter pane functionality is controlled purely by Blazor state and CSS classes:
1. Clicking the Filter button toggles the `isFilterOpen` boolean via `ToggleFilter()`.
2. Conditional rendering (`@(isFilterOpen ? "open" : "")`) applies the transition CSS class to slide the `filter-pane` into view.
3. A dedicated `filter-backdrop` element ensures mobile usability and acts as a clickable close trigger.
Form inputs (`InputDate`, `InputSelect`, `InputText`) are bound using `@bind-Value` to a local `FilterModel` C# class.
## Styling
The component relies heavily on **Bootstrap 5 utility and component classes** (`d-flex`, `row`, `col-md-*`, `card`, `table-responsive`). Custom **scoped CSS** is crucial for defining the dimensions and positioning of fixed elements: `.sidebar`, `.main-content` margins, `.mobile-bottom` bar, and the sliding `.filter-pane` with its `.filter-backdrop`. Responsiveness is handled by Bootstrap grid classes and specific CSS media queries for different breakpoints (e.g., hiding the sidebar on small screens).
## Reuse steps
1. Ensure Bootstrap 5 CSS is referenced in the Blazor project (`index.html` or `_Layout.cshtml`).
2. Place the `DashboardLayout.razor` and `DashboardLayout.razor.css` files into the project.
3. If using specific icons (like `fas`), ensure Font Awesome (or similar icon library) is included.
4. Replace the placeholder data structures and presentation logic with actual service calls and data binding.
## Limitations & next steps
This is a front-end structure generated by Instruct UI. Data services, authentication checks, actual search functionality, navigation routing logic (beyond `NavLink` placeholders), and detailed activity charts require application wiring. Extend the `ApplyFilters` method to interact with a data source using the bound `FilterModel`.