98 lines
4.9 KiB
PHP
98 lines
4.9 KiB
PHP
<aside class="sidebar" id="sidebar" aria-label="Menú principal">
|
|
<div class="d-lg-none d-flex justify-content-end p-3">
|
|
<button class="btn-close" id="closeSidebarBtn" aria-label="Cerrar menú"></button>
|
|
</div>
|
|
|
|
<!-- Brand con logo.png -->
|
|
<div class="px-4 pt-4 pb-3">
|
|
<div class="d-flex align-items-center gap-3">
|
|
<img src="{{ asset('assets/img/logo.png') }}" alt="Tablero" class="logo-img rounded-3"
|
|
onerror="this.src='https://ui-avatars.com/api/?background=3b82f6&color=fff&bold=true&name=NX'; this.classList.add('bg-primary','bg-opacity-25');">
|
|
<span class="shimmer-text font-display fs-2 fw-bold">Tablero</span>
|
|
</div>
|
|
<p class="text-secondary-emphasis small mt-2 opacity-50">Globo Puerto Teotihuacan</p>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="flex-grow-1 px-3" aria-label="Navegación principal">
|
|
<div class="small text-uppercase fw-bold text-secondary px-3 pb-2">Principal</div>
|
|
|
|
<a href="{{ route('home') }}"
|
|
class="nav-item-custom d-flex align-items-center gap-3 px-3 py-2 rounded-3 bg-primary bg-opacity-10 text-primary fw-semibold mb-1 text-decoration-none"
|
|
aria-current="page">
|
|
<i class="bi bi-compass" aria-hidden="true"></i>
|
|
<span>Dashboard</span>
|
|
<span class="ms-auto small bg-primary bg-opacity-25 px-2 py-0 rounded-pill fw-bold">Live</span>
|
|
</a>
|
|
|
|
<a href="{{ route('dashboard.vuelos') }}"
|
|
class="nav-item-custom d-flex align-items-center gap-3 px-3 py-2 rounded-3 text-secondary-emphasis text-decoration-none mb-1">
|
|
<i class="bi bi-bar-chart-steps" aria-hidden="true"></i>
|
|
<span>Vuelos</span>
|
|
</a>
|
|
|
|
<a href="#"
|
|
class="nav-item-custom d-flex align-items-center gap-3 px-3 py-2 rounded-3 text-secondary-emphasis text-decoration-none mb-1">
|
|
<i class="bi bi-bar-chart-steps" aria-hidden="true"></i>
|
|
<span>Banner Principal</span>
|
|
</a>
|
|
|
|
<a href="#"
|
|
class="nav-item-custom d-flex align-items-center gap-3 px-3 py-2 rounded-3 text-secondary-emphasis text-decoration-none mb-1">
|
|
<i class="bi bi-bar-chart-steps" aria-hidden="true"></i>
|
|
<span>Vuelos Banner Principal</span>
|
|
</a>
|
|
|
|
|
|
|
|
<div class="small text-uppercase fw-bold text-secondary px-3 pt-4 pb-2">Favoritos</div>
|
|
|
|
<a href="#"
|
|
class="nav-item-custom d-flex align-items-center gap-3 px-3 py-2 rounded-3 text-secondary-emphasis text-decoration-none mb-1">
|
|
<i class="bi bi-star-fill text-warning small" aria-hidden="true"></i>
|
|
<span>Reporte Q2</span>
|
|
</a>
|
|
|
|
<a href="#"
|
|
class="nav-item-custom d-flex align-items-center gap-3 px-3 py-2 rounded-3 text-secondary-emphasis text-decoration-none">
|
|
<i class="bi bi-star-fill text-warning small" aria-hidden="true"></i>
|
|
<span>Pipeline ventas</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<!-- User Card -->
|
|
@php
|
|
$nombreCompleto = auth()->user()->name;
|
|
$partes = explode(' ', trim($nombreCompleto));
|
|
|
|
$inicialNombre = strtoupper(substr($partes[0], 0, 1));
|
|
$inicialApellido = isset($partes[1]) ? strtoupper(substr($partes[1], 0, 1)) : '';
|
|
|
|
$iniciales = $inicialNombre . $inicialApellido;
|
|
@endphp
|
|
<div class="mx-3 mb-4 p-3 rounded-4"
|
|
style="background: linear-gradient(135deg, #eff6ff, #eef2ff); border: 1px solid rgba(99,102,241,0.2);">
|
|
<div class="d-flex align-items-center gap-3">
|
|
<img src="https://ui-avatars.com/api/?background=3b82f6&color=fff&rounded=true&bold=true&size=44&name={{ $iniciales }}"
|
|
class="rounded-3 avatar-ring" style="width: 44px; height: 44px;" alt="Avatar de Juan Pérez">
|
|
<div class="flex-grow-1">
|
|
<p class="fw-semibold text-dark mb-0">{{ auth()->user()->name }}</p>
|
|
<p class="small text-secondary mb-0">{{ auth()->user()->email }}</p>
|
|
</div>
|
|
<button class="btn btn-link text-secondary p-1" aria-label="Opciones de usuario">
|
|
<i class="bi bi-three-dots-vertical" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
<div class="mt-3">
|
|
<div class="d-flex justify-content-between mb-1">
|
|
<span class="small text-secondary">Plan Pro</span>
|
|
<span class="small fw-bold text-primary">68%</span>
|
|
</div>
|
|
<div class="progress" style="height: 6px;">
|
|
<div class="progress-bar progress-bar-animated bg-primary" style="--w: 68%; width: 68%;"
|
|
role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|