Mimize default Blazor NavMenu in sidebar

Question

Is there a way to minimize (hide) default sidebar (navmenu) in Blazor app. I did create blazor app using .Net core 3.1 template. And main layout looks like

@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>

I am trying to add hamburger button inside top-row which will collapse - show NavMenu.

Answer 1

I did the same template as you blazor in .NetCore 3.1 and this was driving me insane. In the CSS file locate this code and make the changes that you see here:

@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;*/
} }

This will add the toggler and minimize the nav-bar. I also wanted it to go across the entire top so I made the width in the code above:

.sidebar{ width:100% }

But you can make it whatever you want.

Hope this helps.