feat(sidebar): color por categoría via CSS custom property --cat-color

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
2026-06-24 09:05:57 -05:00
co-authored by Claude Sonnet 4.6
parent e90cfda3f3
commit 92e4d01181
3 changed files with 18 additions and 5 deletions
+3 -2
View File
@@ -132,11 +132,12 @@ body {
}
.sidebar-menu .nav-link.active {
color: var(--brand-dark, #0d47a1);
color: var(--cat-color, var(--brand-dark, #0d47a1));
background: rgba(255, 255, 255, 0.95);
font-weight: 600;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
transform: translateX(3px);
border-left: 3px solid var(--cat-color, var(--brand, #1565c0));
}
.sidebar-menu .nav-link i {
@@ -169,7 +170,7 @@ body {
}
.sidebar-menu li.sidebar-section:hover { color: rgba(255,255,255,.9); background: rgba(255,255,255,.07); }
.sidebar-menu li.sidebar-section.has-active {
border-left-color: rgba(255,255,255,.7);
border-left-color: var(--cat-color, rgba(255,255,255,.7));
background: rgba(255,255,255,.1);
color: #fff;
}
+1 -1
View File
@@ -65,7 +65,7 @@ class Layout
<!-- Font Awesome 6 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<!-- Estilos del sistema -->
<link href="<?= $base ?>/assets/css/styles.css?v=13" rel="stylesheet">
<link href="<?= $base ?>/assets/css/styles.css?v=14" rel="stylesheet">
<style>
:root {
+14 -2
View File
@@ -135,6 +135,16 @@ $_base = defined('APP_URL') ? rtrim(APP_URL, '/') : '';
<ul class="sidebar-menu" id="sb-menu">
<?php
// ── Paleta de colores por categoría ────────────────────────────────────────
$_catPalette = [
'lab' => '#60a5fa',
'bot' => '#4ade80',
'turnero' => '#fbbf24',
'clinico' => '#c084fc',
'formularios' => '#22d3ee',
'sistema' => '#94a3b8',
];
// ── Renderizado dinámico desde ModuleRegistry ───────────────────────────────
if (class_exists('ModuleRegistry', false)) {
$sidebarGroups = ModuleRegistry::forSidebar();
@@ -155,10 +165,12 @@ if (class_exists('ModuleRegistry', false)) {
if ($__route && $_isActive($__route) !== '') { $_catHasActive = true; break; }
}
}
$catId = 'sb-cat-' . htmlspecialchars($catKey, ENT_QUOTES, 'UTF-8');
$catId = 'sb-cat-' . htmlspecialchars($catKey, ENT_QUOTES, 'UTF-8');
$_catColor = $_catPalette[$catKey] ?? '#94a3b8';
?>
<li class="sidebar-section<?= $_catHasActive ? ' has-active' : '' ?>"
data-cat="<?= $catId ?>"
style="--cat-color:<?= $_catColor ?>"
onclick="sbToggleCat('<?= $catId ?>',this,event)">
<span class="sb-cat-label">
<i class="<?= htmlspecialchars($catData['icon'], ENT_QUOTES, 'UTF-8') ?> me-1"></i>
@@ -166,7 +178,7 @@ if (class_exists('ModuleRegistry', false)) {
</span>
<i class="fas fa-chevron-down sb-chevron"></i>
</li>
<li class="sb-group" id="<?= $catId ?>">
<li class="sb-group" id="<?= $catId ?>" style="--cat-color:<?= $_catColor ?>">
<ul>
<?php foreach ($catData['modules'] as $slug => $mod):
$links = $mod['links'] ?? [];