navmenu.razor

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-flui">

        @if (!@IconMenuActive)
        {
            <img class="img1" src="data:image/png;base64,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">
        }
        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
            <span class="material-symbols-outlined">
                keyboard_double_arrow_left
            </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="dashboard">
                <img class="dash-icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAAAJElEQVQ4y2NgGKzgPxrAJUaZBnQ2NrHBroG2oTQa06MxTX8AAMYKfpA+AYB7AAAAAElFTkSuQmCC" width="20px" height="20px" />
                </span>
                @if (!@IconMenuActive)
                {
                    <label>Dashboard</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>Service request</label>
                }
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" @onclick="()=>expandSubNav=!expandSubNav">
                <span class="oi oi-list-rich" aria-hidden="true"></span>

                @if (!@IconMenuActive)
                {
                    <label>Orders</label>
                    <span class="down-arrow">
                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAAAR0lEQVQ4y2NgGAWDEPzXIiyCLFn///f/MBSRMKBIPT4N/5G1gJX/x6MBriUczA4nqBxZC5HKkbQQqxyuhXjlUC31o4lsMAMApWJJk5qElCQAAAAASUVORK5CYII=" />
                    </span>
                }
               
            </NavLink>

            @if (!@IconMenuActive)
            {
                @if (expandSubNav)
                {
                    <ul class="nav flex-column" id="subn">
                        <li class="nav-item px-3 nav-link">
                            <NavLink class="nav-link" href="#">
                                <span class="sub-1"></span>Sub-menu 1
                            </NavLink>
                        </li>

                        <li class="nav-item px-3 nav-link">

                            <NavLink class="nav-link" href="#">
                                <span class="sub-2"></span>Sub-menu 2
                            </NavLink>

                        </li>

                    </ul>
                }
            }
        </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>My Tasks</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>Admin Settings</label>
                }
            </NavLink>
        </div>


        <div class="nav-item px-3">
            <NavLink class="nav-link" @onclick="()=>expandSubNav2=!expandSubNav2">
                <span class="oi oi-list-rich" aria-hidden="true"></span>

                @if (!@IconMenuActive)
                {
                    <label>Entities</label>
                    <span class="down-arrow">
                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAAAR0lEQVQ4y2NgGAWDEPzXIiyCLFn///f/MBSRMKBIPT4N/5G1gJX/x6MBriUczA4nqBxZC5HKkbQQqxyuhXjlUC31o4lsMAMApWJJk5qElCQAAAAASUVORK5CYII=" />
                    </span>
                }

            </NavLink>
            @if (!@IconMenuActive)
            {

                @if (expandSubNav2)
                {
                    <ul class="nav flex-column" id="subn">
                        <li class="nav-item px-3 nav-link">
                            <NavLink class="nav-link" href="#">
                                <span class="sub-1"></span>Sub-menu 1
                            </NavLink>
                        </li>

                        <li class="nav-item px-3 nav-link">
                            <NavLink class="nav-link" href="#">
                                <span class="sub-2"></span>Sub-menu 2
                            </NavLink>

                        </li>

                    </ul>
                }
            }
        </div>
      
    </nav>


</div>

<div class="bottom-row">
    <div class="icon-menu-arrow">
        @if (!@IconMenuActive)
        {
            <span class="material-symbols-outlined" style="color: rgb(255, 255, 255);" @onclick="ToggleIconMenu">keyboard_double_arrow_left</span>
        }
        else
        {
            <span class="material-symbols-outlined" style="color: rgb(255, 255, 255);" @onclick="ToggleIconMenu">double_arrow</span>
        }
    </div>
</div>

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

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

    private bool collapseNavMenu ;

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