<?php
/**
 * ╔══════════════════════════════════════════════════════════╗
 * ║  navbar.php — Sidebar + Topbar + Loader                 ║
 * ║  MA As-Syafi'iyah 02 Bekasi                             ║
 * ╠══════════════════════════════════════════════════════════╣
 * ║  CARA PAKAI — di bagian PALING ATAS setiap halaman:     ║
 * ║                                                          ║
 * ║  <?php                                                   ║
 * ║    $page_title  = 'Halaman — MA As-Syafi\'iyah 02';     ║
 * ║    $active_menu = 'siswa';                               ║
 * ║    $loader_text = 'Memuat Data';                         ║
 * ║    include 'navbar.php';                                 ║
 * ║  ?>                                                      ║
 * ║  <div class="main"><div class="wrap">                    ║
 * ║    ... konten ...                                        ║
 * ║  </div></div>                                            ║
 * ║                                                          ║
 * ║  SLUG $active_menu:                                      ║
 * ║    dashboard | surat | siswa | guru | kelas | mapel |   ║
 * ║    absensi | nilai | spp | laporan | user | pengaturan  ║
 * ╚══════════════════════════════════════════════════════════╝
 */

/* ── Guard ── */
if (session_status() === PHP_SESSION_NONE) session_start();
if (!isset($_SESSION['login'])) { header("Location: login.php"); exit(); }
if (isset($_SESSION['role'])) {
    if ($_SESSION['role'] === 'guru')                 { header("Location: dashboard_guru.php");  exit(); }
    if (in_array($_SESSION['role'], ['staff','tu']))  { header("Location: dashboard_staff.php"); exit(); }
}

$_nb_nama = $_SESSION['nama'] ?? 'Pengguna';
$_nb_role = $_SESSION['role'] ?? 'admin';
$_nb_foto = $_SESSION['foto'] ?? '';

$page_title  = $page_title  ?? "MA As-Syafi'iyah 02";
$active_menu = $active_menu ?? 'dashboard';
$loader_text = $loader_text ?? 'Memuat Halaman';

