VRSystem/tmptestproject/BlazorWeb1/Components/Layout/NavMenu.razor

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">BlazorWeb1</a>
    </div>
</div>

<input type="checkbox" title="Navigation menu" class="navbar-toggler" />


@inject IconService iconService

<div style="width: 200px;">
    <Button Type="ButtonType.Primary" OnClick="ToggleCollapsed" Style="margin-bottom: 16px">
        @if (collapsed)
        {
            <Icon Type="@IconType.Outline.MenuUnfold" />
        }
        else
        {
            <Icon Type="@IconType.Outline.MenuFold" />
        }
    </Button>
    <Menu DefaultSelectedKeys=@(new[] { "1" })
          DefaultOpenKeys=@(new[] { "sub1" })
          Mode=MenuMode.Inline
          Theme=MenuTheme.Dark
          InlineCollapsed=collapsed>
        <MenuItem Key="1" RouterLink="/"  Icon="@IconType.Outline.PieChart">
            <IconTemplate>
                <IconFont Type="icon-c-sharp-l" />
            </IconTemplate>
            <ChildContent>
                Option 1
            </ChildContent>
        </MenuItem>
        <MenuItem Key="2" Icon="@IconType.Outline.Desktop">
            Option 2
        </MenuItem>
        <MenuItem Key="3" Icon="@IconType.Outline.Container">
            Option 3
        </MenuItem>
        <SubMenu Key="sub1" TitleTemplate="@sub1Title">
            <MenuItem Key="5" RouterLink="/Counter">Option 5</MenuItem>
            <MenuItem Key="6">Option 6</MenuItem>
            <MenuItem Key="7">Option 7</MenuItem>
            <MenuItem Key="8">Option 8</MenuItem>
        </SubMenu>
        <SubMenu Key="sub2" TitleTemplate="@sub2Title">
            <MenuItem Key="9">Option 9</MenuItem>
            <MenuItem Key="10">Option 10</MenuItem>
            <SubMenu Key="sub3" Title="Submenu">
                <MenuItem Key="11">Option 11</MenuItem>
                <MenuItem Key="12">Option 12</MenuItem>
            </SubMenu>
        </SubMenu>
    </Menu>
</div>

@code {
    bool collapsed = false;

    RenderFragment sub1Title =
    @<span>
        <Icon Type="@IconType.Outline.Mail" />
        <span>Navigation One</span>
    </span>;

    RenderFragment sub2Title =
    @<span>
        <Icon Type="@IconType.Outline.Appstore" />
        <span>Navigation Two</span>
    </span>;

    void ToggleCollapsed()
    {
        collapsed = !collapsed;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await iconService.CreateFromIconfontCN("//at.alicdn.com/t/font_2735473_hi62ezq5579.js");
        }
    }
}



@* <Menu Mode="MenuMode.Inline"
      OpenKeys=this.openKeys
      OnOpenChange=this.onOpenChange
      Style="width:256px ;">
    <SubMenu Key="sub1" TitleTemplate=@sub1Title>
        <MenuItem Key="1" RouterLink="/">Option 1</MenuItem>
    </SubMenu>
    <SubMenu Key="sub2" TitleTemplate=@sub2Title>
        <MenuItem Key="5" RouterLink="/counter">Option 5</MenuItem>
        <MenuItem Key="6">Option 6</MenuItem>
        <SubMenu Key="sub3" Title="Submenu">
            <MenuItem Key="7">Option 7</MenuItem>
            <MenuItem Key="8">Option 8</MenuItem>
        </SubMenu>
    </SubMenu>
    <SubMenu Key="sub4" TitleTemplate=@sub4Title>
        <MenuItem Key="9">Option 9</MenuItem>
        <MenuItem Key="10">Option 10</MenuItem>
        <MenuItem Key="11">Option 11</MenuItem>
        <MenuItem Key="12">Option 12</MenuItem>
    </SubMenu>
</Menu>

@code {
    RenderFragment sub1Title =
        @<span>
        <Icon Type="@IconType.Outline.Mail" />
            <span>首页</span>
        </span>;

    RenderFragment sub2Title =
        @<span>
            <Icon Type="@IconType.Outline.Appstore" />
            <span>Navigation Two</span>
        </span>;

    RenderFragment sub4Title =
        @<span>
            <Icon Type="@IconType.Outline.Setting" />
            <span>Navigation Three</span>
        </span>;

    // submenu keys of first level
    string[] rootSubmenuKeys = {"sub1", "sub2", "sub4"};

    string[] openKeys = {"sub1"};

    void onOpenChange(string[] openKeys)
    {
        var latestOpenKey = openKeys.FirstOrDefault(key => !this.openKeys.Contains(key));
        if (!rootSubmenuKeys.Contains(latestOpenKey))
        {
            this.openKeys = openKeys;
        }
        else
        {
            this.openKeys = !string.IsNullOrEmpty(latestOpenKey) ? new[] {latestOpenKey} : Array.Empty<string>();
        }
    }
}
 *@


@* <div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
			</NavLink>
			<nav>
				<div class="nav-item px-3">
					<NavLink class="nav-link" href="counter">
						<span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
					</NavLink>
				</div>
			</nav>
        </div>


        <div class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
            </NavLink>
        </div>

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="weather">
                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
            </NavLink>
        </div>
    </nav>

    
</div> *@