基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（二） (2)

菜单是在小屏幕上才会出现的，相信看完了二维码的显示与隐藏，这个菜单的显示与隐藏就好办了吧，实现方法是一样的，菜单按钮是在头部组件Header.razor中的，包括主题切换功能，所以下面代码都在Header.razor里面。

@code { /// <summary> /// 下拉菜单是否打开 /// </summary> private bool collapseNavMenu = false; /// <summary> /// 导航菜单CSS /// </summary> private string NavMenuCssClass => collapseNavMenu ? "active" : null; /// <summary> /// 显示/隐藏 菜单 /// </summary> private void ToggleNavMenu() => collapseNavMenu = !collapseNavMenu; }

默认是不打开的，collapseNavMenu = false。然后根据collapseNavMenu值为NavMenuCssClass给定不同的class。

... <nav> <div> <div> <div> <NavLink href="" Match="NavLinkMatch.All">