CODEWITHSUNDEEP
bootstrap-4sidebarblazor
adopilot
adopilot

Reputation: 4500

Mimize default Blazor NavMenu in sidebar

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.

Upvotes: 3

Views: 19934

Answers (2)

Ares
Ares

Reputation: 101

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.

Upvotes: 5

agua from mars
agua from mars

Reputation: 17404

There is a sample in NavMenu from the template. If you use the device tool of your browser you'll see the burger menu.

<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;
    }
}

It use the bootstrap's collapse css class to collapse the menu.
navbar-toggler and navbar-toggler-icon to show the burger menu.

In wwwroot/css/site.css the @media (min-width: 768px) hide the menu if the view port is greater than 768px.

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

Upvotes: 4

Related Questions