最小化侧边栏中的默认 Blazor 导航菜单

Question

有没有办法在 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://learn.microsoft.com/aspnet/" target="_blank">About</a>
    </div>

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

我正在尝试在顶行内添加汉堡包按钮，该按钮将折叠 - 显示导航菜单。

Answer 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% }

但你可以随心所欲地制作它。

希望这可以帮助。