Preparando proyecto para migración a repositorio MVE
This commit is contained in:
@@ -1,91 +1,618 @@
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
/* Estilos inspirados en Tailwind */
|
||||
.sidebar-container { background-color: #f9fafb; border-right: 1px solid #e5e7eb; }
|
||||
.sidebar-dark { background-color: #1f2937; border-right: 1px solid #374151; }
|
||||
.sidebar-nav .nav-link { color: #374151; font-weight: 500; padding: 0.5rem 0.75rem; margin-bottom: 0.125rem;
|
||||
border-radius: 0.5rem; transition: all 0.15s ease-in-out; display: flex; align-items: center; }
|
||||
.sidebar-nav .nav-link:hover { background-color: #f3f4f6; color: #111827; }
|
||||
.sidebar-nav .nav-link.active { background-color: #f3f4f6; color: #111827; }
|
||||
.sidebar-nav .nav-link .icon { width: 1.25rem; height: 1.25rem; margin-right: 0.75rem; color: #6b7280; transition: color 0.15s ease-in-out; flex-shrink: 0; }
|
||||
.sidebar-nav .nav-link:hover .icon,
|
||||
.sidebar-nav .nav-link.active .icon { color: #374151; }
|
||||
.sidebar-nav .badge { background-color: #f3f4f6; color: #374151; font-size: 0.75rem; font-weight: 500; padding: 0.25rem 0.5rem; border-radius: 9999px; margin-left: auto; }
|
||||
.sidebar-nav .badge.badge-primary { background-color: #dbeafe; color: #1e40af; }
|
||||
.submenu .nav-link { padding-left: 2.75rem; color: #6b7280; font-weight: 400; }
|
||||
.submenu .nav-link:hover { background-color: #f3f4f6; color: #374151; }
|
||||
.submenu .nav-link.active { background-color: #f3f4f6; color: #374151; }
|
||||
.collapse-icon { width: 0.75rem; height: 0.75rem; margin-left: auto; transition: transform 0.15s ease-in-out; }
|
||||
.nav-link[aria-expanded="true"] .collapse-icon { transform: rotate(180deg); }
|
||||
/* Estilos para modo oscuro */
|
||||
.sidebar-dark .sidebar-nav .nav-link { color: #d1d5db; }
|
||||
.sidebar-dark .sidebar-nav .nav-link:hover { background-color: #374151; color: #ffffff; }
|
||||
.sidebar-dark .sidebar-nav .nav-link.active { background-color: #374151; color: #ffffff; }
|
||||
.sidebar-dark .sidebar-nav .nav-link .icon { color: #9ca3af; }
|
||||
.sidebar-dark .sidebar-nav .nav-link:hover .icon,
|
||||
.sidebar-dark .sidebar-nav .nav-link.active .icon { color: #ffffff; }
|
||||
.sidebar-dark .sidebar-nav .badge { background-color: #374151; color: #d1d5db; }
|
||||
.sidebar-dark .sidebar-nav .badge.badge-primary { background-color: #1e3a8a; color: #93c5fd; }
|
||||
.sidebar-dark .submenu .nav-link { color: #9ca3af; }
|
||||
.sidebar-dark .submenu .nav-link:hover { background-color: #374151; color: #d1d5db; }
|
||||
.sidebar-dark .submenu .nav-link.active { background-color: #374151; color: #d1d5db; }
|
||||
/* Navbar */
|
||||
.navbar-brand { font-weight: 600; font-size: 1.125rem; }
|
||||
.menu-toggle { border: 1px solid #6b7280; border-radius: 0.5rem; padding: 0.5rem; transition: all 0.15s ease-in-out; }
|
||||
.menu-toggle:hover { background-color: #f3f4f6; }
|
||||
/* Offcanvas para móviles */
|
||||
.offcanvas { background-color: #ffffff; }
|
||||
.offcanvas-header { border-bottom: 1px solid #e5e7eb; padding: 1rem 1.5rem; }
|
||||
.offcanvas-title { font-weight: 600; font-size: 1.125rem; color: #111827; }
|
||||
.offcanvas-body { padding: 1rem 1.5rem; }
|
||||
/* Responsive adjustments */
|
||||
/* Variables CSS para un diseño profesional limpio */
|
||||
:root {
|
||||
--sidebar-bg: #ffffff;
|
||||
--sidebar-width: 280px;
|
||||
--navbar-height: 70px;
|
||||
--primary-color: #3b82f6;
|
||||
--primary-dark: #2563eb;
|
||||
--text-primary: #1f2937;
|
||||
--text-secondary: #6b7280;
|
||||
--text-muted: #9ca3af;
|
||||
--text-light: #ffffff;
|
||||
--bg-hover: #f8fafc;
|
||||
--bg-active: #f1f5f9;
|
||||
--bg-selected: #eff6ff;
|
||||
--border-color: #e5e7eb;
|
||||
--border-light: #f3f4f6;
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
|
||||
--shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08);
|
||||
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--navbar-bg: linear-gradient(135deg, var(--primary, #0f172a) 0%, var(--secondary, #334155) 100%);
|
||||
}
|
||||
|
||||
/* Reset y fuentes base */
|
||||
* {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
/* Asegurar espacio para navbar fijo */
|
||||
body {
|
||||
padding-top: var(--navbar-height) !important;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
/* Prevenir que otros estilos interfieran con el navbar */
|
||||
html, body {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Reset específico para el navbar */
|
||||
.navbar-professional * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Asegurar que ningún elemento padre afecte el posicionamiento */
|
||||
.navbar-professional {
|
||||
transform: none !important;
|
||||
will-change: auto !important;
|
||||
}
|
||||
|
||||
/* Estilos del contenedor principal del sidebar */
|
||||
.sidebar-container {
|
||||
background: var(--sidebar-bg);
|
||||
border-right: 1px solid var(--border-color);
|
||||
box-shadow: var(--shadow-lg);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.01) 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Estilos de navegación mejorados */
|
||||
.sidebar-nav {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sidebar-nav .nav-item {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.sidebar-nav .nav-link {
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
font-size: 0.95rem;
|
||||
padding: 14px 20px;
|
||||
border-radius: 12px;
|
||||
transition: var(--transition);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
margin: 0 12px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.sidebar-nav .nav-link::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 4px;
|
||||
height: 0;
|
||||
background: var(--primary-color);
|
||||
border-radius: 2px;
|
||||
transition: height 0.3s ease;
|
||||
}
|
||||
|
||||
.sidebar-nav .nav-link:hover {
|
||||
background: var(--bg-hover);
|
||||
border-color: var(--border-light);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-sm);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.sidebar-nav .nav-link:hover::before {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.sidebar-nav .nav-link.active {
|
||||
background: var(--bg-selected);
|
||||
border-color: var(--primary-color);
|
||||
border-color: rgba(59, 130, 246, 0.2);
|
||||
box-shadow: var(--shadow-sm);
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.sidebar-nav .nav-link.active::before {
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
/* Iconos mejorados */
|
||||
.sidebar-nav .nav-link .icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin-right: 16px;
|
||||
color: var(--text-secondary);
|
||||
transition: var(--transition);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar-nav .nav-link:hover .icon {
|
||||
color: var(--text-primary);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.sidebar-nav .nav-link.active .icon {
|
||||
color: var(--primary-color);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Badges modernos */
|
||||
.sidebar-nav .badge {
|
||||
background: var(--border-light);
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
padding: 6px 10px;
|
||||
border-radius: 20px;
|
||||
margin-left: auto;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.sidebar-nav .badge.badge-primary {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
color: var(--primary-color);
|
||||
border-color: rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
/* Submenús mejorados */
|
||||
.submenu {
|
||||
padding-left: 0;
|
||||
margin-top: 8px;
|
||||
border-left: 2px solid var(--border-color);
|
||||
margin-left: 32px;
|
||||
}
|
||||
|
||||
.submenu .nav-link {
|
||||
padding: 10px 20px 10px 24px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 400;
|
||||
color: var(--text-secondary);
|
||||
margin: 0 12px 0 0;
|
||||
border-radius: 0 10px 10px 0;
|
||||
}
|
||||
|
||||
.submenu .nav-link::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.submenu .nav-link:hover {
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.submenu .nav-link.active {
|
||||
color: var(--primary-color);
|
||||
background: var(--bg-selected);
|
||||
}
|
||||
|
||||
/* Iconos de colapso mejorados */
|
||||
.collapse-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: auto;
|
||||
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.nav-link:hover .collapse-icon {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.nav-link[aria-expanded="true"] .collapse-icon {
|
||||
transform: rotate(180deg);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* Navbar profesional con posicionamiento reforzado */
|
||||
.navbar-professional {
|
||||
background: var(--navbar-bg) !important;
|
||||
height: var(--navbar-height) !important;
|
||||
box-shadow: var(--shadow-md) !important;
|
||||
border: none !important;
|
||||
backdrop-filter: blur(10px);
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
width: 100% !important;
|
||||
z-index: 9999 !important;
|
||||
overflow: hidden;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* Forzar que el navbar siempre esté en la parte superior */
|
||||
.navbar-professional.fixed-top {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
z-index: 9999 !important;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-weight: 700;
|
||||
font-size: 1.4rem;
|
||||
color: var(--text-light) !important;
|
||||
letter-spacing: -0.5px;
|
||||
margin-bottom: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.navbar-brand .highlight {
|
||||
color: #ffd700;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* Contenedor del navbar reforzado */
|
||||
.navbar-professional .container-fluid {
|
||||
padding-left: 1rem !important;
|
||||
padding-right: 1rem !important;
|
||||
margin: 0 !important;
|
||||
width: 100% !important;
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
/* Botón de menú mejorado */
|
||||
.menu-toggle {
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 10px;
|
||||
padding: 10px 12px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: var(--text-light);
|
||||
font-size: 1.2rem;
|
||||
transition: var(--transition);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.menu-toggle:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Botones de acción mejorados */
|
||||
.btn-professional {
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
transition: var(--transition);
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.btn-outline-light-professional {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
color: var(--text-light);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.btn-outline-light-professional:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
color: var(--text-light);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
/* Estilos para el contenido de bienvenida */
|
||||
.welcome-container {
|
||||
flex-shrink: 0;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.welcome-text {
|
||||
font-size: 0.95rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 200px;
|
||||
color: white !important;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
#navbar-content {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Offcanvas mejorado */
|
||||
.offcanvas-professional {
|
||||
background: var(--sidebar-bg);
|
||||
border: none;
|
||||
border-left: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.offcanvas-header {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 1.5rem;
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.offcanvas-title {
|
||||
font-weight: 700;
|
||||
font-size: 1.3rem;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
|
||||
.btn-close-white-professional {
|
||||
background: var(--border-light);
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
transition: var(--transition);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.btn-close-white-professional:hover {
|
||||
background: var(--border-color);
|
||||
transform: scale(1.1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.offcanvas-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
/* Efectos de scroll personalizado */
|
||||
.sidebar-scroll::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar-track {
|
||||
background: var(--border-light);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar-thumb {
|
||||
background: var(--border-color);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.sidebar-scroll::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Separadores visuales */
|
||||
.nav-separator {
|
||||
height: 1px;
|
||||
background: var(--border-color);
|
||||
margin: 16px 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-separator::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background: var(--text-muted);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
/* Animaciones mejoradas */
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.nav-item:nth-child(1) { animation-delay: 0.05s; }
|
||||
.nav-item:nth-child(2) { animation-delay: 0.1s; }
|
||||
.nav-item:nth-child(3) { animation-delay: 0.15s; }
|
||||
.nav-item:nth-child(4) { animation-delay: 0.2s; }
|
||||
.nav-item:nth-child(5) { animation-delay: 0.25s; }
|
||||
.nav-item:nth-child(6) { animation-delay: 0.3s; }
|
||||
.nav-item:nth-child(7) { animation-delay: 0.35s; }
|
||||
.nav-item:nth-child(8) { animation-delay: 0.4s; }
|
||||
.nav-item:nth-child(9) { animation-delay: 0.45s; }
|
||||
.nav-item:nth-child(10) { animation-delay: 0.5s; }
|
||||
|
||||
/* Responsive mejorado */
|
||||
@media (max-width: 767.98px) {
|
||||
.sidebar-nav .nav-link { color: #374151; }
|
||||
.sidebar-nav .nav-link:hover { background-color: #f3f4f6; color: #111827; }
|
||||
.sidebar-nav .nav-link.active { background-color: #f3f4f6; color: #111827; }
|
||||
:root {
|
||||
--navbar-height: 60px;
|
||||
}
|
||||
|
||||
.navbar-professional {
|
||||
height: 60px;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.navbar-professional .container-fluid {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 1.0rem;
|
||||
flex-shrink: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.navbar-brand span:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
padding: 6px 8px;
|
||||
margin-right: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.welcome-text {
|
||||
font-size: 0.85rem;
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.welcome-container {
|
||||
flex-shrink: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sidebar-nav .nav-link {
|
||||
margin: 0 8px;
|
||||
padding: 12px 16px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.offcanvas-professional {
|
||||
width: 280px !important;
|
||||
}
|
||||
|
||||
#navbar-content {
|
||||
flex-shrink: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* Para pantallas muy pequeñas */
|
||||
@media (max-width: 575.98px) {
|
||||
.navbar-brand {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.welcome-text {
|
||||
font-size: 0.8rem;
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
.navbar-professional .container-fluid {
|
||||
padding-left: 0.25rem;
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Estados especiales */
|
||||
.nav-link.loading {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.nav-link.loading .icon {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- NAVBAR -->
|
||||
<nav class="navbar navbar-dark bg-dark fixed-top">
|
||||
<div class="container-fluid">
|
||||
<!-- Botón de menú para móviles -->
|
||||
<button class="menu-toggle d-md-none me-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu">
|
||||
☰
|
||||
</button>
|
||||
<span class="navbar-brand">SIIH | Administrador</span>
|
||||
<div class="d-flex ms-auto text-white">
|
||||
<div id="navbar-content">
|
||||
<!-- NAVBAR PROFESIONAL -->
|
||||
<nav class="navbar navbar-professional fixed-top navbar-dark">
|
||||
<div class="container-fluid px-4 h-100">
|
||||
<div class="d-flex align-items-center justify-content-between w-100 h-100">
|
||||
<!-- Lado izquierdo: Menú + Brand -->
|
||||
<div class="d-flex align-items-center h-100">
|
||||
<!-- Botón de menú para móviles -->
|
||||
<button class="menu-toggle d-md-none me-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Brand mejorado -->
|
||||
<div class="navbar-brand d-flex align-items-center mb-0">
|
||||
<svg class="me-2" width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
|
||||
</svg>
|
||||
<span>SIIH <span class="highlight">|</span> Administrador</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lado derecho: Contenido del navbar -->
|
||||
<div class="d-flex align-items-center h-100">
|
||||
<?php
|
||||
// Verifica si estás en el dashboard principal del administrador
|
||||
$esDashboard = str_contains($_SERVER['REQUEST_URI'], '/administrador/dashboard');
|
||||
|
||||
if ($esDashboard): ?>
|
||||
<span id="welcome-text">Bienvenido, <?= htmlspecialchars($_SESSION['usuario_nombre']) ?></span>
|
||||
<div class="welcome-container">
|
||||
<svg class="me-2 d-none d-sm-block" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
||||
<circle cx="12" cy="7" r="4"></circle>
|
||||
</svg>
|
||||
<span id="welcome-text" class="welcome-text">Bienvenido, <?= htmlspecialchars($_SESSION['usuario_nombre']) ?></span>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<a href="/IMPORTADORES/sistemas/logout" class="btn btn-outline-light btn-sm ms-2 W-auto btn-animated" id="logout-btn">Cerrar Sesión</a>
|
||||
<a href="/IMPORTADORES/sistemas/logout"
|
||||
class="btn btn-outline-light-professional btn-professional d-flex align-items-center"
|
||||
id="logout-btn">
|
||||
<svg class="me-2" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
|
||||
<polyline points="16,17 21,12 16,7"></polyline>
|
||||
<line x1="21" y1="12" x2="9" y2="12"></line>
|
||||
</svg>
|
||||
Cerrar Sesión
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- SIDEBAR FIJA (escritorio) -->
|
||||
<div class="d-none d-md-block sidebar-container sidebar-dark position-fixed h-100" style="width: 250px; top: 0; padding-top: 4rem; z-index: 1000;">
|
||||
<!-- SIDEBAR PROFESIONAL (escritorio) -->
|
||||
<div class="d-none d-md-block sidebar-container position-fixed h-100 sidebar-scroll" style="width: var(--sidebar-width); top: 0; padding-top: var(--navbar-height); z-index: 1000;">
|
||||
<div class="px-3 py-4 h-100 overflow-y-auto">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="nav flex-column">
|
||||
<!-- INICIO -->
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/administrador/dashboard" class="nav-link active">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 22 21">
|
||||
<path d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z"/>
|
||||
<path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z"/>
|
||||
<svg class="icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/>
|
||||
<polyline points="9,22 9,12 15,12 15,22"/>
|
||||
</svg>
|
||||
<span>Inicio</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<div class="nav-separator"></div>
|
||||
<!-- AGENCIAS -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#submenuAgencias" role="button" aria-expanded="false">
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
386
views/partials/sidebar_agencia_old.php
Normal file
386
views/partials/sidebar_agencia_old.php
Normal file
@@ -0,0 +1,386 @@
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
/* Estilos inspirados en Tailwind */
|
||||
.sidebar-container { background-color: #f9fafb; border-right: 1px solid #e5e7eb; }
|
||||
.sidebar-dark { background-color: #1f2937; border-right: 1px solid #374151; }
|
||||
.sidebar-nav .nav-link { color: #374151; font-weight: 500; padding: 0.5rem 0.75rem; margin-bottom: 0.125rem;
|
||||
border-radius: 0.5rem; transition: all 0.15s ease-in-out; display: flex; align-items: center; }
|
||||
.sidebar-nav .nav-link:hover { background-color: #f3f4f6; color: #111827; }
|
||||
.sidebar-nav .nav-link.active { background-color: #f3f4f6; color: #111827; }
|
||||
.sidebar-nav .nav-link .icon { width: 1.25rem; height: 1.25rem; margin-right: 0.75rem; color: #6b7280; transition: color 0.15s ease-in-out; flex-shrink: 0; }
|
||||
.sidebar-nav .nav-link:hover .icon,
|
||||
.sidebar-nav .nav-link.active .icon { color: #374151; }
|
||||
.sidebar-nav .badge { background-color: #f3f4f6; color: #374151; font-size: 0.75rem; font-weight: 500; padding: 0.25rem 0.5rem; border-radius: 9999px; margin-left: auto; }
|
||||
.sidebar-nav .badge.badge-primary { background-color: #dbeafe; color: #1e40af; }
|
||||
.submenu .nav-link { padding-left: 2.75rem; color: #6b7280; font-weight: 400; }
|
||||
.submenu .nav-link:hover { background-color: #f3f4f6; color: #374151; }
|
||||
.submenu .nav-link.active { background-color: #f3f4f6; color: #374151; }
|
||||
.collapse-icon { width: 0.75rem; height: 0.75rem; margin-left: auto; transition: transform 0.15s ease-in-out; }
|
||||
.nav-link[aria-expanded="true"] .collapse-icon { transform: rotate(180deg); }
|
||||
/* Estilos para modo oscuro */
|
||||
.sidebar-dark .sidebar-nav .nav-link { color: #d1d5db; }
|
||||
.sidebar-dark .sidebar-nav .nav-link:hover { background-color: #374151; color: #ffffff; }
|
||||
.sidebar-dark .sidebar-nav .nav-link.active { background-color: #374151; color: #ffffff; }
|
||||
.sidebar-dark .sidebar-nav .nav-link .icon { color: #9ca3af; }
|
||||
.sidebar-dark .sidebar-nav .nav-link:hover .icon,
|
||||
.sidebar-dark .sidebar-nav .nav-link.active .icon { color: #ffffff; }
|
||||
.sidebar-dark .sidebar-nav .badge { background-color: #374151; color: #d1d5db; }
|
||||
.sidebar-dark .sidebar-nav .badge.badge-primary { background-color: #1e3a8a; color: #93c5fd; }
|
||||
.sidebar-dark .submenu .nav-link { color: #9ca3af; }
|
||||
.sidebar-dark .submenu .nav-link:hover { background-color: #374151; color: #d1d5db; }
|
||||
.sidebar-dark .submenu .nav-link.active { background-color: #374151; color: #d1d5db; }
|
||||
/* Navbar */
|
||||
.navbar-brand { font-weight: 600; font-size: 1.125rem; }
|
||||
.menu-toggle { border: 1px solid #6b7280; border-radius: 0.5rem; padding: 0.5rem; transition: all 0.15s ease-in-out; }
|
||||
.menu-toggle:hover { background-color: #f3f4f6; }
|
||||
/* Offcanvas para móviles */
|
||||
.offcanvas { background-color: #ffffff; }
|
||||
.offcanvas-header { border-bottom: 1px solid #e5e7eb; padding: 1rem 1.5rem; }
|
||||
.offcanvas-title { font-weight: 600; font-size: 1.125rem; color: #111827; }
|
||||
.offcanvas-body { padding: 1rem 1.5rem; }
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 767.98px) {
|
||||
.sidebar-nav .nav-link { color: #374151; }
|
||||
.sidebar-nav .nav-link:hover { background-color: #f3f4f6; color: #111827; }
|
||||
.sidebar-nav .nav-link.active { background-color: #f3f4f6; color: #111827; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- 🔷 NAVBAR -->
|
||||
<nav class="navbar navbar-dark bg-dark fixed-top">
|
||||
<div class="container-fluid">
|
||||
<!-- Botón de menú para móviles -->
|
||||
<button class="menu-toggle d-md-none me-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu">
|
||||
☰
|
||||
</button>
|
||||
<span class="navbar-brand">SIIH | Agencia Aduanal</span>
|
||||
<div class="d-flex ms-auto text-white">
|
||||
<div class="navbar-content">
|
||||
<?php
|
||||
// Verifica si estás en el dashboard principal del importador
|
||||
$esDashboard = str_contains($_SERVER['REQUEST_URI'], '/IMPORTADORES/agencias/dashboard');
|
||||
|
||||
if ($esDashboard): ?>
|
||||
<span id="welcome-text">Bienvenido, <?= htmlspecialchars($_SESSION['usuario_nombre']) ?></span>
|
||||
<?php else: ?>
|
||||
<a href="/IMPORTADORES/sistemas/logout" class="btn btn-outline-light btn-sm ms-2 W-auto btn-animated">Cerrar Sesión</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- SIDEBAR FIJA (escritorio) -->
|
||||
<div class="d-none d-md-block sidebar-container sidebar-dark position-fixed h-100" style="width: 250px; top: 0; padding-top: 4rem; z-index: 1000;">
|
||||
<div class="px-3 py-4 h-100 overflow-y-auto">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="nav flex-column">
|
||||
<!-- INICIO -->
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/agencias/dashboard" class="nav-link active">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 22 21">
|
||||
<path d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z"/>
|
||||
<path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z"/>
|
||||
</svg>
|
||||
<span>Inicio</span>
|
||||
</a>
|
||||
</li>
|
||||
<!-- SOLICITUDES VINCULACIÓN -->
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/vinculaciones/solicitudesVinculacion" class="nav-link">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5z"/>
|
||||
<path d="M7.414 15.414a2 2 0 01-2.828-2.828l3-3a2 2 0 012.828 0 1 1 0 001.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5z"/>
|
||||
</svg>
|
||||
<span>Vinculación</span>
|
||||
</a>
|
||||
</li>
|
||||
<!-- USUARIOS VINCULADOS -->
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/vinculaciones/vinculacionesAgencia" class="nav-link">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z"/>
|
||||
</svg>
|
||||
<span>Usuarios Vinculados</span>
|
||||
</a>
|
||||
</li>
|
||||
<!-- Patentes -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#submenuPatentesDesktop" role="button" aria-expanded="false" aria-controls="submenuPatentesDesktop">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<span>Patentes</span>
|
||||
<svg class="collapse-icon" fill="none" stroke="currentColor" viewBox="0 0 10 6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
|
||||
</svg>
|
||||
</a>
|
||||
<div class="collapse" id="submenuPatentesDesktop">
|
||||
<ul class="nav flex-column submenu">
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/patente/lista" class="nav-link">
|
||||
Ver Patentes
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/patente/alta" class="nav-link">
|
||||
Nueva Patente
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- LOCACIONES -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#submenuLocacionesDesktop" role="button" aria-expanded="false" aria-controls="submenuLocacionesDesktop">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 2C6.686 2 4 4.686 4 8c0 5.25 6 12 6 12s6-6.75 6-12c0-3.314-2.686-6-6-6zm0 8c-1.105 0-2-.895-2-2s.895-2 2-2 2 .895 2 2-.895 2-2 2z"/>
|
||||
</svg>
|
||||
<span>Locaciones</span>
|
||||
<svg class="collapse-icon" fill="none" stroke="currentColor" viewBox="0 0 10 6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
|
||||
</svg>
|
||||
</a>
|
||||
<div class="collapse" id="submenuLocacionesDesktop">
|
||||
<ul class="nav flex-column submenu">
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/locaciones/lista" class="nav-link">
|
||||
Ver Locaciones
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/locaciones/alta" class="nav-link">
|
||||
Agregar Locaciones
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- ALTA DE AGENTES -->
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/agencias/alta" class="nav-link">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<span>Alta de agentes</span>
|
||||
</a>
|
||||
</li>
|
||||
<!-- CONFIGURACIÓN -->
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/configuracion" class="nav-link">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M11.983 1.034a1 1 0 00-1.966 0l-.26 1.857a6.996 6.996 0 00-1.223.51l-1.7-1.04a1 1 0 00-1.366.366l-1 1.732a1 1 0 00.366 1.366l1.7 1.04a6.984 6.984 0 000 1.02l-1.7 1.04a1 1 0 00-.366 1.366l1 1.732a1 1 0 001.366.366l1.7-1.04c.392.212.803.386 1.223.51l.26 1.857a1 1 0 001.966 0l.26-1.857c.42-.124.831-.298 1.223-.51l1.7 1.04a1 1 0 001.366-.366l1-1.732a1 1 0 00-.366-1.366l-1.7-1.04a6.984 6.984 0 000-1.02l1.7-1.04a1 1 0 00.366-1.366l-1-1.732a1 1 0 00-1.366-.366l-1.7 1.04a6.996 6.996 0 00-1.223-.51l-.26-1.857zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<span>Configuración</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- OFFCANVAS PARA MÓVILES -->
|
||||
<div class="offcanvas offcanvas-start d-md-none" tabindex="-1" id="sidebarMenu" style="top: 0; width: 250px;">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title">Menú</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="nav flex-column">
|
||||
<!-- INICIO -->
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/agentes/dashboard" class="nav-link active">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 22 21">
|
||||
<path d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z"/>
|
||||
<path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z"/>
|
||||
</svg>
|
||||
<span>Inicio</span>
|
||||
</a>
|
||||
</li>
|
||||
<!-- SOLICITUDES VINCULACIÓN -->
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/vinculaciones/solicitudesVinculacion" class="nav-link">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5z"/>
|
||||
<path d="M7.414 15.414a2 2 0 01-2.828-2.828l3-3a2 2 0 012.828 0 1 1 0 001.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5z"/>
|
||||
</svg>
|
||||
<span>Vinculación</span>
|
||||
</a>
|
||||
</li>
|
||||
<!-- USUARIOS VINCULADOS -->
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/vinculaciones/vinculacionesAgencia" class="nav-link">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z"/>
|
||||
</svg>
|
||||
<span>Usuarios Vinculados</span>
|
||||
</a>
|
||||
</li>
|
||||
<!-- Patentes -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#submenuPatentesMobile" role="button" aria-expanded="false" aria-controls="submenuPatentesMobile">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<span>Patentes</span>
|
||||
<svg class="collapse-icon" fill="none" stroke="currentColor" viewBox="0 0 10 6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
|
||||
</svg>
|
||||
</a>
|
||||
<div class="collapse" id="submenuPatentesMobile">
|
||||
<ul class="nav flex-column submenu">
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/patente/lista" class="nav-link">
|
||||
Ver Patentes
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/patente/alta" class="nav-link">
|
||||
Nueva Patente
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- LOCACIONES -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#submenuLocacionesMobile" role="button" aria-expanded="false" aria-controls="submenuLocacionesMobile">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 2C6.686 2 4 4.686 4 8c0 5.25 6 12 6 12s6-6.75 6-12c0-3.314-2.686-6-6-6zm0 8c-1.105 0-2-.895-2-2s.895-2 2-2 2 .895 2 2-.895 2-2 2z"/>
|
||||
</svg>
|
||||
<span>Locaciones</span>
|
||||
<svg class="collapse-icon" fill="none" stroke="currentColor" viewBox="0 0 10 6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
|
||||
</svg>
|
||||
</a>
|
||||
<div class="collapse" id="submenuLocacionesMobile">
|
||||
<ul class="nav flex-column submenu">
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/locaciones/lista" class="nav-link">
|
||||
Ver Locaciones
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/locaciones/alta" class="nav-link">
|
||||
Agregar Locaciones
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- ALTA DE AGENTES -->
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/agencias/alta" class="nav-link">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<span>Alta de agentes</span>
|
||||
</a>
|
||||
</li>
|
||||
<!-- CONFIGURACIÓN -->
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/configuracion" class="nav-link">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M11.983 1.034a1 1 0 00-1.966 0l-.26 1.857a6.996 6.996 0 00-1.223.51l-1.7-1.04a1 1 0 00-1.366.366l-1 1.732a1 1 0 00.366 1.366l1.7 1.04a6.984 6.984 0 000 1.02l-1.7 1.04a1 1 0 00-.366 1.366l1 1.732a1 1 0 001.366.366l1.7-1.04c.392.212.803.386 1.223.51l.26 1.857a1 1 0 001.966 0l.26-1.857c.42-.124.831-.298 1.223-.51l1.7 1.04a1 1 0 001.366-.366l1-1.732a1 1 0 00-.366-1.366l-1.7-1.04a6.984 6.984 0 000-1.02l1.7-1.04a1 1 0 00.366-1.366l-1-1.732a1 1 0 00-1.366-.366l-1.7 1.04a6.996 6.996 0 00-1.223-.51l-.26-1.857zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<span>Configuración</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
// Simular lógica de dashboard
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const esDashboard = window.location.pathname.includes('/agencias/dashboard');
|
||||
const welcomeText = document.getElementById('welcome-text');
|
||||
const logoutBtn = document.getElementById('logout-btn');
|
||||
|
||||
if (!esDashboard) {
|
||||
if (welcomeText) {
|
||||
welcomeText.style.display = 'none';
|
||||
}
|
||||
if (logoutBtn) {
|
||||
logoutBtn.style.display = 'inline-block';
|
||||
}
|
||||
}
|
||||
|
||||
// Manejar estados activos basados en URL actual
|
||||
const currentPath = window.location.pathname;
|
||||
const navLinks = document.querySelectorAll('.nav-link');
|
||||
|
||||
navLinks.forEach(link => {
|
||||
const href = link.getAttribute('href');
|
||||
if (href && currentPath.includes(href)) {
|
||||
link.classList.add('active');
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(trigger => {
|
||||
// Desactivar Bootstrap
|
||||
trigger.removeAttribute('data-bs-toggle');
|
||||
|
||||
// Inicializar estado correcto
|
||||
const target = document.querySelector(trigger.getAttribute('href'));
|
||||
if (target) {
|
||||
target.style.transition = 'height 0.3s ease, opacity 0.2s ease';
|
||||
target.style.overflow = 'hidden';
|
||||
|
||||
if (!target.classList.contains('show')) {
|
||||
target.style.height = '0';
|
||||
target.style.opacity = '0';
|
||||
}
|
||||
}
|
||||
|
||||
trigger.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
const icon = this.querySelector('.collapse-icon');
|
||||
|
||||
if (!target) return;
|
||||
|
||||
const isExpanding = this.getAttribute('aria-expanded') !== 'true';
|
||||
|
||||
if (isExpanding) {
|
||||
// Abrir
|
||||
target.classList.add('show');
|
||||
target.style.height = '0';
|
||||
target.style.opacity = '0';
|
||||
target.style.display = 'block';
|
||||
|
||||
// Forzar reflow
|
||||
void target.offsetHeight;
|
||||
|
||||
target.style.height = target.scrollHeight + 'px';
|
||||
target.style.opacity = '1';
|
||||
|
||||
this.setAttribute('aria-expanded', 'true');
|
||||
if (icon) icon.style.transform = 'rotate(180deg)';
|
||||
} else {
|
||||
// Cerrar
|
||||
target.style.height = target.scrollHeight + 'px';
|
||||
target.style.opacity = '1';
|
||||
|
||||
// Forzar reflow
|
||||
void target.offsetHeight;
|
||||
|
||||
target.style.height = '0';
|
||||
target.style.opacity = '0';
|
||||
|
||||
setTimeout(() => {
|
||||
target.classList.remove('show');
|
||||
target.style.display = '';
|
||||
}, 300);
|
||||
|
||||
this.setAttribute('aria-expanded', 'false');
|
||||
if (icon) icon.style.transform = 'rotate(0deg)';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
315
views/partials/sidebar_agente_old.php
Normal file
315
views/partials/sidebar_agente_old.php
Normal file
@@ -0,0 +1,315 @@
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
/* Estilos inspirados en Tailwind */
|
||||
.sidebar-container { background-color: #f9fafb; border-right: 1px solid #e5e7eb; }
|
||||
.sidebar-dark { background-color: #1f2937; border-right: 1px solid #374151; }
|
||||
.sidebar-nav .nav-link { color: #374151; font-weight: 500; padding: 0.5rem 0.75rem; margin-bottom: 0.125rem;
|
||||
border-radius: 0.5rem; transition: all 0.15s ease-in-out; display: flex; align-items: center; }
|
||||
.sidebar-nav .nav-link:hover { background-color: #f3f4f6; color: #111827; }
|
||||
.sidebar-nav .nav-link.active { background-color: #f3f4f6; color: #111827; }
|
||||
.sidebar-nav .nav-link .icon { width: 1.25rem; height: 1.25rem; margin-right: 0.75rem; color: #6b7280; transition: color 0.15s ease-in-out; flex-shrink: 0; }
|
||||
.sidebar-nav .nav-link:hover .icon,
|
||||
.sidebar-nav .nav-link.active .icon { color: #374151; }
|
||||
.sidebar-nav .badge { background-color: #f3f4f6; color: #374151; font-size: 0.75rem; font-weight: 500; padding: 0.25rem 0.5rem; border-radius: 9999px; margin-left: auto; }
|
||||
.sidebar-nav .badge.badge-primary { background-color: #dbeafe; color: #1e40af; }
|
||||
.submenu .nav-link { padding-left: 2.75rem; color: #6b7280; font-weight: 400; }
|
||||
.submenu .nav-link:hover { background-color: #f3f4f6; color: #374151; }
|
||||
.submenu .nav-link.active { background-color: #f3f4f6; color: #374151; }
|
||||
.collapse-icon { width: 0.75rem; height: 0.75rem; margin-left: auto; transition: transform 0.15s ease-in-out; }
|
||||
.nav-link[aria-expanded="true"] .collapse-icon { transform: rotate(180deg); }
|
||||
/* Estilos para modo oscuro */
|
||||
.sidebar-dark .sidebar-nav .nav-link { color: #d1d5db; }
|
||||
.sidebar-dark .sidebar-nav .nav-link:hover { background-color: #374151; color: #ffffff; }
|
||||
.sidebar-dark .sidebar-nav .nav-link.active { background-color: #374151; color: #ffffff; }
|
||||
.sidebar-dark .sidebar-nav .nav-link .icon { color: #9ca3af; }
|
||||
.sidebar-dark .sidebar-nav .nav-link:hover .icon,
|
||||
.sidebar-dark .sidebar-nav .nav-link.active .icon { color: #ffffff; }
|
||||
.sidebar-dark .sidebar-nav .badge { background-color: #374151; color: #d1d5db; }
|
||||
.sidebar-dark .sidebar-nav .badge.badge-primary { background-color: #1e3a8a; color: #93c5fd; }
|
||||
.sidebar-dark .submenu .nav-link { color: #9ca3af; }
|
||||
.sidebar-dark .submenu .nav-link:hover { background-color: #374151; color: #d1d5db; }
|
||||
.sidebar-dark .submenu .nav-link.active { background-color: #374151; color: #d1d5db; }
|
||||
/* Navbar */
|
||||
.navbar-brand { font-weight: 600; font-size: 1.125rem; }
|
||||
.menu-toggle { border: 1px solid #6b7280; border-radius: 0.5rem; padding: 0.5rem; transition: all 0.15s ease-in-out; }
|
||||
.menu-toggle:hover { background-color: #f3f4f6; }
|
||||
/* Offcanvas para móviles */
|
||||
.offcanvas { background-color: #ffffff; }
|
||||
.offcanvas-header { border-bottom: 1px solid #e5e7eb; padding: 1rem 1.5rem; }
|
||||
.offcanvas-title { font-weight: 600; font-size: 1.125rem; color: #111827; }
|
||||
.offcanvas-body { padding: 1rem 1.5rem; }
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 767.98px) {
|
||||
.sidebar-nav .nav-link { color: #374151; }
|
||||
.sidebar-nav .nav-link:hover { background-color: #f3f4f6; color: #111827; }
|
||||
.sidebar-nav .nav-link.active { background-color: #f3f4f6; color: #111827; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- 🔷 NAVBAR -->
|
||||
<nav class="navbar navbar-dark bg-dark fixed-top">
|
||||
<div class="container-fluid">
|
||||
<!-- Botón de menú para móviles -->
|
||||
<button class="menu-toggle d-md-none me-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu">
|
||||
☰
|
||||
</button>
|
||||
<span class="navbar-brand">SIIH | Agente Aduanal</span>
|
||||
<div class="d-flex ms-auto text-white">
|
||||
<div class="navbar-content">
|
||||
<?php
|
||||
// Verifica si estás en el dashboard principal del importador
|
||||
$esDashboard = str_contains($_SERVER['REQUEST_URI'], '/agentes/dashboard');
|
||||
|
||||
if ($esDashboard): ?>
|
||||
<span id="welcome-text">Bienvenido, <?= htmlspecialchars($_SESSION['usuario_nombre']) ?></span>
|
||||
<?php else: ?>
|
||||
<a href="/IMPORTADORES/sistemas/logout" class="btn btn-outline-light btn-sm ms-2 W-auto btn-animated">Cerrar Sesión</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- SIDEBAR FIJA (escritorio) -->
|
||||
<div class="d-none d-md-block sidebar-container sidebar-dark position-fixed h-100" style="width: 250px; top: 0; padding-top: 4rem; z-index: 1000;">
|
||||
<div class="px-3 py-4 h-100 overflow-y-auto">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="nav flex-column">
|
||||
<!-- INICIO -->
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/agentes/dashboard" class="nav-link active">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 22 21">
|
||||
<path d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z"/>
|
||||
<path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z"/>
|
||||
</svg>
|
||||
<span>Inicio</span>
|
||||
</a>
|
||||
</li>
|
||||
<!-- IMPORTADORES VINCULADOS -->
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/agentes/vinculados" class="nav-link">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5z"/>
|
||||
<path d="M7.414 15.414a2 2 0 01-2.828-2.828l3-3a2 2 0 012.828 0 1 1 0 001.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5z"/>
|
||||
</svg>
|
||||
<span>Vinculación</span>
|
||||
</a>
|
||||
</li>
|
||||
<!-- Patentes -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#submenuPatentesDesktop" role="button" aria-expanded="false" aria-controls="submenuPatentesDesktop">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<span>Patentes</span>
|
||||
<svg class="collapse-icon" fill="none" stroke="currentColor" viewBox="0 0 10 6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
|
||||
</svg>
|
||||
</a>
|
||||
<div class="collapse" id="submenuPatentesDesktop">
|
||||
<ul class="nav flex-column submenu">
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/patente/lista" class="nav-link">
|
||||
Ver Patentes
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/patente/alta" class="nav-link">
|
||||
Nueva Patente
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- LOCACIONES -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#submenuLocacionesDesktop" role="button" aria-expanded="false" aria-controls="submenuLocacionesDesktop">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 2C6.686 2 4 4.686 4 8c0 5.25 6 12 6 12s6-6.75 6-12c0-3.314-2.686-6-6-6zm0 8c-1.105 0-2-.895-2-2s.895-2 2-2 2 .895 2 2-.895 2-2 2z"/>
|
||||
</svg>
|
||||
<span>Locaciones</span>
|
||||
<svg class="collapse-icon" fill="none" stroke="currentColor" viewBox="0 0 10 6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
|
||||
</svg>
|
||||
</a>
|
||||
<div class="collapse" id="submenuLocacionesDesktop">
|
||||
<ul class="nav flex-column submenu">
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/locaciones/lista" class="nav-link">
|
||||
Ver Locaciones
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/locaciones/alta" class="nav-link">
|
||||
Agregar Locaciones
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- CONFIGURACIÓN -->
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/configuracion" class="nav-link">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M11.983 1.034a1 1 0 00-1.966 0l-.26 1.857a6.996 6.996 0 00-1.223.51l-1.7-1.04a1 1 0 00-1.366.366l-1 1.732a1 1 0 00.366 1.366l1.7 1.04a6.984 6.984 0 000 1.02l-1.7 1.04a1 1 0 00-.366 1.366l1 1.732a1 1 0 001.366.366l1.7-1.04c.392.212.803.386 1.223.51l.26 1.857a1 1 0 001.966 0l.26-1.857c.42-.124.831-.298 1.223-.51l1.7 1.04a1 1 0 001.366-.366l1-1.732a1 1 0 00-.366-1.366l-1.7-1.04a6.984 6.984 0 000-1.02l1.7-1.04a1 1 0 00.366-1.366l-1-1.732a1 1 0 00-1.366-.366l-1.7 1.04a6.996 6.996 0 00-1.223-.51l-.26-1.857zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<span>Configuración</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- OFFCANVAS PARA MÓVILES -->
|
||||
<div class="offcanvas offcanvas-start d-md-none" tabindex="-1" id="sidebarMenu" style="top: 0; width: 250px;">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title">Menú</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="nav flex-column">
|
||||
<!-- INICIO -->
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/agentes/dashboard" class="nav-link active">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 22 21">
|
||||
<path d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z"/>
|
||||
<path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z"/>
|
||||
</svg>
|
||||
<span>Inicio</span>
|
||||
</a>
|
||||
</li>
|
||||
<!-- IMPORTADORES VINCULADOS -->
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/agentes/vinculados" class="nav-link">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5z"/>
|
||||
<path d="M7.414 15.414a2 2 0 01-2.828-2.828l3-3a2 2 0 012.828 0 1 1 0 001.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5z"/>
|
||||
</svg>
|
||||
<span>Vinculación</span>
|
||||
</a>
|
||||
</li>
|
||||
<!-- Patentes -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#submenuPatentesMobile" role="button" aria-expanded="false" aria-controls="submenuPatentesMobile">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<span>Patentes</span>
|
||||
<svg class="collapse-icon" fill="none" stroke="currentColor" viewBox="0 0 10 6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
|
||||
</svg>
|
||||
</a>
|
||||
<div class="collapse" id="submenuPatentesMobile">
|
||||
<ul class="nav flex-column submenu">
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/patente/lista" class="nav-link">
|
||||
Ver Patentes
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/patente/alta" class="nav-link">
|
||||
Nueva Patente
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- LOCACIONES -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#submenuLocacionesMobile" role="button" aria-expanded="false" aria-controls="submenuLocacionesMobile">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 2C6.686 2 4 4.686 4 8c0 5.25 6 12 6 12s6-6.75 6-12c0-3.314-2.686-6-6-6zm0 8c-1.105 0-2-.895-2-2s.895-2 2-2 2 .895 2 2-.895 2-2 2z"/>
|
||||
</svg>
|
||||
<span>Locaciones</span>
|
||||
<svg class="collapse-icon" fill="none" stroke="currentColor" viewBox="0 0 10 6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
|
||||
</svg>
|
||||
</a>
|
||||
<div class="collapse" id="submenuLocacionesMobile">
|
||||
<ul class="nav flex-column submenu">
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/locaciones/lista" class="nav-link">
|
||||
Ver Locaciones
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/locaciones/alta" class="nav-link">
|
||||
Agregar Locaciones
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- CONFIGURACIÓN -->
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/configuracion" class="nav-link">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M11.983 1.034a1 1 0 00-1.966 0l-.26 1.857a6.996 6.996 0 00-1.223.51l-1.7-1.04a1 1 0 00-1.366.366l-1 1.732a1 1 0 00.366 1.366l1.7 1.04a6.984 6.984 0 000 1.02l-1.7 1.04a1 1 0 00-.366 1.366l1 1.732a1 1 0 001.366.366l1.7-1.04c.392.212.803.386 1.223.51l.26 1.857a1 1 0 001.966 0l.26-1.857c.42-.124.831-.298 1.223-.51l1.7 1.04a1 1 0 001.366-.366l1-1.732a1 1 0 00-.366-1.366l-1.7-1.04a6.984 6.984 0 000-1.02l1.7-1.04a1 1 0 00.366-1.366l-1-1.732a1 1 0 00-1.366-.366l-1.7 1.04a6.996 6.996 0 00-1.223-.51l-.26-1.857zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<span>Configuración</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
// Simular lógica de dashboard
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const esDashboard = window.location.pathname.includes('/agentes/dashboard');
|
||||
const welcomeText = document.getElementById('welcome-text');
|
||||
const logoutBtn = document.getElementById('logout-btn');
|
||||
|
||||
if (!esDashboard) {
|
||||
if (welcomeText) {
|
||||
welcomeText.style.display = 'none';
|
||||
}
|
||||
if (logoutBtn) {
|
||||
logoutBtn.style.display = 'inline-block';
|
||||
}
|
||||
}
|
||||
|
||||
// Manejar estados activos basados en URL actual
|
||||
const currentPath = window.location.pathname;
|
||||
const navLinks = document.querySelectorAll('.nav-link');
|
||||
|
||||
navLinks.forEach(link => {
|
||||
const href = link.getAttribute('href');
|
||||
if (href && currentPath.includes(href)) {
|
||||
link.classList.add('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Manejar collapse manualmente
|
||||
document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(trigger => {
|
||||
trigger.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const targetId = this.getAttribute('href');
|
||||
const targetElement = document.querySelector(targetId);
|
||||
const isExpanded = this.getAttribute('aria-expanded') === 'true';
|
||||
|
||||
if (targetElement) {
|
||||
if (isExpanded) {
|
||||
// Cerrar
|
||||
targetElement.classList.remove('show');
|
||||
this.setAttribute('aria-expanded', 'false');
|
||||
} else {
|
||||
// Abrir
|
||||
targetElement.classList.add('show');
|
||||
this.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Remover el atributo data-bs-toggle para evitar conflictos
|
||||
trigger.removeAttribute('data-bs-toggle');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
594
views/partials/sidebar_configuracion_old.php
Normal file
594
views/partials/sidebar_configuracion_old.php
Normal file
@@ -0,0 +1,594 @@
|
||||
<!-- views/partials/sidebar_configuracion.php -->
|
||||
<?php
|
||||
// Verificar que el usuario esté autenticado
|
||||
if (!isset($_SESSION['usuario_id'])) {
|
||||
header('Location: /IMPORTADORES/login');
|
||||
exit;
|
||||
}
|
||||
|
||||
// Obtener información del usuario
|
||||
$tipoUsuario = $_SESSION['tipo_usuario'] ?? '';
|
||||
$usuarioId = $_SESSION['usuario_id'] ?? null;
|
||||
|
||||
// Definir permisos por tipo de usuario
|
||||
$permisos = [
|
||||
'super_admin' => [
|
||||
'informacion_general' => true,
|
||||
'automatizaciones' => true,
|
||||
'preferencias' => true,
|
||||
'seguridad' => true,
|
||||
'bitacoras' => [
|
||||
'registro_accesos' => true,
|
||||
'registro_cambios' => true,
|
||||
'registro_usuarios' => true,
|
||||
'registro_agencias' => true,
|
||||
'mi_actividad' => true
|
||||
],
|
||||
],
|
||||
'admin_agencia' => [
|
||||
'informacion_general' => true,
|
||||
'automatizaciones' => true,
|
||||
'preferencias' => true,
|
||||
'seguridad' => true,
|
||||
'bitacoras' => [
|
||||
'acceso_usuarios_agencia' => true,
|
||||
'registro_vinculaciones' => true,
|
||||
'mi_actividad' => true
|
||||
],
|
||||
],
|
||||
'agente_aduanal' => [
|
||||
'informacion_general' => true,
|
||||
'automatizaciones' => true,
|
||||
'preferencias' => true,
|
||||
'seguridad' => true,
|
||||
'bitacoras' => [
|
||||
'acceso_usuarios_agencia' => true,
|
||||
'registro_vinculaciones' => true,
|
||||
'mi_actividad' => true
|
||||
],
|
||||
],
|
||||
'importador' => [
|
||||
'informacion_general' => true,
|
||||
'automatizaciones' => true,
|
||||
'preferencias' => true,
|
||||
'seguridad' => true,
|
||||
'bitacoras' => [
|
||||
'vinculaciones_usuario' => true,
|
||||
'mi_actividad' => true
|
||||
],
|
||||
],
|
||||
];
|
||||
|
||||
// Obtener permisos del usuario actual
|
||||
$permisosUsuario = $permisos[$tipoUsuario] ?? $permisos['importador'];
|
||||
$permisosBitacoras = $permisosUsuario['bitacoras'] ?? [];
|
||||
|
||||
// Función para verificar si el usuario tiene acceso a bitácoras
|
||||
function tieneAccesoBitacoras($permisosBitacoras) {
|
||||
if (is_bool($permisosBitacoras)) {
|
||||
return $permisosBitacoras;
|
||||
}
|
||||
return !empty($permisosBitacoras) && array_filter($permisosBitacoras);
|
||||
}
|
||||
|
||||
// Contar bitácoras disponibles según permisos
|
||||
function contarBitacorasDisponibles($permisosBitacoras) {
|
||||
if (!is_array($permisosBitacoras)) {
|
||||
return is_bool($permisosBitacoras) && $permisosBitacoras ? 1 : 0;
|
||||
}
|
||||
return count(array_filter($permisosBitacoras));
|
||||
}
|
||||
|
||||
$cantidadBitacoras = contarBitacorasDisponibles($permisosBitacoras);
|
||||
|
||||
// Variables para detectar las vistas actuales
|
||||
$currentPath = $_SERVER['REQUEST_URI'];
|
||||
$esConfiguracion = $currentPath === '/IMPORTADORES/configuracion/index' || $currentPath === '/IMPORTADORES/configuracion';
|
||||
$esVistaAutomatizaciones = strpos($currentPath, '/IMPORTADORES/automatizaciones/') === 0;
|
||||
$esVistaPreferencias = strpos($currentPath, '/IMPORTADORES/preferencias/') === 0;
|
||||
$esVistaSeguridad = strpos($currentPath, '/IMPORTADORES/seguridad/') === 0;
|
||||
$esVistaBitacoras = strpos($currentPath, '/IMPORTADORES/bitacoras/') === 0 && $currentPath !== '/IMPORTADORES/configuracion';
|
||||
$esVistaReset = strpos($currentPath, '/IMPORTADORES/reset/') === 0;
|
||||
|
||||
// Función para obtener el texto descriptivo según el permiso
|
||||
function obtenerTextoPermiso($permiso, $tipoUsuario) {
|
||||
$textos = [
|
||||
'registro_accesos' => ($tipoUsuario === 'super_admin') ? 'Registro de accesos' : null,
|
||||
'registro_cambios' => ($tipoUsuario === 'super_admin') ? 'Cambios de usuarios' : null,
|
||||
'registro_usuarios' => ($tipoUsuario === 'super_admin') ? 'Registro de usuarios' : null,
|
||||
'registro_agencias' => ($tipoUsuario === 'super_admin') ? 'Registro de agencias' : null,
|
||||
'acceso_usuarios_agencia' => ($tipoUsuario === 'admin_agencia' || $tipoUsuario === 'agente_aduanal') ? 'Registro de accesos' : null,
|
||||
'registro_vinculaciones' => ($tipoUsuario === 'admin_agencia' || $tipoUsuario === 'agente_aduanal') ? 'Vinculaciones (Agencia)' : null,
|
||||
'mi_actividad' => in_array($tipoUsuario, ['super_admin', 'admin_agencia', 'agente_aduanal', 'importador']) ? 'Mi actividad' : null,
|
||||
'vinculaciones_usuario' => ($tipoUsuario === 'importador') ? 'Mis vinculaciones' : null,
|
||||
];
|
||||
|
||||
return $textos[$permiso] ?? ucfirst(str_replace('_', ' ', $permiso));
|
||||
}
|
||||
|
||||
// Función para obtener la URL según el permiso
|
||||
function obtenerUrlPermiso($permiso) {
|
||||
$urls = [
|
||||
'registro_accesos' => '/IMPORTADORES/bitacoras/sistema', // ✅
|
||||
'registro_cambios' => '/IMPORTADORES/bitacoras/cambios', // ✅
|
||||
'registro_usuarios' => '/IMPORTADORES/bitacoras/usuarios', //
|
||||
'registro_agencias' => '/IMPORTADORES/bitacoras/agencias', // ✅
|
||||
'acceso_usuarios_agencia' => '/IMPORTADORES/bitacoras/sistemaAgencia', // ✅
|
||||
'registro_vinculaciones' => '/IMPORTADORES/bitacoras/vinculaciones', // ✅
|
||||
'mi_actividad' => '/IMPORTADORES/bitacoras/miAcceso', // ✅
|
||||
'vinculaciones_usuario' => '/IMPORTADORES/bitacoras/vinculacionesUsuario' // ✅
|
||||
];
|
||||
|
||||
return $urls[$permiso] ?? '/IMPORTADORES/bitacoras/index';
|
||||
}
|
||||
?>
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
/* Estilos inspirados en Tailwind */
|
||||
.sidebar-container { background-color: #f9fafb; border-right: 1px solid #e5e7eb; }
|
||||
.sidebar-dark { background-color: #1f2937; border-right: 1px solid #374151; }
|
||||
.sidebar-nav .nav-link { color: #374151; font-weight: 500; padding: 0.5rem 0.75rem; margin-bottom: 0.125rem;
|
||||
border-radius: 0.5rem; transition: all 0.15s ease-in-out; display: flex; align-items: center; }
|
||||
.sidebar-nav .nav-link:hover { background-color: #f3f4f6; color: #111827; }
|
||||
.sidebar-nav .nav-link.active { background-color: #f3f4f6; color: #111827; }
|
||||
.sidebar-nav .nav-link .icon { width: 1.25rem; height: 1.25rem; margin-right: 0.75rem; color: #6b7280; transition: color 0.15s ease-in-out; flex-shrink: 0; }
|
||||
.sidebar-nav .nav-link:hover .icon,
|
||||
.sidebar-nav .nav-link.active .icon { color: #374151; }
|
||||
.sidebar-nav .badge { background-color: #f3f4f6; color: #374151; font-size: 0.75rem; font-weight: 500; padding: 0.25rem 0.5rem; border-radius: 9999px; margin-left: auto; }
|
||||
.sidebar-nav .badge.badge-primary { background-color: #dbeafe; color: #1e40af; }
|
||||
.submenu .nav-link { padding-left: 2.75rem; color: #6b7280; font-weight: 400; }
|
||||
.submenu .nav-link:hover { background-color: #f3f4f6; color: #374151; }
|
||||
.submenu .nav-link.active { background-color: #f3f4f6; color: #374151; }
|
||||
.collapse-icon { width: 0.75rem; height: 0.75rem; margin-left: auto; transition: transform 0.15s ease-in-out; }
|
||||
.nav-link[aria-expanded="true"] .collapse-icon { transform: rotate(180deg); }
|
||||
/* Estilos para modo oscuro */
|
||||
.sidebar-dark .sidebar-nav .nav-link { color: #d1d5db; }
|
||||
.sidebar-dark .sidebar-nav .nav-link:hover { background-color: #374151; color: #ffffff; }
|
||||
.sidebar-dark .sidebar-nav .nav-link.active { background-color: #374151; color: #ffffff; }
|
||||
.sidebar-dark .sidebar-nav .nav-link .icon { color: #9ca3af; }
|
||||
.sidebar-dark .sidebar-nav .nav-link:hover .icon,
|
||||
.sidebar-dark .sidebar-nav .nav-link.active .icon { color: #ffffff; }
|
||||
.sidebar-dark .sidebar-nav .badge { background-color: #374151; color: #d1d5db; }
|
||||
.sidebar-dark .sidebar-nav .badge.badge-primary { background-color: #1e3a8a; color: #93c5fd; }
|
||||
.sidebar-dark .submenu .nav-link { color: #9ca3af; }
|
||||
.sidebar-dark .submenu .nav-link:hover { background-color: #374151; color: #d1d5db; }
|
||||
.sidebar-dark .submenu .nav-link.active { background-color: #374151; color: #d1d5db; }
|
||||
/* Navbar */
|
||||
.navbar-brand { font-weight: 600; font-size: 1.125rem; }
|
||||
.menu-toggle { border: 1px solid #6b7280; border-radius: 0.5rem; padding: 0.5rem; transition: all 0.15s ease-in-out; }
|
||||
.menu-toggle:hover { background-color: #f3f4f6; }
|
||||
/* Offcanvas para móviles */
|
||||
.offcanvas { background-color: #ffffff; }
|
||||
.offcanvas-header { border-bottom: 1px solid #e5e7eb; padding: 1rem 1.5rem; }
|
||||
.offcanvas-title { font-weight: 600; font-size: 1.125rem; color: #111827; }
|
||||
.offcanvas-body { padding: 1rem 1.5rem; }
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 767.98px) {
|
||||
.sidebar-nav .nav-link { color: #374151; }
|
||||
.sidebar-nav .nav-link:hover { background-color: #f3f4f6; color: #111827; }
|
||||
.sidebar-nav .nav-link.active { background-color: #f3f4f6; color: #111827; }
|
||||
.permission-scope { background-color: rgba(108, 117, 125, 0.2); }
|
||||
.submenu-item:hover { background-color: rgba(233, 236, 239, 0.8) !important; }
|
||||
}
|
||||
.user-badge { font-size: 0.75rem; padding: 2px 6px; border-radius: 3px; }
|
||||
.permission-indicator { font-size: 0.7rem; color: #28a745; margin-left: 5px; }
|
||||
.permission-scope { font-size: 0.65rem; color: #6c757d; margin-left: 5px; padding: 1px 4px; background-color: rgba(108, 117, 125, 0.1); border-radius: 2px; }
|
||||
.submenu-item { font-size: 0.9rem; padding-left: 1rem !important; }
|
||||
.submenu-item:hover { background-color: rgba(73, 80, 87, 0.7) !important; }
|
||||
/* Transiciones para collapse manual */
|
||||
.collapse {
|
||||
overflow: hidden;
|
||||
transition: height 0.3s ease;
|
||||
}
|
||||
|
||||
/* Estilo para íconos */
|
||||
.collapse-icon {
|
||||
transition: transform 0.3s ease;
|
||||
margin-left: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- NAVBAR -->
|
||||
<nav class="navbar navbar-dark bg-dark fixed-top">
|
||||
<div class="container-fluid">
|
||||
<!-- Botón de menú para móviles -->
|
||||
<button class="menu-toggle d-md-none me-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu">
|
||||
☰
|
||||
</button>
|
||||
<span class="navbar-brand">
|
||||
SIIH | Configuración
|
||||
<span class="user-badge bg-info text-dark ms-2"><?= strtoupper(str_replace('_', ' ', $tipoUsuario)) ?></span>
|
||||
</span>
|
||||
<div class="d-flex ms-auto">
|
||||
<?php
|
||||
// Definir la URL de regreso según el tipo de usuario
|
||||
$urlRegreso = match($tipoUsuario) {
|
||||
'super_admin' => '/IMPORTADORES/administrador/dashboard',
|
||||
'admin_agencia' => '/IMPORTADORES/agencias/dashboard',
|
||||
'agente_aduanal' => '/IMPORTADORES/agentes/dashboard',
|
||||
'importador' => '/IMPORTADORES/importadores/dashboard',
|
||||
default => '/IMPORTADORES/importadores/dashboard'
|
||||
};
|
||||
?>
|
||||
<a href="<?= $urlRegreso ?>" class="btn btn-outline-light btn-sm ms-2 W-auto btn-animated" style="margin: 0 0 0 25px;">
|
||||
← Panel Principal
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- SIDEBAR FIJA (escritorio) -->
|
||||
<div class="d-none d-md-block sidebar-container sidebar-dark position-fixed h-100" style="width: 250px; top: 0; padding-top: 4rem; z-index: 1000;">
|
||||
<div class="px-3 py-4 h-100 overflow-y-auto">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="nav flex-column">
|
||||
<!-- INFORMACIÓN GENERAL -->
|
||||
<li class="nav-item">
|
||||
<?php if ($permisosUsuario['informacion_general']): ?>
|
||||
<a href="/IMPORTADORES/configuracion/index" class="nav-link">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M18 10c0 4.418-3.582 8-8 8s-8-3.582-8-8 3.582-8 8-8 8 3.582 8 8zm-8-4a1 1 0 100 2 1 1 0 000-2zm-1 4a1 1 0 000 2h1v3a1 1 0 102 0v-4a1 1 0 00-1-1h-2z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span>Información general</span>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</li>
|
||||
<!-- AUTOMATIZACIONES -->
|
||||
<li class="nav-item">
|
||||
<?php if ($permisosUsuario['automatizaciones']): ?>
|
||||
<a href="/IMPORTADORES/automatizaciones/index" class="nav-link">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M13 7H7v6h6V7z" />
|
||||
<path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V9.586a1 1 0 00-.293-.707l-4.586-4.586A1 1 0 0012.414 4H5zm7 1.414L16.586 10H13a1 1 0 01-1-1V4.414z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<span>Automatizaciones</span>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</li>
|
||||
<!-- PREFERENCIAS -->
|
||||
<li class="nav-item">
|
||||
<?php if ($permisosUsuario['preferencias']): ?>
|
||||
<?php $enDashboardPreferencias = $_SERVER['REQUEST_URI'] === '/IMPORTADORES/preferencias/index'; ?>
|
||||
<a class="nav-link <?= $esVistaPreferencias ? 'active' : '' ?>"
|
||||
href="<?= $enDashboardPreferencias ? '#submenuPreferenciasDesktop' : '/IMPORTADORES/preferencias/index' ?>"
|
||||
<?= $enDashboardPreferencias ? 'data-bs-toggle="collapse"' : '' ?>
|
||||
role="button" aria-expanded="false" aria-controls="submenuPreferenciasDesktop"
|
||||
onclick="<?= $enDashboardPreferencias ? 'return true;' : 'event.preventDefault(); window.location.href = \'/IMPORTADORES/preferencias/index\';' ?>">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M11.3 1.046a1 1 0 00-2.6 0L7.528 3H4a1 1 0 000 2h1v10H4a1 1 0 000 2h3.528l1.172 1.954a1 1 0 001.6 0L12.472 17H16a1 1 0 000-2h-1V5h1a1 1 0 100-2h-3.528L11.3 1.046zM9 6a1 1 0 011 1v6a1 1 0 11-2 0V7a1 1 0 011-1z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<span>Preferencias</span>
|
||||
<svg class="collapse-icon" fill="none" stroke="currentColor" viewBox="0 0 10 6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
|
||||
</svg>
|
||||
</a>
|
||||
<div class="collapse" id="submenuPreferenciasDesktop">
|
||||
<ul class="nav flex-column submenu">
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/preferencias/notificaciones" class="nav-link">
|
||||
Gestión de Notificaciones
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/preferencias/catalogos" class="nav-link">
|
||||
Visualización de Catálogos
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</li>
|
||||
<!-- SEGURIDAD -->
|
||||
<li class="nav-item">
|
||||
<?php if ($permisosUsuario['seguridad']): ?>
|
||||
<?php $enDashboardSeguridad = $_SERVER['REQUEST_URI'] === '/IMPORTADORES/seguridad/index'; ?>
|
||||
<a class="nav-link <?= $esVistaSeguridad ? 'active' : '' ?>"
|
||||
href="<?= $enDashboardSeguridad ? '#submenuSeguridadDesktop' : '/IMPORTADORES/seguridad/index' ?>"
|
||||
<?= $enDashboardSeguridad ? 'data-bs-toggle="collapse"' : '' ?>
|
||||
role="button" aria-expanded="false" aria-controls="submenuSeguridadDesktop"
|
||||
onclick="<?= $enDashboardSeguridad ? 'return true;' : 'event.preventDefault(); window.location.href = \'/IMPORTADORES/seguridad/index\';' ?>">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm2 6V6a2 2 0 10-4 0v2h4z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<span>Seguridad</span>
|
||||
<svg class="collapse-icon" fill="none" stroke="currentColor" viewBox="0 0 10 6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
|
||||
</svg>
|
||||
</a>
|
||||
<div class="collapse" id="submenuSeguridadDesktop">
|
||||
<nav class="nav flex-column submenu">
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/seguridad/opciones" class="nav-link">
|
||||
Opciones de Seguridad
|
||||
</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</li>
|
||||
<!-- BITÁCORAS CON PERMISOS ESPECÍFICOS -->
|
||||
<li class="nav-item">
|
||||
<?php if (tieneAccesoBitacoras($permisosBitacoras)): ?>
|
||||
<?php $enDashboardBitacoras = $_SERVER['REQUEST_URI'] === '/IMPORTADORES/bitacoras/index'; ?>
|
||||
<a class="nav-link <?= $esVistaBitacoras ? 'active' : '' ?>"
|
||||
href="<?= $enDashboardBitacoras ? '#submenuBitacorasDesktop' : '/IMPORTADORES/bitacoras/index' ?>"
|
||||
<?= $enDashboardBitacoras ? 'data-bs-toggle="collapse"' : '' ?>
|
||||
role="button" aria-expanded="<?= $enDashboardBitacoras ? 'false' : 'false' ?>" aria-controls="submenuBitacorasDesktop"
|
||||
onclick="<?= $enDashboardBitacoras ? 'return true;' : 'event.preventDefault(); window.location.href = \'/IMPORTADORES/bitacoras/index\';' ?>">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a1 1 0 001-1V4a1 1 0 00-1-1H4zm0 2h11v10H4V5z"/>
|
||||
<path d="M6 7h5v1H6V7zm0 3h8v1H6v-1z"/>
|
||||
</svg>
|
||||
<span>Bitácoras</span>
|
||||
<svg class="collapse-icon" fill="none" stroke="currentColor" viewBox="0 0 10 6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
|
||||
</svg>
|
||||
</a>
|
||||
<div class="collapse" id="submenuBitacorasDesktop">
|
||||
<nav class="nav flex-column submenu">
|
||||
<?php foreach ($permisosBitacoras as $permiso => $tienePermiso): ?>
|
||||
<li class="nav-item">
|
||||
<?php if ($tienePermiso): ?>
|
||||
<?php
|
||||
$url = obtenerUrlPermiso($permiso);
|
||||
$texto = obtenerTextoPermiso($permiso, $tipoUsuario);
|
||||
$esActivo = $_SERVER['REQUEST_URI'] === $url;
|
||||
|
||||
// Scope según dashboard
|
||||
$scope = '';
|
||||
if ($tipoUsuario === 'super_admin') {
|
||||
$scope = 'Global';
|
||||
} elseif ($tipoUsuario === 'admin_agencia' || $tipoUsuario === 'agente_aduanal') {
|
||||
if (in_array($permiso, ['acceso_usuarios_agencia', 'registro_vinculaciones'])) {
|
||||
$scope = 'Agencia';
|
||||
} elseif (in_array($permiso, ['mis_vinculaciones', 'mi_actividad'])) {
|
||||
$scope = 'Personal';
|
||||
}
|
||||
} elseif ($tipoUsuario === 'importador') {
|
||||
$scope = 'Personal';
|
||||
}
|
||||
?>
|
||||
<a href="<?= $url ?>"
|
||||
class="nav-link submenu-item px-3 py-2 d-flex justify-content-between align-items-center <?= $esActivo ? 'active' : '' ?>">
|
||||
<span>
|
||||
<?= htmlspecialchars($texto) ?>
|
||||
<?php if ($scope): ?>
|
||||
<span class="permission-scope"><?= $scope ?></span>
|
||||
<?php endif; ?>
|
||||
</span>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</nav>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- OFFCANVAS PARA MÓVILES -->
|
||||
<div class="offcanvas offcanvas-start d-md-none" tabindex="-1" id="sidebarMenu" style="top: 0; width: 250px;">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title">Menú</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="nav flex-column">
|
||||
<!-- INFORMACIÓN GENERAL -->
|
||||
<li class="nav-item">
|
||||
<?php if ($permisosUsuario['informacion_general']): ?>
|
||||
<a href="/IMPORTADORES/configuracion/index" class="nav-link">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M18 10c0 4.418-3.582 8-8 8s-8-3.582-8-8 3.582-8 8-8 8 3.582 8 8zm-8-4a1 1 0 100 2 1 1 0 000-2zm-1 4a1 1 0 000 2h1v3a1 1 0 102 0v-4a1 1 0 00-1-1h-2z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span>Información general</span>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</li>
|
||||
<!-- AUTOMATIZACIONES -->
|
||||
<li class="nav-item">
|
||||
<?php if ($permisosUsuario['automatizaciones']): ?>
|
||||
<a href="/IMPORTADORES/automatizaciones/index" class="nav-link">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M13 7H7v6h6V7z" />
|
||||
<path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V9.586a1 1 0 00-.293-.707l-4.586-4.586A1 1 0 0012.414 4H5zm7 1.414L16.586 10H13a1 1 0 01-1-1V4.414z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<span>Automatizaciones</span>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</li>
|
||||
<!-- PREFERENCIAS -->
|
||||
<li class="nav-item">
|
||||
<?php if ($permisosUsuario['preferencias']): ?>
|
||||
<?php $enDashboardPreferencias = $_SERVER['REQUEST_URI'] === '/IMPORTADORES/preferencias/index'; ?>
|
||||
<a class="nav-link <?= $esVistaPreferencias ? 'active' : '' ?>"
|
||||
href="<?= $enDashboardPreferencias ? '#submenuPreferenciasMobile' : '/IMPORTADORES/preferencias/index' ?>"
|
||||
<?= $enDashboardPreferencias ? 'data-bs-toggle="collapse"' : '' ?>
|
||||
role="button" aria-expanded="false" aria-controls="submenuPreferenciasMobile"
|
||||
onclick="<?= $enDashboardPreferencias ? 'return true;' : 'event.preventDefault(); window.location.href = \'/IMPORTADORES/preferencias/index\';' ?>">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M11.3 1.046a1 1 0 00-2.6 0L7.528 3H4a1 1 0 000 2h1v10H4a1 1 0 000 2h3.528l1.172 1.954a1 1 0 001.6 0L12.472 17H16a1 1 0 000-2h-1V5h1a1 1 0 100-2h-3.528L11.3 1.046zM9 6a1 1 0 011 1v6a1 1 0 11-2 0V7a1 1 0 011-1z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<span>Preferencias</span>
|
||||
<svg class="collapse-icon" fill="none" stroke="currentColor" viewBox="0 0 10 6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
|
||||
</svg>
|
||||
</a>
|
||||
<div class="collapse" id="submenuPreferenciasMobile">
|
||||
<ul class="nav flex-column submenu">
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/preferencias/notificaciones" class="nav-link">
|
||||
Gestión de Notificaciones
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/preferencias/catalogos" class="nav-link">
|
||||
Visualización de Catálogos
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</li>
|
||||
<!-- SEGURIDAD -->
|
||||
<li class="nav-item">
|
||||
<?php if ($permisosUsuario['seguridad']): ?>
|
||||
<?php $enDashboardSeguridad = $_SERVER['REQUEST_URI'] === '/IMPORTADORES/seguridad/index'; ?>
|
||||
<a class="nav-link <?= $esVistaSeguridad ? 'active' : '' ?>"
|
||||
href="<?= $enDashboardSeguridad ? '#submenuSeguridadMobile' : '/IMPORTADORES/seguridad/index' ?>"
|
||||
<?= $enDashboardSeguridad ? 'data-bs-toggle="collapse"' : '' ?>
|
||||
role="button" aria-expanded="false" aria-controls="submenuSeguridadMobile"
|
||||
onclick="<?= $enDashboardSeguridad ? 'return true;' : 'event.preventDefault(); window.location.href = \'/IMPORTADORES/seguridad/index\';' ?>">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm2 6V6a2 2 0 10-4 0v2h4z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<span>Seguridad</span>
|
||||
<svg class="collapse-icon" fill="none" stroke="currentColor" viewBox="0 0 10 6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
|
||||
</svg>
|
||||
</a>
|
||||
<div class="collapse" id="submenuSeguridadMobile">
|
||||
<nav class="nav flex-column submenu">
|
||||
<li class="nav-item">
|
||||
<a href="/IMPORTADORES/seguridad/opciones" class="nav-link">
|
||||
Opciones de Seguridad
|
||||
</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</li>
|
||||
<!-- BITÁCORAS CON PERMISOS ESPECÍFICOS -->
|
||||
<li class="nav-item">
|
||||
<?php if (tieneAccesoBitacoras($permisosBitacoras)): ?>
|
||||
<?php $enDashboardBitacoras = $_SERVER['REQUEST_URI'] === '/IMPORTADORES/bitacoras/index'; ?>
|
||||
<a class="nav-link <?= $esVistaBitacoras ? 'active' : '' ?>"
|
||||
href="<?= $enDashboardBitacoras ? '#submenuBitacorasMobile' : '/IMPORTADORES/bitacoras/index' ?>"
|
||||
<?= $enDashboardBitacoras ? 'data-bs-toggle="collapse"' : '' ?>
|
||||
role="button" aria-expanded="<?= $enDashboardBitacoras ? 'false' : 'false' ?>" aria-controls="submenuBitacorasMobile"
|
||||
onclick="<?= $enDashboardBitacoras ? 'return true;' : 'event.preventDefault(); window.location.href = \'/IMPORTADORES/bitacoras/index\';' ?>">
|
||||
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a1 1 0 001-1V4a1 1 0 00-1-1H4zm0 2h11v10H4V5z"/>
|
||||
<path d="M6 7h5v1H6V7zm0 3h8v1H6v-1z"/>
|
||||
</svg>
|
||||
<span>Bitácoras</span>
|
||||
<svg class="collapse-icon" fill="none" stroke="currentColor" viewBox="0 0 10 6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
|
||||
</svg>
|
||||
</a>
|
||||
<div class="collapse" id="submenuBitacorasMobile">
|
||||
<nav class="nav flex-column submenu">
|
||||
<?php foreach ($permisosBitacoras as $permiso => $tienePermiso): ?>
|
||||
<li class="nav-item">
|
||||
<?php if ($tienePermiso): ?>
|
||||
<?php
|
||||
$url = obtenerUrlPermiso($permiso);
|
||||
$texto = obtenerTextoPermiso($permiso, $tipoUsuario);
|
||||
$esActivo = $_SERVER['REQUEST_URI'] === $url;
|
||||
|
||||
// Scope según dashboard
|
||||
$scope = '';
|
||||
if ($tipoUsuario === 'super_admin') {
|
||||
$scope = 'Global';
|
||||
} elseif ($tipoUsuario === 'admin_agencia' || $tipoUsuario === 'agente_aduanal') {
|
||||
if (in_array($permiso, ['acceso_usuarios_agencia', 'registro_vinculaciones'])) {
|
||||
$scope = 'Agencia';
|
||||
} elseif (in_array($permiso, ['mis_vinculaciones', 'mi_actividad'])) {
|
||||
$scope = 'Personal';
|
||||
}
|
||||
} elseif ($tipoUsuario === 'importador') {
|
||||
$scope = 'Personal';
|
||||
}
|
||||
?>
|
||||
<a href="<?= $url ?>"
|
||||
class="nav-link submenu-item <?= $esActivo ? 'active' : '' ?>">
|
||||
<span>
|
||||
<?= htmlspecialchars($texto) ?>
|
||||
<?php if ($scope): ?>
|
||||
<span class="permission-scope"><?= $scope ?></span>
|
||||
<?php endif; ?>
|
||||
</span>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</nav>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const currentPath = window.location.pathname.replace(/\/$/, '');
|
||||
|
||||
// Inicializar todos los collapses
|
||||
document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(trigger => {
|
||||
const targetId = trigger.getAttribute('data-bs-target') || trigger.getAttribute('href');
|
||||
const target = document.querySelector(targetId);
|
||||
const icon = trigger.querySelector('.collapse-icon');
|
||||
|
||||
if (!target) return;
|
||||
|
||||
// 1. Inicialización automática basada en la ruta
|
||||
const shouldExpand = Array.from(target.querySelectorAll('a')).some(link => {
|
||||
const href = link.getAttribute('href')?.replace(/\/$/, '');
|
||||
return href && currentPath.startsWith(href);
|
||||
});
|
||||
|
||||
// 2. Configurar el estado inicial
|
||||
if (shouldExpand) {
|
||||
target.classList.add('show');
|
||||
trigger.setAttribute('aria-expanded', 'true');
|
||||
if (icon) icon.style.transform = 'rotate(180deg)';
|
||||
}
|
||||
|
||||
// 3. Manejar clicks manuales
|
||||
trigger.addEventListener('click', function(e) {
|
||||
// Solo prevenir el comportamiento por defecto si es necesario
|
||||
if (this.getAttribute('href') === '#' || this.getAttribute('data-bs-target') === '#') {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
const isExpanded = this.getAttribute('aria-expanded') === 'true';
|
||||
|
||||
// Rotar el ícono inmediatamente
|
||||
if (icon) {
|
||||
icon.style.transform = isExpanded ? 'rotate(0deg)' : 'rotate(180deg)';
|
||||
}
|
||||
|
||||
// Actualizar atributo ARIA
|
||||
this.setAttribute('aria-expanded', !isExpanded);
|
||||
});
|
||||
|
||||
// 4. Manejar eventos de Bootstrap para sincronización
|
||||
target.addEventListener('show.bs.collapse', () => {
|
||||
trigger.setAttribute('aria-expanded', 'true');
|
||||
if (icon) icon.style.transform = 'rotate(180deg)';
|
||||
});
|
||||
|
||||
target.addEventListener('hide.bs.collapse', () => {
|
||||
trigger.setAttribute('aria-expanded', 'false');
|
||||
if (icon) icon.style.transform = 'rotate(0deg)';
|
||||
});
|
||||
});
|
||||
|
||||
// Marcar enlaces activos
|
||||
document.querySelectorAll('.nav-link').forEach(link => {
|
||||
const href = link.getAttribute('href')?.replace(/\/$/, '');
|
||||
if (href && (currentPath === href || currentPath.startsWith(href + '/'))) {
|
||||
link.classList.add('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user