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:
+12
-14
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user