function nb_on(string $slug): string {
    global $active_menu;
    return $active_menu === $slug ? ' on' : '';
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title><?= htmlspecialchars($page_title) ?></title>
<link rel="icon" href="assets/sekolah.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Outfit:wght@300;400;500;600;700;800;900&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
/* ════════════════════════════════════════════════════════
   DESIGN TOKENS
════════════════════════════════════════════════════════ */
:root {
    --ob:    #080C14;
    --ob-m:  #0E1520;
    --ob-l:  #141D2E;
    --ob-ll: #1C2840;
    --g:     #C9A84C;
    --g-l:   #E0C06A;
    --g-d:   #A8893A;
    --g-fg:  #FDF0C8;
    --bg:    #F7F5F2;
    --sf:    #FFFFFF;
    --tx:    #131820;
    --txm:   #5A6478;
    --txl:   #9BA4B5;
    --bd:    #E8E4DC;
    --bd-d:  #D4CCBF;
    --sh:    rgba(8,12,20,.06);
    --sh-m:  rgba(8,12,20,.10);
    --sh-s:  rgba(8,12,20,.18);

    /* Sidebar lebar penuh */
    --sw:    272px;
    /* Sidebar collapsed (hanya icon) */
    --sw-c:  68px;

    /* Durasi animasi collapse */
    --sb-dur: .3s;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
    font-family:'Outfit',sans-serif;
    background:var(--bg); color:var(--tx);
    min-height:100vh; display:flex;
    -webkit-font-smoothing:antialiased;
}

/* ════════════════════════════════════════════════════════
   LOADER
════════════════════════════════════════════════════════ */
.nb-ldr {
    position:fixed; inset:0; z-index:9999;
    background:var(--ob);
    display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:2rem;
    transition:opacity .7s ease, visibility .7s ease;
}
.nb-ldr.gone { opacity:0; visibility:hidden; pointer-events:none; }

.nb-lring { width:100px; height:100px; position:relative; }
.nb-lring::before,
.nb-lring::after { content:''; position:absolute; border-radius:50%; }
.nb-lring::before { inset:0; border:2px solid rgba(201,168,76,.15); }
.nb-lring::after {
    inset:4px; border:2px solid transparent;
    border-top-color:var(--g);
    animation:nb-spin 1s linear infinite;
}
.nb-linner {
    position:absolute; inset:18px;
    background:var(--ob-l); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; border:1px solid rgba(201,168,76,.2);
}
.nb-linner img { width:38px; height:38px; object-fit:contain; }
.nb-ltxt {
    font-family:'DM Serif Display',serif;
    font-size:1.25rem; color:rgba(255,255,255,.6); letter-spacing:.05em;
}
.nb-ldots { display:flex; gap:.5rem; margin-top:-.5rem; }
.nb-ldot {
    width:6px; height:6px; border-radius:50%; background:var(--g);
    animation:nb-ldot .8s ease-in-out infinite;
}
.nb-ldot:nth-child(2) { animation-delay:.15s; }
.nb-ldot:nth-child(3) { animation-delay:.30s; }
@keyframes nb-spin { to { transform:rotate(360deg); } }
@keyframes nb-ldot {
    0%,80%,100% { transform:scale(.6); opacity:.4; }
    40%         { transform:scale(1);  opacity:1;  }
}

/* ════════════════════════════════════════════════════════
   TOPBAR — mobile only
════════════════════════════════════════════════════════ */
.nb-top {
    display:none;
    position:fixed; top:0; left:0; right:0; height:60px;
    background:var(--ob); border-bottom:1px solid rgba(201,168,76,.12);
    z-index:198; padding:0 1rem;
    align-items:center; justify-content:space-between;
    box-shadow:0 2px 16px rgba(0,0,0,.25);
}
.nb-top-brand { display:flex; align-items:center; gap:.625rem; }
.nb-top-logo {
    width:34px; height:34px; border-radius:9px;
    background:var(--ob-l); border:1.5px solid var(--g-d);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.nb-top-logo img { width:24px; height:24px; object-fit:contain; }
.nb-top-name { font-family:'DM Serif Display',serif; font-size:.85rem; color:var(--g-fg); }
.nb-hmb {
    width:42px; height:42px;
    background:rgba(201,168,76,.1); border:1.5px solid rgba(201,168,76,.2);
    border-radius:10px; display:flex; align-items:center; justify-content:center;
    font-size:1.15rem; cursor:pointer; transition:background .2s; flex-shrink:0;
    -webkit-tap-highlight-color:transparent;
}
.nb-hmb:hover { background:rgba(201,168,76,.18); }

/* ════════════════════════════════════════════════════════
   OVERLAY
════════════════════════════════════════════════════════ */
.nb-ov {
    display:none; position:fixed; inset:0; z-index:199;
    background:rgba(8,12,20,.55); backdrop-filter:blur(2px);
    opacity:0; pointer-events:none; transition:opacity .3s;
}
.nb-ov.show { opacity:1; pointer-events:all; }

/* ════════════════════════════════════════════════════════
   SIDEBAR
════════════════════════════════════════════════════════ */
.nb-sb {
    position:fixed; top:0; left:0; bottom:0;
    width:var(--sw);
    background:var(--ob);
    display:flex; flex-direction:column;
    z-index:200; overflow:hidden;
    transition:
        width var(--sb-dur) cubic-bezier(.4,0,.2,1),
        transform var(--sb-dur) cubic-bezier(.4,0,.2,1);
}
.nb-sb::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background-image:
        linear-gradient(rgba(201,168,76,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201,168,76,.04) 1px, transparent 1px);
    background-size:32px 32px;
}
.nb-sb::after {
    content:''; position:absolute; top:-60px; left:50%;
    transform:translateX(-50%); width:200px; height:120px;
    background:radial-gradient(ellipse, rgba(201,168,76,.18) 0%, transparent 70%);
    pointer-events:none;
}

/* ── Collapsed state (desktop) ── */
.nb-sb.collapsed { width:var(--sw-c); }

/* ════════════════════════════════════════════════════════
   BRAND BLOCK
════════════════════════════════════════════════════════ */
.nb-brand {
    padding:1.5rem 1.25rem;
    display:flex; align-items:center; gap:.875rem;
    border-bottom:1px solid rgba(201,168,76,.1);
    position:relative; z-index:1; flex-shrink:0;
    /* Tombol toggle ada di pojok kanan brand */
    justify-content:space-between;
    min-height:80px;
}
.nb-brand-left { display:flex; align-items:center; gap:.875rem; flex:1; min-width:0; }
.nb-blogo {
    width:44px; height:44px; border-radius:13px;
    background:linear-gradient(135deg, var(--ob-ll), var(--ob-l));
    border:1.5px solid var(--g-d);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; flex-shrink:0;
    box-shadow:0 0 0 3px rgba(201,168,76,.15), 0 8px 20px rgba(0,0,0,.3);
    transition:all var(--sb-dur);
}
.nb-blogo img { width:30px; height:30px; object-fit:contain; }
.nb-btext {
    min-width:0; overflow:hidden;
    transition:opacity var(--sb-dur), width var(--sb-dur);
    white-space:nowrap;
}
.nb-bname { font-family:'DM Serif Display',serif; font-size:.92rem; color:var(--g-fg); line-height:1.2; }
.nb-bsub  { font-size:.6rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.32); margin-top:.1rem; }

