@rendermode InteractiveServer

<div class="navmenu">
    <input type="checkbox" title="Menu expand/collapse toggle" id="navmenu-toggle" class="navmenu-icon" />
    <label for="navmenu-toggle" class="navmenu-icon"><FluentIcon Value="@(new Icons.Regular.Size20.Navigation())" Color="Color.Fill" /></label>
    <nav class="sitenav" aria-labelledby="main-menu">
        <FluentNavMenu Id="main-menu" Collapsible="true" Width="250" Title="Navigation menu" @bind-Expanded="expanded" CustomToggle="true">
            <FluentNavLink Href="/" Match="NavLinkMatch.All" Icon="@(new Icons.Regular.Size20.Home())" IconColor="Color.Accent">Home</FluentNavLink>
            <FluentNavGroup Icon="@(new Icons.Regular.Size20.Globe())" Expanded="false" Title="Original">
                <FluentNavLink Href="counter" Icon="@(new Icons.Regular.Size20.NumberSymbolSquare())" IconColor="Color.Accent">Counter</FluentNavLink>
                <FluentNavLink Href="weather" Icon="@(new Icons.Regular.Size20.WeatherPartlyCloudyDay())" IconColor="Color.Accent">Weather</FluentNavLink>
            </FluentNavGroup>
            <FluentNavGroup Icon="@(new Icons.Regular.Size20.SlideLayout())" Expanded="false" Title="Layout">
                <FluentNavLink Href="layoutheader" Icon="@(new Icons.Regular.Size20.DocumentHeader())" IconColor="Color.Accent">Header</FluentNavLink>
                <FluentNavLink Href="layoutfooter" Icon="@(new Icons.Regular.Size20.DocumentFooter())" IconColor="Color.Accent">Footer</FluentNavLink>
                <FluentNavLink Href="layoutbodycontent" Icon="@(new Icons.Regular.Size20.ContentViewGallery())" IconColor="Color.Accent">BodyContent</FluentNavLink>
                <FluentNavLink Href="layoutgrid" Icon="@(new Icons.Regular.Size20.Grid())" IconColor="Color.Accent">Grid</FluentNavLink>
                <FluentNavLink Href="layoutlayout" Icon="@(new Icons.Regular.Size20.LayoutColumnOneThirdLeft())" IconColor="Color.Accent">Layout</FluentNavLink>
                <FluentNavLink Href="layoutmainlayout" Icon="@(new Icons.Regular.Size20.LayoutColumnTwoSplitRight())" IconColor="Color.Accent">MainLayout</FluentNavLink>
                <FluentNavLink Href="layoutspacer" Icon="@(new Icons.Regular.Size20.Spacebar())" IconColor="Color.Accent">Spacer</FluentNavLink>
                <FluentNavLink Href="layoutsplitter" Icon="@(new Icons.Regular.Size20.SplitVertical())" IconColor="Color.Accent">Splitter</FluentNavLink>
                <FluentNavLink Href="layoutstack" Icon="@(new Icons.Regular.Size20.Stack())" IconColor="Color.Accent">Stack</FluentNavLink>
            </FluentNavGroup>
            <FluentNavGroup Icon="@(new Icons.Regular.Size20.Form())" Expanded="false" Title="Form & Input">
                <FluentNavLink Href="forminputoverview" Icon="@(new Icons.Regular.Size20.Eye())" IconColor="Color.Accent">Overview</FluentNavLink>
                <FluentNavLink Href="forminputcheckbox" Icon="@(new Icons.Regular.Size20.CheckboxChecked())" IconColor="Color.Accent">Checkbox</FluentNavLink>
                <FluentNavLink Href="forminputfile" Icon="@(new Icons.Regular.Size20.ArrowUpload())" IconColor="Color.Accent">InputFile</FluentNavLink>
                <FluentNavGroup Icon="@(new Icons.Regular.Size20.List())" Expanded="false" Title="List">
                    <FluentNavLink Href="forminputcombobox" Icon="@(new Icons.Regular.Size20.BoxCheckmark())" IconColor="Color.Accent">Combobox</FluentNavLink>
                    <FluentNavLink Href="forminputlist" Icon="@(new Icons.Regular.Size20.List())" IconColor="Color.Accent">List</FluentNavLink>
                </FluentNavGroup>
            </FluentNavGroup>

        </FluentNavMenu>
    </nav>
</div>

@code {
    private bool expanded = true;
}