phronCare/phronCare.UIBlazor/Layout/NavMenu.razor

@inject NavMenuService navMenuService

<div class="top-row ps-3 navbar navbar-dark border-bottom" style="padding: 0; border:0px solid red;">
    <div class="container-fluid" style="padding:0; border:0px solid green;">
        <a class="navbar-brand d-flex align-items-center" href="" style="height: 56px; border:0px solid yellow; display: block;">
            @if (!navMenuService.Minimized)
            {
                <img src="images/Icono.png" alt="Logo" style="height: 50px; display: block; border:0px solid blue;" />
            }
        </a>
        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</div>

<div class="@($"{NavMenuCssClass} nav-scrollable bg-dark text-white")" @onclick="ToggleNavMenu" style="padding-top:4px;">
    <nav class="flex-column text-center">
        <div class="nav-item px-2 py-0">
            <NavLink class="nav-link text-white d-flex align-items-center gap-2 py-0 px-2" href="/DashboardPanel" Match="NavLinkMatch.All" activeClass="bg-secondary text-white">
                <span class="oi oi-home" aria-hidden="true"></span>
                @if (!navMenuService.Minimized)
                {
                    <label class="mb-0">Home</label>
                }
            </NavLink>
        </div>

        <AuthorizeView Roles="Admin">
            <div class="nav-item px-2 py-0">
                <NavLink class="nav-link text-white d-flex align-items-center gap-2 py-0 px-2" href="roles" activeClass="bg-secondary text-white">
                    <span class="oi oi-shield" aria-hidden="true"></span>
                    @if (!navMenuService.Minimized)
                    {
                        <label class="mb-0">Roles</label>
                    }
                </NavLink>
            </div>
            <div class="nav-item px-2 py-0">
                <NavLink class="nav-link text-white d-flex align-items-center gap-2 py-0 px-2" href="users" activeClass="bg-secondary text-white">
                    <span class="oi oi-people" aria-hidden="true"></span>
                    @if (!navMenuService.Minimized)
                    {
                        <label class="mb-0">Usuarios</label>
                    }
                </NavLink>
            </div>
        </AuthorizeView>

        <div class="nav-item px-2 py-0">
            <NavLink class="nav-link text-white d-flex align-items-center gap-2 py-0 px-2" @onclick="() => expClientes = !expClientes">
                <span class="oi oi-briefcase" aria-hidden="true"></span>
                @if (!navMenuService.Minimized)
                {
                    <label class="mb-0">Ventas</label>
                }
            </NavLink>

            @if (expClientes)
            {
                <ul class="nav flex-column">
                    <div class="nav-item ps-4 py-0 border-start border-2 border-white">
                        <NavLink class="nav-link small py-0 px-2 text-start d-flex align-items-center" href="sales/customers/" activeClass="bg-secondary text-white fw-semibold">
                            <i class="bi bi-person-lines-fill me-2 text-primary"></i> Clientes
                        </NavLink>
                    </div>
                    <div class="nav-item ps-4 py-0 border-start border-2 border-white">
                        <NavLink class="nav-link small py-0 px-2 text-start d-flex align-items-center" href="quotes" activeClass="bg-secondary text-white fw-semibold">
                            <i class="bi bi-receipt me-2 text-white"></i> Presupuesto
                        </NavLink>
                    </div>
                    <div class="nav-item ps-4 py-0 border-start border-2 border-white">
                        <NavLink class="nav-link small py-0 px-2 text-start d-flex align-items-center" href="sales/institutions/" activeClass="bg-secondary text-white fw-semibold">
                            <i class="bi bi-building me-2 text-info"></i> Instituciones
                        </NavLink>
                    </div>
                    <div class="nav-item ps-4 py-0 border-start border-2 border-white">
                        <NavLink class="nav-link small py-0 px-2 text-start d-flex align-items-center" href="sales/patients/" activeClass="bg-secondary text-white fw-semibold">
                            <i class="bi bi-person-heart me-2 text-danger"></i> Pacientes
                        </NavLink>
                    </div>
                    <div class="nav-item ps-4 py-0 border-start border-2 border-white">
                        <NavLink class="nav-link small py-0 px-2 text-start d-flex align-items-center" href="sales/products/" activeClass="bg-secondary text-white fw-semibold">
                            <i class="bi bi-box-seam me-2 text-warning"></i> Productos
                        </NavLink>
                    </div>
                    <div class="nav-item ps-4 py-0 border-start border-2 border-white">
                        <NavLink class="nav-link small py-0 px-2 text-start d-flex align-items-center" href="sales/professionals/" activeClass="bg-secondary text-white fw-semibold">
                            <i class="bi bi-person-badge me-2 text-info"></i> Profesionales
                        </NavLink>
                    </div>
                    <div class="nav-item ps-4 py-0 border-start border-2 border-white">
                        <NavLink class="nav-link small py-0 px-2 text-start d-flex align-items-center" href="sales/people/" activeClass="bg-secondary text-white fw-semibold">
                            <i class="bi bi-people me-2 text-success"></i> Vendedores
                        </NavLink>
                    </div>
                </ul>
            }
        </div>

        <div class="nav-item px-2 py-0">
            <NavLink class="nav-link text-white d-flex align-items-center gap-2 py-0 px-2" href="tickets/ticketform/" activeClass="bg-secondary text-white">
                <span class="oi oi-list-rich" aria-hidden="true"></span>
                @if (!navMenuService.Minimized)
                {
                    <label class="mb-0">Nuevo Ticket</label>
                }
            </NavLink>
        </div>
    </nav>
</div>

@code {
    private bool collapseNavMenu = true;
    private bool minimizeNavMenu = false;
    private bool expClientes = true;

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

    [Parameter]
    public EventCallback<bool> MinStatus { get; set; }

    [CascadingParameter]
    public IModalService Modal { get; set; } = default!;

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

    private async void ToggleIconMenu()
    {
        minimizeNavMenu = !minimizeNavMenu;
        await MinStatus.InvokeAsync(minimizeNavMenu);
    }
}