MainLayout

Overview

The MainLayout component serves as the primary layout template for the APEX Portal application. It provides a consistent user interface structure across all pages, featuring a responsive sidebar for navigation and a theme switcher for user preference.

Prerequisites

• Blazor WebAssembly or Server project
• Blazor Bootstrap package
• UI.Razor component library

Installation/Setup

The MainLayout component is part of the Apex.Portal project. It's automatically utilized when specified as the default layout in the App.razor file:

<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />

Basic Usage

The MainLayout is used automatically as the default layout for all pages in the application. You don't need to explicitly reference it in your pages unless you want to override the default layout.

@page "/example"
@layout MainLayout

<h1>Example Page</h1>

API Reference

Properties

Property	Type	Default	Description
Body	RenderFragment	N/A	The content to render inside the layout (automatically provided by the framework)
Sidebar	Sidebar	Required	Reference to the sidebar component used for navigation

Methods

Method	Return Type	Description
SidebarDataProvider	Task	Provides navigation items data to the sidebar component
GetNavItems	IEnumerable	Returns the collection of navigation items to display in the sidebar

Components Used

1. Sidebar: Navigation sidebar from Blazor Bootstrap
2. ThemeSwitcher: Theme toggling component from Blazor Bootstrap

Examples

Using MainLayout with Custom Navigation Items

To customize the navigation items displayed in the sidebar, you can extend the MainLayout class and override the GetNavItems method:

public class CustomLayout : MainLayout
{
    internal override IEnumerable<NavItem> GetNavItems()
    {
        return new List<NavItem>
        {
            new() { Id = "dashboard", Href = "/", IconName = IconName.Speedometer2, Text = "Dashboard", Match=NavLinkMatch.All },
            new() { Id = "reports", IconName = IconName.Graph, Text = "Reports"},
            new() { Id = "reportlist", Href = "/reports/list", IconName = IconName.FileEarmarkText, Text = "Report List", ParentId = "reports" }
        };
    }
}

Best Practices

• Keep the layout clean and focused on structural elements
• Use the sidebar navigation for main application sections
• Ensure all navigation items have meaningful icons for better user experience
• Maintain a hierarchical navigation structure with logical grouping
• Consider the mobile experience when designing the layout

Common Issues and Solutions

Issue: Sidebar items not appearing

Solution: Ensure that the navigation items are properly defined in the GetNavItems method and that the Sidebar component is correctly referenced.

Issue: Theme switching not working

Solution: Verify that the theme-related localStorage and data-bs-theme attributes are properly implemented in the index.html file.

Issue: Layout not adapting well to mobile screens

Solution: Review the CSS for responsive design issues and ensure that appropriate Bootstrap breakpoints are being utilized.