CC3 R3: Sectioned sidebar redesign (DABI-style) — PORTAL/OPERATIVA/CRM/ERP/ANALITIKA/ADMIN

Reference: app.rinet.one/klasik/dabi — uppercase section headers + grouped items.

Shared module rewrite:
- /static/shared/sidebar.css   v2.0
   * 6 named sections, 240px expanded / 58px collapsed
   * Active item: gold left-border + transparent gradient fill
   * Hover: blue left-border accent
   * Section header hidden in collapsed mode (replaced with dashed separator)
   * Tooltip on hover (data-label) when collapsed
   * Mobile <768px overlay with backdrop
- /static/shared/sidebar.js    v2.0
   * SIDEBAR_SECTIONS = [PORTAL, OPERATIVA, CRM, ERP, ANALITIKA, ADMIN]
   * ADMIN section hidden unless user_type ∈ {pgz_admin, super_admin} (gated by /api/auth/me)
   * Cross-portal links (↗ marker) for items that target a different page
   * Same-page items trigger hashchange instead of full reload
   * Footer = avatar + name + role + ▾ user menu (Profil / Postavke / Public portal / Prijava ↔ Odjava)
   * localStorage 'sidebarCollapsed' persists across all 8 pages

Page integration:
- sport2.html  ← native .sb hidden; data-active=dashboard; hashchange→navTo
- app.html     ← native .sb hidden; data-active=profil; hashchange→navTo
- admin.html   ← native .sidebar hidden; data-active=korisnici
- erp.html     ← native .sidebar hidden; data-active=racuni
- crm.html     ← data-active=clanarine
- audit.html   ← data-active=audit (existing)
- kpi.html     ← data-active=kpi (existing)
- login.html   ← data-active=login (no item match → no highlight; user menu shows Prijava)

Backups: _backups/*.cc3_pre_redesign.{TS}

Live verified: all 8 pages HTTP 200; shared sidebar.css 200 (8664 B); sidebar.js 200 (12678 B); 6 sections present.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Damir Radulić
2026-05-05 01:42:16 +02:00
parent 7e674ad1ec
commit 3a79965899
7 changed files with 354 additions and 211 deletions
+12 -14
View File
@@ -32,13 +32,9 @@ body {
font-size: 14px;
line-height: 1.5;
}
.app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar {
background: var(--bg-2);
border-right: 1px solid var(--border);
padding: 20px 0;
display: flex; flex-direction: column;
}
.app { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
/* Native .sidebar hidden — shared sidebar (/static/shared/sidebar.*) handles sectioned menu */
.sidebar { display: none; }
.brand {
padding: 0 20px 20px;
border-bottom: 1px solid var(--border);
@@ -161,6 +157,8 @@ td.num { font-family: 'JetBrains Mono', monospace; text-align: right; }
.sidebar { display: none; }
}
</style>
<link rel="stylesheet" href="/sport/static/shared/sidebar.css">
<script src="/sport/static/shared/sidebar.js" defer data-active="korisnici"></script>
</head>
<body>
<div class="app">
@@ -206,13 +204,13 @@ td.num { font-family: 'JetBrains Mono', monospace; text-align: right; }
</div>
<div style="padding:14px 14px 4px 14px;font-size:9.5px;color:var(--text-dim,#8a95b4);text-transform:uppercase;letter-spacing:1.2px;font-weight:700">Portali</div>
<a class="nav-item" href="/sport/login"><span class="icon">🔑</span><span>Prijava</span></a>
<a class="nav-item" href="/sport/app"><span class="icon">📱</span><span>Aplikacija</span></a>
<a class="nav-item active" href="/sport/admin"><span class="icon">🛡</span><span>Administracija</span></a>
<a class="nav-item" href="/sport/crm"><span class="icon">👥</span><span>CRM</span></a>
<a class="nav-item" href="/sport/erp"><span class="icon">💰</span><span>ERP</span></a>
<a class="nav-item" href="/sport/kpi"><span class="icon">📈</span><span>KPI</span></a>
<a class="nav-item" href="/sport/audit"><span class="icon">📋</span><span>Audit</span></a>
<a class="nav-item" href="/login"><span class="icon">🔑</span><span>Prijava</span></a>
<a class="nav-item" href="/app"><span class="icon">📱</span><span>Aplikacija</span></a>
<a class="nav-item active" href="/admin"><span class="icon">🛡</span><span>Administracija</span></a>
<a class="nav-item" href="/crm"><span class="icon">👥</span><span>CRM</span></a>
<a class="nav-item" href="/erp"><span class="icon">💰</span><span>ERP</span></a>
<a class="nav-item" href="/kpi"><span class="icon">📈</span><span>KPI</span></a>
<a class="nav-item" href="/audit"><span class="icon">📋</span><span>Audit</span></a>
<a class="nav-item" href="/sport/static/sport2.html" target="_blank"><span class="icon">🌐</span><span>Public portal</span></a>
</aside>