/* Toggle button — tombol panah di brand */
.nb-toggle {
    width:30px; height:30px; border-radius:8px;
    background:rgba(201,168,76,.1); border:1px solid rgba(201,168,76,.2);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; flex-shrink:0; transition:all .25s;
    color:rgba(201,168,76,.8); font-size:.85rem;
    -webkit-tap-highlight-color:transparent;
}
.nb-toggle:hover { background:rgba(201,168,76,.2); color:var(--g-l); }
.nb-toggle svg {
    width:14px; height:14px;
    transition:transform var(--sb-dur) cubic-bezier(.4,0,.2,1);
    stroke:currentColor; fill:none; stroke-width:2.5;
    stroke-linecap:round; stroke-linejoin:round;
}

/* Collapsed brand */
.nb-sb.collapsed .nb-btext  { opacity:0; width:0; pointer-events:none; }
.nb-sb.collapsed .nb-toggle svg { transform:rotate(180deg); }
.nb-sb.collapsed .nb-brand  { justify-content:center; padding:1.5rem .875rem; }
.nb-sb.collapsed .nb-brand-left { justify-content:center; }
.nb-sb.collapsed .nb-blogo  { margin:0; }
.nb-sb.collapsed .nb-toggle { display:none; } /* sembunyikan di sidebar collapsed — pakai tooltip */

/* Tombol expand saat collapsed — tampil di pojok kiri bawah brand */
.nb-expand-btn {
    display:none;
    position:absolute; right:-14px; top:50%; transform:translateY(-50%);
    width:28px; height:28px; border-radius:50%;
    background:var(--ob-ll); border:1.5px solid rgba(201,168,76,.35);
    align-items:center; justify-content:center;
    cursor:pointer; z-index:10; transition:all .25s;
    color:var(--g-l); font-size:.75rem; box-shadow:0 2px 8px rgba(0,0,0,.3);
    -webkit-tap-highlight-color:transparent;
}
.nb-expand-btn:hover { background:rgba(201,168,76,.2); border-color:var(--g); transform:translateY(-50%) scale(1.1); }
.nb-sb.collapsed .nb-expand-btn { display:flex; }

/* ════════════════════════════════════════════════════════
   NAV
════════════════════════════════════════════════════════ */
.nb-nav { flex:1; padding:1rem 0; overflow-y:auto; overflow-x:hidden; position:relative; z-index:1; }
.nb-nav::-webkit-scrollbar { width:3px; }
.nb-nav::-webkit-scrollbar-thumb { background:rgba(201,168,76,.2); border-radius:3px; }

