ASP.NET Core Blazor Server - How to Convert the standard Blazor navigation menu to a collapsible icon menu

How to Convert the standard Blazor navigation menu to a collapsible icon menu

The default Blazor navigation menu is in NavMenu.razor. Its CSS is in NavMenu.razor.css, and contains such exciting classes as bi-plus-square-fill-nav-menu and bi-house-door-fill-nav-menu.

NavMenu.razor

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <span class="oi oi-monitor" style="color:white;" aria-hidden="true"></span>
        @if (!@IconMenuActive)
        {
            <a class="navbar-brand" href="">The Menu Title Here</a>
        }
        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</div>

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


</div>

<div class="bottom-row">
    <div class="icon-menu-arrow">
        @if (!@IconMenuActive)
        {
            <span class="oi oi-arrow-left" style="color: white;" @onclick="ToggleIconMenu"></span>
        }
        else
        {
            <span class="oi oi-arrow-right" style="color: white;" @onclick="ToggleIconMenu"></span>
        }
    </div>
</div>

@code {
    //bool to send to MainLayout for shrinking sidebar and showing/hide menu text
    private bool IconMenuActive { get; set; } = false;

    //EventCallback for sending bool to MainLayout
    [Parameter]
    public EventCallback<bool> ShowIconMenu { get; set; }

    private bool collapseNavMenu = true;

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

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

    //Method to toggle IconMenuActive bool and send bool via EventCallback
    private async Task ToggleIconMenu()
    {
        IconMenuActive = !IconMenuActive;
        await ShowIconMenu.InvokeAsync(IconMenuActive);
    }
}

NavMenu.razor.css

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.bottom-row {
    position: absolute;
    bottom: 0;
    padding-bottom: 10px;
    text-align: right;
    width: 100%;
    padding-right: 28px;
}

.icon-menu-arrow {
    text-align: right;
}

.navbar-brand {
    font-size: 1.1rem;
}

.oi {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type {
        padding-top: 1rem;
    }

    .nav-item:last-of-type {
        padding-bottom: 1rem;
    }

    .nav-item ::deep a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item ::deep a.active {
    background-color: rgba(255,255,255,0.25);
    color: white;
}

.nav-item ::deep a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

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

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

@media (max-width: 640px) {
    .bottom-row {
        display: block;
    }
}

MainLayout.razor

@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar" style="@IconMenuCssClass">
        <NavMenu ShowIconMenu="ToggleIconMenu"/>
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

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

@code{
    private bool _iconMenuActive { get; set; }
    private string? IconMenuCssClass => _iconMenuActive ? "width: 80px;" : null;

    protected void ToggleIconMenu(bool iconMenuActive)
    {
        _iconMenuActive = iconMenuActive;
    }
}

source:https://techcommunity.microsoft.com/t5/web-development/convert-the-standard-blazor-navigation-menu-to-a-collapsible/m-p/3753268

useful links

Add icons to Blazor’s NavMenu in .NET 8

https://mattfrear.com/2024/02/27/customize-blazors-navmenu

find it at Convert SVG to Data URI for css background-image (codepen.io)

https://codepen.io/elliz/full/ygvgay

.Net 8.x

https://techcommunity.microsoft.com/t5/web-development/convert-the-standard-blazor-navigation-menu-to-a-collapsible/m-p/3753268