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ć
+91
-52
@@ -1,7 +1,7 @@
|
||||
/* PGŽ SPORT — Unified Sidebar v1.0
|
||||
/* 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
|
||||
* Reference: app.rinet.one/klasik/control
|
||||
*/
|
||||
|
||||
:root{
|
||||
@@ -10,7 +10,7 @@
|
||||
--rim:#1e2a50; --rim2:#283560;
|
||||
--t0:#fff; --t1:#e2e6f0; --t2:#8a95b4; --t4:#4e5a7a;
|
||||
--green:#00e88f; --red:#ff2d55; --amber:#f59e0b; --cyan:#00c8e8;
|
||||
--sb-w-exp:230px; --sb-w-col:58px;
|
||||
--sb-w-exp:240px; --sb-w-col:58px;
|
||||
}
|
||||
|
||||
#pgz-sb{
|
||||
@@ -18,74 +18,108 @@
|
||||
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',sans-serif; font-size:13px; color:var(--t1);
|
||||
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:18px 18px 14px;border-bottom:1px solid var(--rim);position:relative;flex-shrink:0}
|
||||
.pgz-sb-h .pgz-logo{font-weight:800;font-size:14px;color:var(--t0);letter-spacing:.5px;white-space:nowrap;overflow:hidden}
|
||||
.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:10px;color:var(--t2);margin-top:4px;text-transform:uppercase;letter-spacing:1px;white-space:nowrap;overflow:hidden}
|
||||
.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{
|
||||
position:absolute;top:14px;right:8px;width:24px;height:24px;
|
||||
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:14px;font-weight:700;
|
||||
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 label / separator */
|
||||
.pgz-sb-sep{padding:14px 14px 4px 14px;font-size:9.5px;color:var(--t4);
|
||||
text-transform:uppercase;letter-spacing:1.2px;font-weight:700;
|
||||
white-space:nowrap;overflow:hidden}
|
||||
/* 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:6px 8px;overflow-y:auto;overflow-x:hidden}
|
||||
.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:9px 12px;border-radius:6px;color:var(--t2);
|
||||
padding:7px 12px;border-radius:5px;color:var(--t2);
|
||||
cursor:pointer;display:flex;align-items:center;gap:10px;
|
||||
font-size:12.5px;margin-bottom:2px;white-space:nowrap;
|
||||
transition:background .15s,color .15s;position:relative;
|
||||
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)}
|
||||
.pgz-nav-i:hover{background:var(--bg2);color:var(--t1);border-left-color:var(--pgz-blue2)}
|
||||
.pgz-nav-i.active{
|
||||
background:linear-gradient(90deg,var(--pgz-blue) 0%,var(--pgz-blue2) 100%);
|
||||
color:#fff;font-weight:600;
|
||||
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 .ic{width:20px;text-align:center;font-size:14px;flex-shrink:0}
|
||||
.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-ext{color:var(--cyan)}
|
||||
.pgz-nav-ext::after{content:"↗";font-size:10px;opacity:.5;margin-left:auto;flex-shrink:0}
|
||||
.pgz-nav-ext:hover{color:var(--pgz-gold);background:var(--bg2)}
|
||||
.pgz-nav-ext.active{background:linear-gradient(90deg,var(--pgz-blue) 0%,var(--pgz-blue2) 100%);color:#fff}
|
||||
.pgz-nav-ext.active::after{opacity:.85}
|
||||
.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:10px 12px;border-top:1px solid var(--rim);
|
||||
.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}
|
||||
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:30px;height:30px;border-radius:50%;
|
||||
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 .lo{cursor:pointer;color:var(--t4);font-size:14px;
|
||||
padding:6px 8px;border-radius:5px;transition:all .15s;flex-shrink:0}
|
||||
.pgz-sb-foot .lo:hover{background:rgba(255,45,85,.15);color:var(--red)}
|
||||
.pgz-sb-foot .caret{font-size:11px;color:var(--t4);transition:transform .15s}
|
||||
.pgz-sb-foot.menu-open .caret{transform:rotate(180deg)}
|
||||
|
||||
/* Mobile burger (shown <768px when sidebar is offscreen) */
|
||||
/* 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;
|
||||
@@ -94,54 +128,59 @@
|
||||
}
|
||||
.pgz-sb-burger:hover{background:var(--bg3);color:var(--pgz-gold)}
|
||||
|
||||
/* Mobile X (shown <768px when sidebar is open) */
|
||||
.pgz-sb-mx{display:none;cursor:pointer;color:var(--t2);font-size:18px;
|
||||
/* 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}
|
||||
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:18px 6px 14px;text-align:center}
|
||||
#pgz-sb.pgz-collapsed .pgz-sb-h .pgz-logo{font-size:0}
|
||||
#pgz-sb.pgz-collapsed .pgz-sb-h .pgz-logo::before{content:"PG";font-size:13px;color:var(--pgz-gold);font-weight:800}
|
||||
#pgz-sb.pgz-collapsed .pgz-sb-h .pgz-sub{display:none}
|
||||
#pgz-sb.pgz-collapsed .pgz-sb-toggle{position:static;margin:6px auto 0;display:flex}
|
||||
#pgz-sb.pgz-collapsed .pgz-sb-sep{font-size:0;padding:6px 0;text-align:center;border-top:1px dashed var(--rim);margin:6px 8px 4px}
|
||||
#pgz-sb.pgz-collapsed .pgz-nav-i{justify-content:center;padding:10px 6px}
|
||||
#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-ext::after{display:none}
|
||||
#pgz-sb.pgz-collapsed .pgz-sb-foot{padding:10px 6px;justify-content:center}
|
||||
#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 .lo{display:none}
|
||||
#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::after{
|
||||
#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,.45);
|
||||
box-shadow:2px 2px 10px rgba(0,0,0,.55);
|
||||
pointer-events:none;z-index:200;
|
||||
}
|
||||
|
||||
/* Layout helper — apply on body to push content right of sidebar */
|
||||
/* 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 */
|
||||
/* 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)} /* full width on mobile when open */
|
||||
#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}
|
||||
/* overlay backdrop */
|
||||
body.pgz-mobile-sb-open::before{
|
||||
content:"";position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:99;backdrop-filter:blur(2px)
|
||||
}
|
||||
|
||||
+175
-91
@@ -1,36 +1,68 @@
|
||||
/* PGŽ SPORT — Unified Sidebar v1.0
|
||||
/* PGŽ SPORT — Unified Sectioned Sidebar v2.0
|
||||
* dradulic@outlook.com / damir@rinet.one — 2026-05-05
|
||||
* Reference: app.rinet.one/klasik/dabi
|
||||
*
|
||||
* Usage on each page:
|
||||
* <link rel="stylesheet" href="/static/shared/sidebar.css">
|
||||
* <script src="/static/shared/sidebar.js" defer
|
||||
* data-active="app" // page key for highlight: app|admin|crm|erp|kpi|audit|login|sport2
|
||||
* data-inline="0"></script> // 0 (default) = render on load. 1 = call PGZSidebar.mount() yourself
|
||||
* Usage:
|
||||
* <link rel="stylesheet" href="/sport/static/shared/sidebar.css">
|
||||
* <script src="/sport/static/shared/sidebar.js" defer
|
||||
* data-active="dashboard" // active item id
|
||||
* data-portal="portal"></script> // active portal hint (optional)
|
||||
*
|
||||
* The script renders #pgz-sb at start of <body>, adds class "pgz-has-sb" to body
|
||||
* (so existing layouts can be migrated). Pages that already have their own sidebar
|
||||
* should pass data-skip="1" — only NAV_EXTERNAL portal links will be appended to
|
||||
* an element with id="pgz-portal-mount" if present.
|
||||
* Auto-mounts <aside id="pgz-sb"> at start of <body> and adds class "pgz-has-sb" to <body>
|
||||
* for layout. ADMIN section is gated by user role from /api/auth/me.
|
||||
*/
|
||||
(function(){
|
||||
'use strict';
|
||||
|
||||
// ────────── Configuration ──────────
|
||||
// Per-portal "internal" sections (left as a hint; pages typically own their own internal nav)
|
||||
// External portal links — same on every page
|
||||
const NAV_EXTERNAL = [
|
||||
{id:'login', href:'/sport/login', ic:'\u{1F511}', label:'Prijava'},
|
||||
{id:'app', href:'/sport/app', ic:'\u{1F4F1}', label:'Aplikacija'},
|
||||
{id:'admin', href:'/sport/admin', ic:'\u{1F6E1}', label:'Administracija'},
|
||||
{id:'crm', href:'/sport/crm', ic:'\u{1F465}', label:'CRM'},
|
||||
{id:'erp', href:'/sport/erp', ic:'\u{1F4B0}', label:'ERP'},
|
||||
{id:'kpi', href:'/sport/kpi', ic:'\u{1F4C8}', label:'KPI'},
|
||||
{id:'audit', href:'/sport/audit', ic:'\u{1F4CB}', label:'Audit'},
|
||||
{id:'sport2', href:'/sport/static/sport2.html', ic:'\u{1F310}', label:'Public portal'}
|
||||
// Sectioned menu (DABI-style).
|
||||
// href can be:
|
||||
// "/sport/<page>" → cross-portal navigation (full page load)
|
||||
// "/sport/<page>#<hash>" → cross-portal + intent on that page
|
||||
// "#<id>" → in-page anchor (handled by host page on hashchange)
|
||||
const SIDEBAR_SECTIONS = [
|
||||
{title:'PORTAL', items: [
|
||||
{id:'dashboard', ic:'\u{1F4CA}', label:'Dashboard', href:'/sport/static/sport2.html#dashboard'},
|
||||
{id:'savezi', ic:'\u{1F3C5}', label:'Savezi', href:'/sport/static/sport2.html#savezi'},
|
||||
{id:'klubovi', ic:'⬢', label:'Klubovi', href:'/sport/static/sport2.html#klubovi'},
|
||||
{id:'sportasi', ic:'\u{1F464}', label:'Sportaši', href:'/sport/static/sport2.html#sportasi'},
|
||||
{id:'manifestacije', ic:'\u{1F4C5}', label:'Manifestacije', href:'/sport/static/sport2.html#manifestacije'}
|
||||
]},
|
||||
{title:'OPERATIVA', items: [
|
||||
{id:'profil', ic:'\u{1F464}', label:'Moj profil', href:'/sport/app#profil'},
|
||||
{id:'app', ic:'\u{1F4F1}', label:'Aplikacija', href:'/sport/app'},
|
||||
{id:'kalendar', ic:'\u{1F4C5}', label:'Kalendar', href:'/sport/app#kalendar'},
|
||||
{id:'notif', ic:'\u{1F514}', label:'Notifikacije', href:'/sport/app#notif'}
|
||||
]},
|
||||
{title:'CRM', items: [
|
||||
{id:'clanarine', ic:'\u{1F4B3}', label:'Članarine', href:'/sport/crm#clanarine'},
|
||||
{id:'lijecnicki',ic:'⚕', label:'Liječnički', href:'/sport/crm#lijecnicki'},
|
||||
{id:'obrasci', ic:'\u{1F4CB}', label:'Obrasci', href:'/sport/crm#obrasci'},
|
||||
{id:'dokumenti', ic:'\u{1F4C4}', label:'Dokumenti', href:'/sport/crm#dokumenti'}
|
||||
]},
|
||||
{title:'ERP', items: [
|
||||
{id:'racuni', ic:'\u{1F9FE}', label:'Računi (OCR)', href:'/sport/erp#racuni'},
|
||||
{id:'putni', ic:'✈', label:'Putni nalozi', href:'/sport/erp#putni'},
|
||||
{id:'placanja', ic:'\u{1F4B0}', label:'Plaćanja', href:'/sport/erp#placanja'},
|
||||
{id:'xlsx', ic:'\u{1F4C8}', label:'XLSX export', href:'/sport/erp#xlsx'}
|
||||
]},
|
||||
{title:'ANALITIKA', items: [
|
||||
{id:'kpi', ic:'\u{1F4C8}', label:'KPI Dashboard', href:'/sport/kpi'},
|
||||
{id:'financije', ic:'€', label:'Financije', href:'/sport/static/sport2.html#financije'},
|
||||
{id:'mreza', ic:'\u{1F578}', label:'Mreža (graf)', href:'/sport/static/sport2.html#mreza'},
|
||||
{id:'forenzika', ic:'⚠', label:'Forenzika', href:'/sport/static/sport2.html#forenzika'},
|
||||
{id:'audit', ic:'\u{1F512}', label:'Audit log', href:'/sport/audit'}
|
||||
]},
|
||||
{title:'ADMIN', requireRole:['pgz_admin','super_admin'], items: [
|
||||
{id:'korisnici', ic:'\u{1F465}', label:'Korisnici', href:'/sport/admin#korisnici'},
|
||||
{id:'tenanti', ic:'\u{1F3E2}', label:'Tenanti', href:'/sport/admin#tenanti'},
|
||||
{id:'sigurnost', ic:'\u{1F6E1}', label:'Sigurnost', href:'/sport/admin#sigurnost'},
|
||||
{id:'sustav', ic:'⚙', label:'Sustav', href:'/sport/admin#sustav'}
|
||||
]}
|
||||
];
|
||||
|
||||
const STATE_KEY = 'sidebarCollapsed'; // shared across all pages
|
||||
const STATE_KEY = 'sidebarCollapsed';
|
||||
const $ = (s, root) => (root||document).querySelector(s);
|
||||
const esc = s => String(s==null?'':s).replace(/[&<>"']/g, m => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[m]));
|
||||
|
||||
function readToken(){
|
||||
try { return localStorage.getItem('jwt') || localStorage.getItem('access_token') || ''; }
|
||||
@@ -38,7 +70,11 @@
|
||||
}
|
||||
function logout(){
|
||||
if(!confirm('Odjava iz aplikacije?')) return;
|
||||
try { localStorage.removeItem('jwt'); localStorage.removeItem('access_token'); localStorage.removeItem('app-role'); } catch(e){}
|
||||
try {
|
||||
localStorage.removeItem('jwt');
|
||||
localStorage.removeItem('access_token');
|
||||
localStorage.removeItem('app-role');
|
||||
} catch(e){}
|
||||
location.href = '/sport/login';
|
||||
}
|
||||
function initials(n){
|
||||
@@ -46,55 +82,79 @@
|
||||
const p = String(n).trim().split(/\s+/);
|
||||
return ((p[0]||'')[0]||'').toUpperCase() + ((p[1]||'')[0]||'').toUpperCase();
|
||||
}
|
||||
function esc(s){
|
||||
return String(s==null?'':s).replace(/[&<>"']/g, m => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[m]));
|
||||
|
||||
// Determine current page intent
|
||||
function getActiveKey(){
|
||||
const cs = document.currentScript || Array.from(document.scripts).find(s => /sidebar\.js/.test(s.src||''));
|
||||
return (cs && cs.dataset && cs.dataset.active) || '';
|
||||
}
|
||||
|
||||
// Try to read /api/auth/me for footer display (best effort)
|
||||
async function tryLoadMe(){
|
||||
const tok = readToken(); if(!tok) return null;
|
||||
function userCanSeeSection(sec, user){
|
||||
if(!sec.requireRole || !sec.requireRole.length) return true;
|
||||
if(!user) return false;
|
||||
return sec.requireRole.indexOf(user.user_type) >= 0;
|
||||
}
|
||||
|
||||
function renderSections(activeKey, user){
|
||||
const out = [];
|
||||
for(const sec of SIDEBAR_SECTIONS){
|
||||
if(!userCanSeeSection(sec, user)) continue;
|
||||
out.push(`<div class="pgz-sb-section ${sec.title==='ADMIN'?'pgz-admin':''}">${esc(sec.title)}</div>`);
|
||||
for(const it of sec.items){
|
||||
const active = it.id === activeKey;
|
||||
const cross = it.href && it.href.startsWith('/sport/') && !sameOrigin(it.href);
|
||||
out.push(`<a class="pgz-nav-i ${active?'active':''} ${cross?'cross-portal':''}"
|
||||
href="${esc(it.href)}" data-id="${esc(it.id)}" data-label="${esc(it.label)}">
|
||||
<span class="ic">${it.ic||'•'}</span>
|
||||
<span class="lbl">${esc(it.label)}</span>
|
||||
${it.badge?`<span class="badge">${esc(it.badge)}</span>`:''}
|
||||
</a>`);
|
||||
}
|
||||
}
|
||||
return out.join('');
|
||||
}
|
||||
|
||||
// is this href same as current page (just hash navigation)?
|
||||
function sameOrigin(href){
|
||||
try {
|
||||
const r = await fetch('/sport/api/auth/me', {headers:{'Authorization':'Bearer '+tok}});
|
||||
if(!r.ok) return null;
|
||||
return await r.json();
|
||||
} catch(e){ return null; }
|
||||
const u = new URL(href, location.href);
|
||||
return u.origin === location.origin && u.pathname === location.pathname;
|
||||
} catch(e){ return false; }
|
||||
}
|
||||
|
||||
function renderShell(activeKey, internalNavHTML){
|
||||
function renderShell(activeKey, user){
|
||||
const sb = document.createElement('aside');
|
||||
sb.id = 'pgz-sb';
|
||||
sb.innerHTML = `
|
||||
<div class="pgz-sb-h">
|
||||
<div class="pgz-logo">PGŽ <span class="g">SPORT</span></div>
|
||||
<div class="pgz-sub">Operativna platforma</div>
|
||||
<div class="pgz-sb-toggle" onclick="PGZSidebar.toggle()" title="Skupi/raširi (≡)">≡</div>
|
||||
<div class="pgz-mark">PGŽ</div>
|
||||
<div class="pgz-htxt">
|
||||
<div class="pgz-logo">PGŽ <span class="g">SPORT</span></div>
|
||||
<div class="pgz-sub">Odjel za sport</div>
|
||||
</div>
|
||||
<div class="pgz-sb-toggle" onclick="PGZSidebar.toggle()" title="Skupi/raširi">←</div>
|
||||
<div class="pgz-sb-mx" onclick="PGZSidebar.closeMobile()" title="Zatvori">✕</div>
|
||||
</div>
|
||||
${internalNavHTML ? `<div class="pgz-sb-sep">Sekcije</div>` : ''}
|
||||
<nav class="pgz-sb-nav" id="pgz-sb-nav">
|
||||
${internalNavHTML || ''}
|
||||
<div class="pgz-sb-sep" id="pgz-portal-sep">Portali</div>
|
||||
<div id="pgz-portal-mount">${renderExternal(activeKey)}</div>
|
||||
</nav>
|
||||
<div class="pgz-sb-foot" id="pgz-sb-foot">
|
||||
<nav class="pgz-sb-nav" id="pgz-sb-nav">${renderSections(activeKey, user)}</nav>
|
||||
<div class="pgz-sb-foot" id="pgz-sb-foot" onclick="PGZSidebar.toggleUserMenu(event)">
|
||||
<div class="av" id="pgz-sb-av">PG</div>
|
||||
<div class="ui">
|
||||
<div class="un" id="pgz-sb-un">Gost</div>
|
||||
<div class="ur" id="pgz-sb-ur">Demo</div>
|
||||
</div>
|
||||
<div class="lo" onclick="PGZSidebar.logout()" title="Odjava">⎋</div>
|
||||
<div class="caret">▾</div>
|
||||
<div class="pgz-user-menu" id="pgz-user-menu" onclick="event.stopPropagation()">
|
||||
<a href="/sport/app#profil"><span>👤</span><span>Moj profil</span></a>
|
||||
<a href="/sport/app#postavke"><span>⚙</span><span>Postavke</span></a>
|
||||
<a href="/sport/static/sport2.html"><span>🌐</span><span>Public portal</span></a>
|
||||
<div class="sep"></div>
|
||||
<a href="/sport/login" id="pgz-menu-login"><span>🔑</span><span>Prijava</span></a>
|
||||
<a class="danger" id="pgz-menu-logout" onclick="PGZSidebar.logout()" style="display:none"><span>⎋</span><span>Odjava</span></a>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
return sb;
|
||||
}
|
||||
function renderExternal(activeKey){
|
||||
return NAV_EXTERNAL.map(n => `
|
||||
<a class="pgz-nav-i pgz-nav-ext ${n.id===activeKey?'active':''}"
|
||||
href="${n.href}" data-id="${n.id}" data-label="${esc(n.label)}">
|
||||
<span class="ic">${n.ic}</span>
|
||||
<span class="lbl">${esc(n.label)}</span>
|
||||
</a>`).join('');
|
||||
}
|
||||
function renderBurger(){
|
||||
if(document.getElementById('pgz-sb-burger')) return;
|
||||
const b = document.createElement('div');
|
||||
@@ -106,22 +166,28 @@
|
||||
}
|
||||
|
||||
function setUserDisplay(me){
|
||||
const un = $('#pgz-sb-un'), ur = $('#pgz-sb-ur'), av = $('#pgz-sb-av');
|
||||
const loginLink = document.getElementById('pgz-menu-login');
|
||||
const logoutLink = document.getElementById('pgz-menu-logout');
|
||||
if(!me){
|
||||
$('#pgz-sb-un') && ($('#pgz-sb-un').textContent = 'Gost');
|
||||
$('#pgz-sb-ur') && ($('#pgz-sb-ur').textContent = 'Demo · click Prijava');
|
||||
$('#pgz-sb-av') && ($('#pgz-sb-av').textContent = '?');
|
||||
if(un) un.textContent = 'Gost';
|
||||
if(ur) ur.textContent = 'Klikni za prijavu';
|
||||
if(av){ av.textContent = '?'; av.innerHTML = av.innerHTML; }
|
||||
if(loginLink) loginLink.style.display = 'flex';
|
||||
if(logoutLink) logoutLink.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
const name = me.full_name || ((me.ime||'')+' '+(me.prezime||'')).trim() || me.email || '—';
|
||||
const role = me.user_type || '';
|
||||
const av = me.avatar_url || me.google_picture;
|
||||
if($('#pgz-sb-un')) $('#pgz-sb-un').textContent = name;
|
||||
if($('#pgz-sb-ur')) $('#pgz-sb-ur').textContent = role;
|
||||
const avEl = $('#pgz-sb-av');
|
||||
if(avEl){
|
||||
if(av) avEl.innerHTML = `<img src="${esc(av)}" alt="">`;
|
||||
else avEl.textContent = initials(name);
|
||||
const avSrc = me.avatar_url || me.google_picture;
|
||||
if(un) un.textContent = name;
|
||||
if(ur) ur.textContent = role;
|
||||
if(av){
|
||||
if(avSrc) av.innerHTML = `<img src="${esc(avSrc)}" alt="">`;
|
||||
else av.textContent = initials(name);
|
||||
}
|
||||
if(loginLink) loginLink.style.display = 'none';
|
||||
if(logoutLink) logoutLink.style.display = 'flex';
|
||||
}
|
||||
|
||||
function applyCollapsedFromStorage(){
|
||||
@@ -133,39 +199,42 @@
|
||||
document.body.classList.toggle('pgz-sb-col', col);
|
||||
}
|
||||
|
||||
async function tryLoadMe(){
|
||||
const tok = readToken(); if(!tok) return null;
|
||||
try {
|
||||
const r = await fetch('/sport/api/auth/me', {headers:{'Authorization':'Bearer '+tok}});
|
||||
if(!r.ok) return null;
|
||||
return await r.json();
|
||||
} catch(e){ return null; }
|
||||
}
|
||||
|
||||
// ────────── Public API ──────────
|
||||
const PGZSidebar = {
|
||||
NAV_EXTERNAL,
|
||||
SIDEBAR_SECTIONS,
|
||||
|
||||
// Render: insert sidebar shell at document start; if a page provides internalNavHTML, use it
|
||||
mount(opts){
|
||||
async mount(opts){
|
||||
opts = opts || {};
|
||||
const activeKey = opts.activeKey || (document.currentScript && document.currentScript.dataset.active) || '';
|
||||
const internalNavHTML = opts.internalNavHTML || '';
|
||||
// Skip mount if the page already has its own sidebar AND a portal mount point is provided
|
||||
if(opts.skipShell){
|
||||
const mount = document.getElementById('pgz-portal-mount');
|
||||
if(mount){ mount.innerHTML = renderExternal(activeKey); }
|
||||
return;
|
||||
}
|
||||
const activeKey = opts.activeKey || getActiveKey();
|
||||
const existing = document.getElementById('pgz-sb');
|
||||
if(existing) existing.remove();
|
||||
const sb = renderShell(activeKey, internalNavHTML);
|
||||
|
||||
// Try /api/auth/me first so ADMIN section is gated correctly
|
||||
const me = await tryLoadMe();
|
||||
const sb = renderShell(activeKey, me);
|
||||
document.body.insertBefore(sb, document.body.firstChild);
|
||||
document.body.classList.add('pgz-has-sb');
|
||||
renderBurger();
|
||||
applyCollapsedFromStorage();
|
||||
tryLoadMe().then(setUserDisplay);
|
||||
},
|
||||
setUserDisplay(me);
|
||||
|
||||
// Append portal links to an existing custom sidebar (call this from a page's own buildNav)
|
||||
appendPortalLinksTo(navEl, activeKey){
|
||||
if(!navEl) return;
|
||||
activeKey = activeKey || '';
|
||||
navEl.insertAdjacentHTML('beforeend',
|
||||
'<div class="pgz-sb-sep" style="padding:14px 14px 4px 14px;font-size:9.5px;color:var(--t4,#4e5a7a);text-transform:uppercase;letter-spacing:1.2px;font-weight:700">Portali</div>'
|
||||
);
|
||||
navEl.insertAdjacentHTML('beforeend', renderExternal(activeKey));
|
||||
// listen for hashchange to update active item without reload
|
||||
window.addEventListener('hashchange', () => {
|
||||
const h = location.hash.replace(/^#/,'');
|
||||
if(!h) return;
|
||||
document.querySelectorAll('#pgz-sb .pgz-nav-i').forEach(el => {
|
||||
el.classList.toggle('active', el.dataset.id===h);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
toggle(){
|
||||
@@ -180,7 +249,6 @@
|
||||
if(!sb) return;
|
||||
sb.classList.add('pgz-mobile-open');
|
||||
document.body.classList.add('pgz-mobile-sb-open');
|
||||
// close on backdrop click
|
||||
const closer = (ev) => {
|
||||
if(!sb.contains(ev.target) && ev.target.id !== 'pgz-sb-burger'){
|
||||
PGZSidebar.closeMobile();
|
||||
@@ -195,20 +263,36 @@
|
||||
sb.classList.remove('pgz-mobile-open');
|
||||
document.body.classList.remove('pgz-mobile-sb-open');
|
||||
},
|
||||
toggleUserMenu(ev){
|
||||
ev && ev.stopPropagation();
|
||||
const f = document.getElementById('pgz-sb-foot');
|
||||
const m = document.getElementById('pgz-user-menu');
|
||||
if(!f || !m) return;
|
||||
const open = f.classList.toggle('menu-open');
|
||||
m.classList.toggle('open', open);
|
||||
if(open){
|
||||
const closer = (e) => {
|
||||
if(!f.contains(e.target)){
|
||||
f.classList.remove('menu-open');
|
||||
m.classList.remove('open');
|
||||
document.removeEventListener('click', closer, true);
|
||||
}
|
||||
};
|
||||
setTimeout(() => document.addEventListener('click', closer, true), 50);
|
||||
}
|
||||
},
|
||||
logout
|
||||
};
|
||||
window.PGZSidebar = PGZSidebar;
|
||||
|
||||
// Auto-mount unless data-inline=1
|
||||
function autoMount(){
|
||||
const cs = document.currentScript || Array.from(document.scripts).find(s => /sidebar\.js/.test(s.src||''));
|
||||
const inline = cs && cs.dataset && cs.dataset.inline === '1';
|
||||
if(inline) return; // page will call PGZSidebar.mount() itself
|
||||
const cs = document.currentScript;
|
||||
const inline = cs && cs.dataset && cs.dataset.inline === '1';
|
||||
if(!inline){
|
||||
if(document.readyState === 'loading'){
|
||||
document.addEventListener('DOMContentLoaded', () => PGZSidebar.mount({}));
|
||||
} else {
|
||||
PGZSidebar.mount({});
|
||||
}
|
||||
}
|
||||
autoMount();
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user