Selector/Selector.MAUI/Shared/NavMenu.razor


<div class="bottom-bar">
    <div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
        <nav class="flex-column menu-items">
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="app" Match="NavLinkMatch.All">
                    <span class="oi oi-home" aria-hidden="true"></span> Home
                </NavLink>
            </div>
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="now">
                    <span class="oi oi-media-play" aria-hidden="true"></span> Now
                </NavLink>
            </div>
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="past">
                    <span class="oi oi-magnifying-glass" aria-hidden="true"></span> Past
                </NavLink>
            </div>
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="settings">
                    <span class="oi oi-cog" aria-hidden="true"></span> Settings
                </NavLink>
            </div>
        </nav>
    </div>

    <div class="top-row ps-3 navbar navbar-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="">Selector</a>
            <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </div>
</div>

@code {
    private bool collapseNavMenu = true;

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

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