usite-sas-bic/whatsapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/styles.css
+3 -2
View File
@@ -132,11 +132,12 @@ body {
} }
.sidebar-menu .nav-link.active { .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); background: rgba(255, 255, 255, 0.95);
font-weight: 600; font-weight: 600;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
transform: translateX(3px); transform: translateX(3px);
border-left: 3px solid var(--cat-color, var(--brand, #1565c0));
} }
.sidebar-menu .nav-link i { .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:hover { color: rgba(255,255,255,.9); background: rgba(255,255,255,.07); }
.sidebar-menu li.sidebar-section.has-active { .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); background: rgba(255,255,255,.1);
color: #fff; color: #fff;
} }
core/Layout.php
+1 -1
View File
@@ -65,7 +65,7 @@ class Layout
<!-- Font Awesome 6 --> <!-- Font Awesome 6 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<!-- Estilos del sistema --> <!-- 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> <style>
:root { :root {
shared/components/sidebar.php
+14 -2
View File
@@ -135,6 +135,16 @@ $_base = defined('APP_URL') ? rtrim(APP_URL, '/') : '';
<ul class="sidebar-menu" id="sb-menu"> <ul class="sidebar-menu" id="sb-menu">
<?php <?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 ─────────────────────────────── // ── Renderizado dinámico desde ModuleRegistry ───────────────────────────────
if (class_exists('ModuleRegistry', false)) { if (class_exists('ModuleRegistry', false)) {
$sidebarGroups = ModuleRegistry::forSidebar(); $sidebarGroups = ModuleRegistry::forSidebar();
@@ -155,10 +165,12 @@ if (class_exists('ModuleRegistry', false)) {
if ($__route && $_isActive($__route) !== '') { $_catHasActive = true; break; } 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' : '' ?>" <li class="sidebar-section<?= $_catHasActive ? ' has-active' : '' ?>"
data-cat="<?= $catId ?>" data-cat="<?= $catId ?>"
style="--cat-color:<?= $_catColor ?>"
onclick="sbToggleCat('<?= $catId ?>',this,event)"> onclick="sbToggleCat('<?= $catId ?>',this,event)">
<span class="sb-cat-label"> <span class="sb-cat-label">
<i class="<?= htmlspecialchars($catData['icon'], ENT_QUOTES, 'UTF-8') ?> me-1"></i> <i class="<?= htmlspecialchars($catData['icon'], ENT_QUOTES, 'UTF-8') ?> me-1"></i>
@@ -166,7 +178,7 @@ if (class_exists('ModuleRegistry', false)) {
</span> </span>
<i class="fas fa-chevron-down sb-chevron"></i> <i class="fas fa-chevron-down sb-chevron"></i>
</li> </li>
<li class="sb-group" id="<?= $catId ?>"> <li class="sb-group" id="<?= $catId ?>" style="--cat-color:<?= $_catColor ?>">
<ul> <ul>
<?php foreach ($catData['modules'] as $slug => $mod): <?php foreach ($catData['modules'] as $slug => $mod):
$links = $mod['links'] ?? []; $links = $mod['links'] ?? [];