.nb-grp {
    font-size:.6rem; font-weight:700; letter-spacing:.18em;
    text-transform:uppercase; color:rgba(255,255,255,.25);
    padding:.875rem 1.5rem .4rem;
    white-space:nowrap; overflow:hidden;
    transition:opacity var(--sb-dur), padding var(--sb-dur);
}
.nb-sb.collapsed .nb-grp { opacity:0; padding-top:.5rem; padding-bottom:.2rem; pointer-events:none; }

/* Divider muncul saat collapsed sebagai pengganti grup label */
.nb-grp::before {
    content:''; display:none;
    height:1px; background:rgba(201,168,76,.12);
    margin:0 .875rem .5rem;
}
.nb-sb.collapsed .nb-grp::before { display:block; }

.nb-a {
    display:flex; align-items:center; gap:.875rem;
    padding:.7rem 1.25rem;
    color:rgba(255,255,255,.5);
    text-decoration:none; font-size:.875rem; font-weight:500;
    position:relative; transition:color .22s, padding var(--sb-dur);
    cursor:pointer; white-space:nowrap;
    -webkit-tap-highlight-color:transparent;
}
.nb-a::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg, transparent, rgba(201,168,76,.07), transparent);
    transform:translateX(-100%); transition:transform .5s ease; pointer-events:none;
}
.nb-a::after {
    content:''; position:absolute; left:0; top:50%;
    transform:translateY(-50%); width:3px; height:0;
    background:var(--g); border-radius:0 3px 3px 0;
    transition:height .22s cubic-bezier(.34,1.56,.64,1);
}
.nb-a:hover, .nb-a.on { color:var(--g-l); background:rgba(201,168,76,.06); }
.nb-a:hover::before, .nb-a.on::before { transform:translateX(100%); }
.nb-a:hover::after,  .nb-a.on::after  { height:70%; }

/* Label teks nav */
.nb-albl {
    flex:1; overflow:hidden;
    transition:opacity var(--sb-dur), width var(--sb-dur), max-width var(--sb-dur);
    white-space:nowrap; max-width:200px;
}
.nb-sb.collapsed .nb-albl { opacity:0; max-width:0; pointer-events:none; }

.nb-ico {
    width:34px; height:34px; border-radius:9px;
    background:rgba(255,255,255,.05);
    display:flex; align-items:center; justify-content:center;
    font-size:1.05rem; flex-shrink:0;
    transition:all .25s cubic-bezier(.34,1.56,.64,1);
}
.nb-a:hover .nb-ico, .nb-a.on .nb-ico {
    background:rgba(201,168,76,.15);
    transform:scale(1.12) rotate(-4deg);
}

/* Collapsed nav — center icons */
.nb-sb.collapsed .nb-a {
    padding:.7rem 0;
    justify-content:center;
    gap:0;
}
.nb-sb.collapsed .nb-ico { margin:0; }

/* Tooltip saat collapsed — tampil di kanan icon */
.nb-sb.collapsed .nb-a { position:relative; }
.nb-sb.collapsed .nb-albl {
    position:absolute; left:calc(var(--sw-c) + 8px);
    background:var(--ob-ll); color:rgba(255,255,255,.9);
    padding:.4rem .875rem; border-radius:8px;
    font-size:.8rem; font-weight:600;
    border:1px solid rgba(201,168,76,.2);
    box-shadow:0 4px 16px rgba(0,0,0,.3);
    opacity:0; max-width:none; width:max-content;
    pointer-events:none;
    transition:opacity .18s;
    z-index:300;
}
.nb-sb.collapsed .nb-a:hover .nb-albl { opacity:1; }

