BptAppFramework

<BptAppFramework DeviceMode="Auto"
                 DesktopLayout="HeaderWithLeftMenuBelow"
                 TabletLayout="Hamburger"
                 MobileLayout="Hamburger"
                 MobileBreakpoint="768"
                 TabletBreakpoint="1024"
                 MenuWidth="260px"
                 HeaderHeight="56px">
    <Header>
        <strong>BptAppFramework</strong>
    </Header>
    <Menu>
        <BptAppFrameworkMenu>
            <BptAppFrameworkMenuItem Text="Home" Icon="bi bi-house" Href="/" IsActive="true" />
            <BptAppFrameworkMenuItem Text="Settings" Icon="bi bi-gear" />
        </BptAppFrameworkMenu>
    </Menu>
    <ChildContent>
        @* Page content here — also accepts @Body when used as MainLayout *@
    </ChildContent>
</BptAppFramework>

@code {
// Use as a MainLayout.razor:
@inherits LayoutComponentBase
@using Bpt.Components.Tools

<BptAppFramework DesktopLayout="BptAppFrameworkDesktopLayout.HeaderWithLeftMenuBelow"
                 MobileLayout="BptAppFrameworkMobileLayout.Hamburger">
    <Header><strong>My App</strong></Header>
    <Menu>
        <BptAppFrameworkMenu>
            <BptAppFrameworkMenuItem Text="Home"    Icon="bi bi-house" Href="/" />
            <BptAppFrameworkMenuItem Text="Users"   Icon="bi bi-people">
                <BptAppFrameworkMenuItem Text="Active"  Href="/users/active" />
                <BptAppFrameworkMenuItem Text="Pending" Href="/users/pending" Badge="3" />
            </BptAppFrameworkMenuItem>
            <BptAppFrameworkMenuItem Text="Settings" Icon="bi bi-gear" Href="/settings" />
        </BptAppFrameworkMenu>
    </Menu>
    <ChildContent>@Body</ChildContent>
</BptAppFramework>
}