最小化侧边栏中的默认 Blazor NavMenu答案

【问题标题】：Mimize default Blazor NavMenu in sidebar最小化侧边栏中的默认 Blazor NavMenu
【发布时间】：2020-02-29 03:16:01
【问题描述】：

有没有办法在 Blazor 应用程序中最小化（隐藏）默认侧边栏（导航菜单）。我确实使用 .Net core 3.1 模板创建了 blazor 应用程序。主要布局看起来像

@inherits LayoutComponentBase

<div class="sidebar">
    <NavMenu />
</div>

<div class="main">
    <div class="top-row px-4 auth">

        <LoginDisplay />
        <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
    </div>

    <div class="content px-4">
        @Body
    </div>
</div>

我正在尝试在将折叠的顶行内添加汉堡包按钮 - 显示 NavMenu。

【问题讨论】：

标签： bootstrap-4 sidebar blazor

【解决方案1】：

我在 .NetCore 3.1 中做了与你 blazor 相同的模板，这让我发疯了。在 CSS 文件中找到此代码并进行您在此处看到的更改：

@media (min-width: 768px) {
app {
    flex-direction: row;
}

.sidebar {
    width: 100%;
    position: fixed;
    top: 0;
}

.main .top-row {
    position: sticky;
    top: 0;
}

.main > div {
    padding-left: 2rem !important;
    padding-right: 1.5rem !important;
}

.navbar-toggler {
    /*display: none;*/
}

.sidebar .collapse {
    /*Never collapse the sidebar for wide screens*/
    /*display: block;*/
} }

这将添加切换器并最小化导航栏。我还希望它跨越整个顶部，所以我在上面的代码中设置了宽度：

.sidebar{ width:100% }

但你可以随心所欲。

希望这会有所帮助。

【讨论】：

【解决方案2】：

模板中的NavMenu 中有一个示例。如果您使用浏览器的设备工具，您会看到汉堡菜单。

<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">blazor-demo</a>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </li>
    </ul>
</div>

@code {
    private bool collapseNavMenu = true;

    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

它使用引导程序的 collapse css 类来折叠菜单。
navbar-toggler 和 navbar-toggler-icon 显示汉堡菜单。

在 wwwroot/css/site.css 中，@media (min-width: 768px) 如果视口大于 768 像素，则隐藏菜单。

@media (min-width: 768px) {
...
    .navbar-toggler {
        display: none;
    }
...
}

【讨论】：