/* ════════════════════════════════════════════════════════
   FOOTER / USER
════════════════════════════════════════════════════════ */
.nb-foot {
    padding:1.25rem;
    border-top:1px solid rgba(201,168,76,.1);
    flex-shrink:0; position:relative; z-index:1;
    transition:padding var(--sb-dur);
}
.nb-usr {
    display:flex; align-items:center; gap:.75rem;
    padding:.75rem .875rem;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
    border-radius:12px; margin-bottom:.75rem;
    overflow:hidden;
    transition:padding var(--sb-dur), justify-content var(--sb-dur);
}
.nb-uav {
    width:34px; height:34px; border-radius:50%;
    background:linear-gradient(135deg, var(--g-d), var(--g));
    display:flex; align-items:center; justify-content:center;
    font-size:1rem; flex-shrink:0; overflow:hidden;
    border:1.5px solid rgba(201,168,76,.4);
}
.nb-uav img { width:34px; height:34px; object-fit:cover; }
.nb-uinfo {
    flex:1; min-width:0; overflow:hidden;
    transition:opacity var(--sb-dur), max-width var(--sb-dur);
    max-width:200px;
}
.nb-uname { font-size:.8rem; font-weight:700; color:rgba(255,255,255,.85); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nb-urole {
    display:inline-block; margin-top:.15rem;
    font-size:.56rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    padding:.1rem .5rem; border-radius:50px;
    background:rgba(201,168,76,.2); color:var(--g-l); border:1px solid rgba(201,168,76,.25);
}
.nb-logout-wrap { overflow:hidden; transition:max-height var(--sb-dur), opacity var(--sb-dur); max-height:60px; }
.nb-logout {
    display:flex; align-items:center; justify-content:center; gap:.625rem;
    width:100%; padding:.7rem;
    background:linear-gradient(135deg, rgba(155,28,28,.7), rgba(185,28,28,.6));
    color:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.08);
    border-radius:10px; cursor:pointer;
    font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    font-family:'Outfit',sans-serif; text-decoration:none;
    transition:all .25s; white-space:nowrap;
}
.nb-logout:hover {
    background:linear-gradient(135deg, #9B1C1C, #B91C1C);
    transform:translateY(-2px); box-shadow:0 6px 20px rgba(155,28,28,.35);
}
.nb-logout-icon { font-size:1rem; flex-shrink:0; }
.nb-logout-txt  { transition:opacity var(--sb-dur), max-width var(--sb-dur); max-width:160px; white-space:nowrap; overflow:hidden; }

/* Collapsed footer */
.nb-sb.collapsed .nb-foot    { padding:1rem .625rem; }
.nb-sb.collapsed .nb-usr     { padding:.625rem; justify-content:center; }
.nb-sb.collapsed .nb-uinfo   { opacity:0; max-width:0; pointer-events:none; }
.nb-sb.collapsed .nb-logout  { padding:.6rem; border-radius:10px; gap:0; }
.nb-sb.collapsed .nb-logout-txt { opacity:0; max-width:0; }

/* ════════════════════════════════════════════════════════
   MAIN WRAPPER
════════════════════════════════════════════════════════ */
.main {
    margin-left:var(--sw);
    flex:1; min-height:100vh;
    display:flex; flex-direction:column;
    transition:margin-left var(--sb-dur) cubic-bezier(.4,0,.2,1);
}
.wrap { max-width:1400px; margin:0 auto; padding:2rem 2.5rem; flex:1; width:100%; }

/* Saat collapsed: main geser kiri */
body.sb-collapsed .main { margin-left:var(--sw-c); }

/* ════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════ */
@media (max-width:1400px) { .wrap { padding:1.75rem 2rem; } }
@media (max-width:1024px) { :root { --sw:240px; } }

/* Desktop: sidebar selalu tampil */
@media (min-width:769px) {
    .nb-sb { transform:translateX(0) !important; }
}

/* Mobile: sidebar hidden + topbar tampil */
@media (max-width:768px) {
    .nb-top { display:flex; }
    .nb-ov  { display:block; }
    .nb-sb  { transform:translateX(-100%); width:var(--sw) !important; }
    .nb-sb.open { transform:translateX(0); }
    /* Saat mobile, jangan collapsed */
    .nb-sb.collapsed { width:var(--sw) !important; }
    .nb-sb.collapsed .nb-btext   { opacity:1; width:auto; pointer-events:auto; }
    .nb-sb.collapsed .nb-albl    { position:static; opacity:1; max-width:200px; width:auto; background:none; border:none; box-shadow:none; padding:0; font-size:.875rem; color:inherit; }
    .nb-sb.collapsed .nb-grp     { opacity:1; padding:.875rem 1.5rem .4rem; pointer-events:auto; }
    .nb-sb.collapsed .nb-uinfo   { opacity:1; max-width:200px; pointer-events:auto; }
    .nb-sb.collapsed .nb-logout-txt { opacity:1; max-width:160px; }
    .nb-sb.collapsed .nb-logout  { gap:.625rem; }
    .nb-sb.collapsed .nb-expand-btn { display:none; }
    .nb-sb.collapsed .nb-toggle  { display:flex; }
    .nb-sb.collapsed .nb-brand   { justify-content:space-between; padding:1.5rem 1.25rem; }
    .nb-sb.collapsed .nb-brand-left { justify-content:flex-start; }
    .nb-sb.collapsed .nb-a       { padding:.7rem 1.25rem; justify-content:flex-start; gap:.875rem; }
    .nb-sb.collapsed .nb-ico     { margin:0; }
    .nb-sb.collapsed .nb-usr     { padding:.75rem .875rem; justify-content:flex-start; }
    .nb-sb.collapsed .nb-foot    { padding:1.25rem; }
    /* toggle button sembunyikan di mobile – pakai hamburger */
    .nb-toggle { display:none; }
    .main  { margin-left:0 !important; padding-top:60px; }
    .wrap  { padding:1.25rem 1rem; }
    .nb-a  { padding:.875rem 1.5rem; font-size:.9rem; }
    .nb-nav { -webkit-overflow-scrolling:touch; }
}

@media (max-width:480px) {
    .wrap { padding:1rem .875rem; }
}

body.sidebar-open { overflow:hidden; }

/* ════════════════════════════════════════════════════════
   UTILITY
════════════════════════════════════════════════════════ */
@keyframes fadeUp {
    from { opacity:0; transform:translateY(24px); }
    to   { opacity:1; transform:translateY(0); }
}
.fade-up { animation:fadeUp .6s cubic-bezier(.16,1,.3,1) both; }
</style>
</head>
<body>

<!-- ════ LOADER ════ -->
<div class="nb-ldr" id="nb-ldr">
    <div class="nb-lring">
        <div class="nb-linner">
            <img src="assets/sekolah.png" alt="" onerror="this.parentNode.innerHTML='🏛'">
        </div>
    </div>
    <div class="nb-ltxt"><?= htmlspecialchars($loader_text) ?></div>
    <div class="nb-ldots">
        <div class="nb-ldot"></div>
        <div class="nb-ldot"></div>
        <div class="nb-ldot"></div>
    </div>
</div>

<!-- ════ TOPBAR (mobile) ════ -->
<div class="nb-top">
    <div class="nb-top-brand">
        <div class="nb-top-logo">
            <img src="assets/sekolah.png" alt="" onerror="this.parentNode.innerHTML='🏛'">
        </div>
        <div class="nb-top-name">MA As-Syafi'iyah 02</div>
    </div>
    <div class="nb-hmb" id="nb-hmb">☰</div>
</div>

<!-- ════ OVERLAY ════ -->
<div class="nb-ov" id="nb-ov"></div>

<!-- ════ SIDEBAR ════ -->
<aside class="nb-sb" id="nb-sb">

    <!-- Brand + Toggle -->
    <div class="nb-brand">
        <div class="nb-brand-left">
            <div class="nb-blogo">
                <img src="assets/sekolah.png" alt="" onerror="this.parentNode.innerHTML='🏛'">
            </div>
            <div class="nb-btext">
                <div class="nb-bname">MA As-Syafi'iyah 02</div>
                <div class="nb-bsub">Portal Akademik</div>
            </div>
        </div>
        <!-- Tombol collapse (desktop) -->
        <div class="nb-toggle" id="nb-toggle" title="Perkecil sidebar">
            <svg viewBox="0 0 24 24">
                <polyline points="15 18 9 12 15 6"></polyline>
            </svg>
        </div>
        <!-- Tombol expand saat collapsed -->
        <div class="nb-expand-btn" id="nb-expand" title="Perbesar sidebar">›</div>
    </div>

    <!-- Navigation -->
    <nav class="nb-nav">

        <div class="nb-grp">Dashboard</div>
        <a href="dashboard.php" class="nb-a<?= nb_on('dashboard') ?>">
            <div class="nb-ico">📊</div>
            <span class="nb-albl">Overview</span>
        </a>

        <div class="nb-grp">Manajemen Data</div>
        <a href="surat.php" class="nb-a<?= nb_on('surat') ?>">
            <div class="nb-ico">📄</div>
            <span class="nb-albl">Arsip Surat</span>
        </a>
        <a href="siswa.php" class="nb-a<?= nb_on('siswa') ?>">
            <div class="nb-ico">👨‍🎓</div>
            <span class="nb-albl">Buku Induk Siswa</span>
        </a>
        <a href="guru.php" class="nb-a<?= nb_on('guru') ?>">
            <div class="nb-ico">👨‍🏫</div>
            <span class="nb-albl">Data Guru</span>
        </a>
        <a href="kelas.php" class="nb-a<?= nb_on('kelas') ?>">
            <div class="nb-ico">🏫</div>
            <span class="nb-albl">Data Kelas</span>
        </a>
        <a href="mata_pelajaran.php" class="nb-a<?= nb_on('mapel') ?>">
            <div class="nb-ico">📚</div>
            <span class="nb-albl">Mata Pelajaran</span>
        </a>

        <div class="nb-grp">Akademik</div>
        <a href="absensi.php" class="nb-a<?= nb_on('absensi') ?>">
            <div class="nb-ico">✅</div>
            <span class="nb-albl">Absensi Siswa</span>
        </a>
        <a href="nilai.php" class="nb-a<?= nb_on('nilai') ?>">
            <div class="nb-ico">📝</div>
            <span class="nb-albl">Nilai Siswa</span>
        </a>

        <div class="nb-grp">Keuangan</div>
        <a href="spp.php" class="nb-a<?= nb_on('spp') ?>">
            <div class="nb-ico">💰</div>
            <span class="nb-albl">Pembayaran SPP</span>
        </a>

        <div class="nb-grp">Laporan</div>
        <a href="laporan.php" class="nb-a<?= nb_on('laporan') ?>">
            <div class="nb-ico">📈</div>
            <span class="nb-albl">Statistik &amp; Laporan</span>
        </a>

        <?php if ($_nb_role === 'admin'): ?>
        <div class="nb-grp">Sistem</div>
        <a href="user.php" class="nb-a<?= nb_on('user') ?>">
            <div class="nb-ico">🔐</div>
            <span class="nb-albl">Manajemen User</span>
        </a>
        <a href="pengaturan.php" class="nb-a<?= nb_on('pengaturan') ?>">
            <div class="nb-ico">⚙️</div>
            <span class="nb-albl">Pengaturan</span>
        </a>
        <?php endif; ?>

    </nav>

    <!-- Footer / User -->
    <div class="nb-foot">
        <div class="nb-usr">
            <div class="nb-uav">
                <?php if (!empty($_nb_foto) && file_exists($_nb_foto)): ?>
                    <img src="<?= htmlspecialchars($_nb_foto) ?>" alt="Foto">
                <?php else: ?>
                    👤
                <?php endif; ?>
            </div>
            <div class="nb-uinfo">
                <div class="nb-uname"><?= htmlspecialchars($_nb_nama) ?></div>
                <span class="nb-urole"><?= strtoupper($_nb_role) ?></span>
            </div>
        </div>
        <div class="nb-logout-wrap">
            <a href="logout.php" class="nb-logout"
               onclick="return confirm('Yakin ingin keluar dari sistem?')">
                <span class="nb-logout-icon">🚪</span>
                <span class="nb-logout-txt">Keluar dari Sistem</span>
            </a>
        </div>
    </div>

</aside>

<!-- ════ JAVASCRIPT ════ -->
<script>
(function () {
    'use strict';

    var STORAGE_KEY = 'nb_collapsed';

    var sb     = document.getElementById('nb-sb');
    var ov     = document.getElementById('nb-ov');
    var hmb    = document.getElementById('nb-hmb');
    var toggle = document.getElementById('nb-toggle');
    var expand = document.getElementById('nb-expand');
    var body   = document.body;

    /* ── Loader ── */
    window.addEventListener('load', function () {
        setTimeout(function () {
            var ldr = document.getElementById('nb-ldr');
            if (ldr) ldr.classList.add('gone');
        }, 700);
    });

    /* ══════════════════════════════════════════
       DESKTOP: COLLAPSE / EXPAND
    ══════════════════════════════════════════ */
    function isDesktop() { return window.innerWidth > 768; }

    function collapse() {
        if (!isDesktop()) return;
        sb.classList.add('collapsed');
        body.classList.add('sb-collapsed');
        try { localStorage.setItem(STORAGE_KEY, '1'); } catch(e){}
        if (toggle) toggle.title = 'Perbesar sidebar';
    }

    function expandSb() {
        if (!isDesktop()) return;
        sb.classList.remove('collapsed');
        body.classList.remove('sb-collapsed');
        try { localStorage.removeItem(STORAGE_KEY); } catch(e){}
        if (toggle) toggle.title = 'Perkecil sidebar';
    }

    function toggleCollapse() {
        if (sb.classList.contains('collapsed')) expandSb();
        else collapse();
    }

    /* Restore state dari localStorage */
    if (isDesktop()) {
        try {
            if (localStorage.getItem(STORAGE_KEY) === '1') {
                /* terapkan tanpa animasi agar tidak flash saat load */
                sb.style.transition = 'none';
                body.style.transition = 'none';
                sb.classList.add('collapsed');
                body.classList.add('sb-collapsed');
                requestAnimationFrame(function () {
                    sb.style.transition = '';
                    body.style.transition = '';
                });
            }
        } catch(e){}
    }

    if (toggle) toggle.addEventListener('click', toggleCollapse);
    if (expand) expand.addEventListener('click', expandSb);

    /* ══════════════════════════════════════════
       MOBILE: OPEN / CLOSE SIDEBAR
    ══════════════════════════════════════════ */
    function openSb() {
        sb.classList.add('open');
        ov.classList.add('show');
        if (hmb) hmb.textContent = '✕';
        if (window.innerWidth <= 768) body.classList.add('sidebar-open');
    }

    function closeSb() {
        sb.classList.remove('open');
        ov.classList.remove('show');
        if (hmb) hmb.textContent = '☰';
        body.classList.remove('sidebar-open');
    }

    if (hmb) {
        hmb.addEventListener('click', function (e) {
            e.stopPropagation();
            sb.classList.contains('open') ? closeSb() : openSb();
        });
    }

    if (ov) ov.addEventListener('click', closeSb);

    /* Tutup saat nav item diklik di mobile */
    if (sb) {
        sb.querySelectorAll('.nb-a').forEach(function (a) {
            a.addEventListener('click', function () {
                if (window.innerWidth <= 768) closeSb();
            });
        });
    }

    /* ESC menutup sidebar */
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') {
            if (sb.classList.contains('open')) closeSb();
            else if (sb.classList.contains('collapsed') && isDesktop()) expandSb();
        }
    });

    /* Resize: reset mobile state kalau layar membesar */
    var resizeTimer;
    window.addEventListener('resize', function () {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function () {
            if (window.innerWidth > 768) {
                closeSb();
                body.classList.remove('sidebar-open');
            } else {
                /* Mobile: hapus collapsed state agar sidebar full */
                sb.classList.remove('collapsed');
                body.classList.remove('sb-collapsed');
            }
        }, 200);
    });

    /* Prevent double-tap zoom */
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.nb-a,.nb-hmb,.nb-logout,.nb-toggle,.nb-expand-btn')
        .forEach(function (el) {
            var lastTap = 0;
            el.addEventListener('touchend', function (e) {
                var now = Date.now();
                if (now - lastTap < 300) e.preventDefault();
                lastTap = now;
            }, { passive: false });
        });
    });

})();
</script>