phronCare/phronCare.UIBlazor/Layout/NavMenu.razor

@inject NavMenuService navMenuService

<div class="sidebar-header navbar navbar-dark @(navMenuService.Minimized ? "brand-minimized" : string.Empty)">
    <div class="container-fluid">
        <a class="navbar-brand" href="" aria-label="Ir al inicio de PhronCare">
            <img src="images/SaludLAB.png" alt="" />
            @if (!navMenuService.Minimized)
            {
                <span class="brand-copy">
                    <span class="brand-name"><strong>Phron</strong>Care</span>
                    <small>by SaludLAB</small>
                </span>
            }
        </a>
        <button type="button" title="Abrir menú de navegación" aria-label="Abrir menú de navegación" class="navbar-toggler" @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</div>

<div class="@($"{NavMenuCssClass} nav-scrollable {(navMenuService.Minimized ? "nav-minimized" : string.Empty)}")" @onclick="ToggleNavMenu">
    <nav class="flex-column" aria-label="Navegación principal">
        <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="/" Match="NavLinkMatch.All" activeClass="bg-secondary text-white">
                <span class="oi oi-home" aria-hidden="true"></span>
                @if (!navMenuService.Minimized)
                {
                    <label class="mb-0">Inicio</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="ToggleStockMenu">
                <span class="oi oi-box" aria-hidden="true"></span>
                @if (!navMenuService.Minimized)
                {
                    <label class="mb-0">Stock</label>
                }
            </NavLink>

            @if (expStock && !navMenuService.Minimized)
            {
                <ul class="nav flex-column">
                    <!-- Expediciones -->
                    <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="expeditions" activeClass="bg-secondary text-white fw-semibold">
                            <span class="oi oi-data-transfer-download me-2 text-danger"></span> Expediciones
                        </NavLink>
                    </div>

                    <!-- Productos -->
                    <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="stock/products" activeClass="bg-secondary text-white fw-semibold">
                            <span class="oi oi-tags me-2 text-warning"></span> Productos
                        </NavLink>
                    </div>
                    <!-- Divisiones de productos -->
                    <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="stock/productdivisions" activeClass="bg-secondary text-white fw-semibold">
                            <span class="oi oi-grid-three-up me-2 text-info"></span> Divisiones
                        </NavLink>
                    </div>
                    <!-- Unidades de medida -->
                    <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="stock/units" activeClass="bg-secondary text-white fw-semibold">
                            <span class="oi oi-resize-both me-2 text-success"></span> Unidades
                        </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="stock/locations" activeClass="bg-secondary text-white fw-semibold">
                            <span class="oi oi-map-marker me-2 text-success"></span> Ubicaciones
                        </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="stock/current" activeClass="bg-secondary text-white fw-semibold">
                            <span class="oi oi-inbox me-2 text-info"></span> Stock actual
                        </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="stock/movements" activeClass="bg-secondary text-white fw-semibold">
                            <span class="oi oi-loop-circular me-2 text-primary"></span> Movimientos
                        </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="stock/consumes" activeClass="bg-secondary text-white fw-semibold">
                            <span class="oi oi-check me-2 text-secondary"></span> Consumos
                        </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" @onclick="ToggleSalesMenu">
                <span class="oi oi-briefcase" aria-hidden="true"></span>
                @if (!navMenuService.Minimized)
                {
                    <label class="mb-0">Ventas</label>
                }
            </NavLink>

            @if (expClientes && !navMenuService.Minimized)
            {
                <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/dashboard" 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="deliverynotes" activeClass="bg-secondary text-white fw-semibold">
                            <i class="bi bi-truck me-2 text-warning"></i> Remitos
                        </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="salesdocuments" activeClass="bg-secondary text-white fw-semibold">
                            <i class="bi bi-receipt-cutoff me-2 text-success"></i> Sales Documents
                        </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 class="sidebar-footer">
        @if (!navMenuService.Minimized)
        {
            <div class="client-context" title="Cliente de esta instancia">
                <img src="images/Icono.png" alt="" />
                <span><small>Entorno</small><strong>BIODEC</strong></span>
            </div>
        }
        <button type="button"
                class="collapse-control"
                title="@(navMenuService.Minimized ? "Expandir menú" : "Contraer menú")"
                aria-label="@(navMenuService.Minimized ? "Expandir menú lateral" : "Contraer menú lateral")"
                aria-pressed="@navMenuService.Minimized"
                @onclick:stopPropagation
                @onclick="ToggleIconMenu">
            <i class="fas @(navMenuService.Minimized ? "fa-eye-slash" : "fa-eye")" aria-hidden="true"></i>
            @if (!navMenuService.Minimized)
            {
                <span>Contraer menú</span>
            }
        </button>
    </div>
</div>

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

    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 Task ToggleStockMenu()
    {
        if (navMenuService.Minimized)
        {
            await MinStatus.InvokeAsync(false);
            expStock = true;
            return;
        }

        expStock = !expStock;
    }

    private async Task ToggleSalesMenu()
    {
        if (navMenuService.Minimized)
        {
            await MinStatus.InvokeAsync(false);
            expClientes = true;
            return;
        }

        expClientes = !expClientes;
    }

    private async Task ToggleIconMenu()
    {
        var minimized = !navMenuService.Minimized;
        if (minimized)
        {
            expStock = false;
            expClientes = false;
        }
        await MinStatus.InvokeAsync(minimized);
    }
}