Damir Radulić
3a79965899
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>
188 lines
8.5 KiB
CSS
188 lines
8.5 KiB
CSS
/* PGŽ SPORT — Unified Sectioned Sidebar v2.0
|
|
* dradulic@outlook.com / damir@rinet.one — 2026-05-05
|
|
* Reference: app.rinet.one/klasik/dabi
|
|
* Used by: sport2.html, app.html, admin.html, crm.html, erp.html, audit.html, kpi.html, login.html
|
|
*/
|
|
|
|
:root{
|
|
--pgz-blue:#003087; --pgz-blue2:#004CC4; --pgz-gold:#F4C430;
|
|
--bg0:#08090e; --bg1:#0d1021; --bg2:#111628; --bg3:#161d35; --bg4:#1c2542;
|
|
--rim:#1e2a50; --rim2:#283560;
|
|
--t0:#fff; --t1:#e2e6f0; --t2:#8a95b4; --t4:#4e5a7a;
|
|
--green:#00e88f; --red:#ff2d55; --amber:#f59e0b; --cyan:#00c8e8;
|
|
--sb-w-exp:240px; --sb-w-col:58px;
|
|
}
|
|
|
|
#pgz-sb{
|
|
position:fixed; top:0; left:0; bottom:0; width:var(--sb-w-exp);
|
|
background:linear-gradient(180deg,var(--bg1) 0%,var(--bg0) 100%);
|
|
border-right:1px solid var(--rim);
|
|
display:flex; flex-direction:column; z-index:100;
|
|
font-family:'Inter','Segoe UI',sans-serif; font-size:13px; color:var(--t1);
|
|
transition:width .22s ease, transform .22s ease;
|
|
}
|
|
#pgz-sb *{box-sizing:border-box}
|
|
#pgz-sb a{text-decoration:none;color:inherit}
|
|
|
|
/* Header */
|
|
.pgz-sb-h{padding:14px 16px 12px;border-bottom:1px solid var(--rim);position:relative;flex-shrink:0;display:flex;align-items:center;gap:10px}
|
|
.pgz-sb-h .pgz-mark{
|
|
width:28px;height:28px;border-radius:6px;flex-shrink:0;
|
|
background:linear-gradient(135deg,var(--pgz-blue) 0%,var(--pgz-blue2) 100%);
|
|
color:#fff;font-weight:800;font-size:13px;
|
|
display:flex;align-items:center;justify-content:center;
|
|
border:1px solid var(--pgz-gold);
|
|
}
|
|
.pgz-sb-h .pgz-htxt{flex:1;min-width:0;overflow:hidden}
|
|
.pgz-sb-h .pgz-logo{font-weight:800;font-size:12.5px;color:var(--t0);letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
.pgz-sb-h .pgz-logo .g{color:var(--pgz-gold)}
|
|
.pgz-sb-h .pgz-sub{font-size:9.5px;color:var(--t2);margin-top:2px;text-transform:uppercase;letter-spacing:.6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
.pgz-sb-toggle{
|
|
width:24px;height:24px;flex-shrink:0;
|
|
display:flex;align-items:center;justify-content:center;cursor:pointer;
|
|
color:var(--t2);background:var(--bg2);border:1px solid var(--rim);
|
|
border-radius:5px;font-size:13px;font-weight:700;
|
|
transition:all .15s;user-select:none;
|
|
}
|
|
.pgz-sb-toggle:hover{background:var(--bg3);color:var(--pgz-gold);border-color:var(--pgz-gold)}
|
|
|
|
/* Section header */
|
|
.pgz-sb-section{padding:14px 16px 4px;font-size:9.5px;color:var(--t4);
|
|
text-transform:uppercase;letter-spacing:1.4px;font-weight:700;
|
|
white-space:nowrap;overflow:hidden;
|
|
display:flex;align-items:center;gap:6px;
|
|
}
|
|
.pgz-sb-section::after{content:"";flex:1;height:1px;background:var(--rim);opacity:.7}
|
|
.pgz-sb-section.pgz-admin{color:var(--pgz-gold)}
|
|
|
|
/* Nav */
|
|
.pgz-sb-nav{flex:1;padding:4px 8px 8px;overflow-y:auto;overflow-x:hidden}
|
|
.pgz-sb-nav::-webkit-scrollbar{width:6px}
|
|
.pgz-sb-nav::-webkit-scrollbar-thumb{background:var(--rim2);border-radius:3px}
|
|
.pgz-nav-i{
|
|
padding:7px 12px;border-radius:5px;color:var(--t2);
|
|
cursor:pointer;display:flex;align-items:center;gap:10px;
|
|
font-size:12.5px;margin:1px 0;white-space:nowrap;
|
|
transition:background .12s,color .12s;position:relative;
|
|
border-left:2px solid transparent;
|
|
}
|
|
.pgz-nav-i:hover{background:var(--bg2);color:var(--t1);border-left-color:var(--pgz-blue2)}
|
|
.pgz-nav-i.active{
|
|
background:linear-gradient(90deg,rgba(0,76,196,.18) 0%,transparent 80%);
|
|
color:#fff;font-weight:600;border-left-color:var(--pgz-gold);
|
|
}
|
|
.pgz-nav-i.active .ic{color:var(--pgz-gold)}
|
|
.pgz-nav-i .ic{width:20px;text-align:center;font-size:13px;flex-shrink:0;color:var(--t2);transition:color .12s}
|
|
.pgz-nav-i:hover .ic{color:var(--pgz-gold)}
|
|
.pgz-nav-i .lbl{overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
|
|
.pgz-nav-i .badge{margin-left:auto;background:var(--red);color:#fff;font-size:9px;font-weight:700;padding:1px 6px;border-radius:8px;flex-shrink:0}
|
|
.pgz-nav-i.cross-portal::after{content:"↗";font-size:9px;opacity:.4;margin-left:6px;flex-shrink:0}
|
|
.pgz-nav-i.cross-portal:hover::after{opacity:.85}
|
|
|
|
/* Footer (user) */
|
|
.pgz-sb-foot{padding:8px 10px;border-top:1px solid var(--rim);
|
|
display:flex;align-items:center;gap:8px;
|
|
white-space:nowrap;overflow:hidden;flex-shrink:0;
|
|
cursor:pointer;transition:background .15s;position:relative;
|
|
}
|
|
.pgz-sb-foot:hover{background:var(--bg2)}
|
|
.pgz-sb-foot .av{
|
|
width:32px;height:32px;border-radius:50%;
|
|
background:linear-gradient(135deg,var(--pgz-blue),var(--pgz-gold));
|
|
color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;
|
|
font-size:11px;flex-shrink:0;overflow:hidden;
|
|
border:2px solid transparent;transition:border-color .15s;
|
|
}
|
|
.pgz-sb-foot:hover .av{border-color:var(--pgz-gold)}
|
|
.pgz-sb-foot .av img{width:100%;height:100%;object-fit:cover}
|
|
.pgz-sb-foot .ui{flex:1;min-width:0;overflow:hidden}
|
|
.pgz-sb-foot .un{font-size:11.5px;color:var(--t1);font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis}
|
|
.pgz-sb-foot .ur{font-size:9.5px;color:var(--t4);text-transform:uppercase;letter-spacing:.5px;line-height:1.2;overflow:hidden;text-overflow:ellipsis}
|
|
.pgz-sb-foot .caret{font-size:11px;color:var(--t4);transition:transform .15s}
|
|
.pgz-sb-foot.menu-open .caret{transform:rotate(180deg)}
|
|
|
|
/* User menu (popup above footer) */
|
|
.pgz-user-menu{
|
|
position:absolute;left:8px;right:8px;bottom:54px;
|
|
background:var(--bg2);border:1px solid var(--rim);border-radius:6px;
|
|
box-shadow:0 -4px 18px rgba(0,0,0,.55);
|
|
padding:4px;z-index:300;display:none;
|
|
}
|
|
.pgz-user-menu.open{display:block}
|
|
.pgz-user-menu a{
|
|
display:flex;align-items:center;gap:8px;
|
|
padding:8px 10px;border-radius:5px;
|
|
color:var(--t1);font-size:12px;cursor:pointer;
|
|
}
|
|
.pgz-user-menu a:hover{background:var(--bg3);color:var(--pgz-gold)}
|
|
.pgz-user-menu .sep{height:1px;background:var(--rim);margin:3px 0}
|
|
.pgz-user-menu .danger{color:var(--red)}
|
|
.pgz-user-menu .danger:hover{background:rgba(255,45,85,.12)}
|
|
|
|
/* Mobile burger */
|
|
.pgz-sb-burger{
|
|
position:fixed;top:10px;left:10px;z-index:99;
|
|
width:36px;height:36px;display:none;align-items:center;justify-content:center;
|
|
background:var(--bg2);border:1px solid var(--rim);border-radius:6px;
|
|
color:var(--t1);font-size:18px;cursor:pointer;
|
|
}
|
|
.pgz-sb-burger:hover{background:var(--bg3);color:var(--pgz-gold)}
|
|
|
|
/* Mobile X */
|
|
.pgz-sb-mx{display:none;cursor:pointer;color:var(--t2);font-size:16px;
|
|
width:24px;height:24px;align-items:center;justify-content:center;
|
|
border-radius:5px;transition:all .15s;flex-shrink:0}
|
|
.pgz-sb-mx:hover{background:var(--bg3);color:var(--red)}
|
|
|
|
/* ─── Collapsed state ─── */
|
|
#pgz-sb.pgz-collapsed{width:var(--sb-w-col)}
|
|
#pgz-sb.pgz-collapsed .pgz-sb-h{padding:14px 6px 12px;justify-content:center;flex-direction:column;gap:8px}
|
|
#pgz-sb.pgz-collapsed .pgz-sb-h .pgz-htxt{display:none}
|
|
#pgz-sb.pgz-collapsed .pgz-sb-section{
|
|
font-size:0;padding:6px 0;text-align:center;
|
|
border-top:1px dashed var(--rim);margin:6px 8px 4px;
|
|
}
|
|
#pgz-sb.pgz-collapsed .pgz-sb-section::after{display:none}
|
|
#pgz-sb.pgz-collapsed .pgz-nav-i{justify-content:center;padding:9px 6px;border-left:none}
|
|
#pgz-sb.pgz-collapsed .pgz-nav-i.active{
|
|
background:linear-gradient(135deg,var(--pgz-blue),var(--pgz-blue2));
|
|
border-left:none;
|
|
}
|
|
#pgz-sb.pgz-collapsed .pgz-nav-i .lbl,
|
|
#pgz-sb.pgz-collapsed .pgz-nav-i .badge,
|
|
#pgz-sb.pgz-collapsed .pgz-nav-i.cross-portal::after{display:none}
|
|
#pgz-sb.pgz-collapsed .pgz-sb-foot{padding:8px 6px;justify-content:center}
|
|
#pgz-sb.pgz-collapsed .pgz-sb-foot .ui,
|
|
#pgz-sb.pgz-collapsed .pgz-sb-foot .caret{display:none}
|
|
#pgz-sb.pgz-collapsed .pgz-user-menu{left:62px;right:auto;width:200px;bottom:8px}
|
|
|
|
/* Tooltip when collapsed */
|
|
#pgz-sb.pgz-collapsed .pgz-nav-i:hover::before{
|
|
content:attr(data-label);
|
|
position:absolute;left:calc(var(--sb-w-col) - 4px);top:50%;transform:translateY(-50%);
|
|
background:var(--bg3);color:var(--t0);
|
|
padding:5px 10px;border-radius:4px;
|
|
font-size:11.5px;white-space:nowrap;
|
|
border:1px solid var(--rim);font-weight:600;
|
|
box-shadow:2px 2px 10px rgba(0,0,0,.55);
|
|
pointer-events:none;z-index:200;
|
|
}
|
|
|
|
/* Layout helper: pages opt in by adding body.pgz-has-sb */
|
|
body.pgz-has-sb{padding-left:var(--sb-w-exp);transition:padding-left .22s ease}
|
|
body.pgz-has-sb.pgz-sb-col{padding-left:var(--sb-w-col)}
|
|
|
|
/* Mobile <768px */
|
|
@media (max-width:768px){
|
|
#pgz-sb{transform:translateX(-100%)}
|
|
#pgz-sb.pgz-mobile-open{transform:translateX(0)}
|
|
#pgz-sb.pgz-collapsed{width:var(--sb-w-exp)}
|
|
body.pgz-has-sb,body.pgz-has-sb.pgz-sb-col{padding-left:0}
|
|
.pgz-sb-burger{display:flex}
|
|
.pgz-sb-mx{display:flex}
|
|
.pgz-sb-toggle{display:none}
|
|
body.pgz-mobile-sb-open::before{
|
|
content:"";position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:99;backdrop-filter:blur(2px)
|
|
}
|
|
}
|