<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <!-- If you already load Bootstrap Icons, keep yours and remove this. -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">

  <style>
    :root{
      --sidebar-w: 240px;
      --sidebar-collapsed-w: 74px;
      --sb-bg: #0f172a;     /* slate-900 */
      --sb-fg: #e5e7eb;     /* gray-200 */
      --sb-active: rgba(79,70,229,.28); /* indigo highlight */
    }
    *{ box-sizing:border-box }
    body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial; background:#f6f7fb; color:#111827 }

    /* --- Layout --- */
    .app{ display:flex; min-height:100vh }
    .main{ margin-left:var(--sidebar-w); padding:16px; width:100%; transition:margin-left .25s ease }

    /* collapsed state (desktop) */
    .has-collapsed .main{ margin-left:var(--sidebar-collapsed-w) }

    /* --- Top header --- */
    .header{
      position:sticky; top:0; z-index:500; height:56px;
      background:#fff; border-bottom:1px solid #e5e7eb;
      display:flex; align-items:center; gap:10px; padding:0 16px;
    }
    #sidebarToggle{
      display:inline-flex; align-items:center; justify-content:center;
      width:36px; height:36px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; cursor:pointer;
    }

    /* --- Sidebar --- */
    .sidebar{
      position:fixed; left:0; top:0; bottom:0; z-index:1000;
      width:var(--sidebar-w);
      background:var(--sb-bg); color:var(--sb-fg);
      padding:12px 10px; display:flex; flex-direction:column; gap:6px;
      transition:width .25s ease, transform .25s ease;
    }
    .brand{ display:flex; align-items:center; gap:8px; padding:10px 12px; margin-bottom:6px; color:var(--sb-fg); text-decoration:none; font-weight:700; letter-spacing:.2px }
    .brand .logo{ width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg,#22d3ee,#4f46e5); display:inline-block }

    .sidebar a{
      display:flex; align-items:center; gap:12px;
      padding:10px 12px; border-radius:10px; color:var(--sb-fg);
      text-decoration:none; font-weight:500; opacity:.9;
      transition:background .2s ease, opacity .2s ease;
    }
    .sidebar a:hover{ background:rgba(255,255,255,.08); opacity:1 }
    .sidebar a.active{ background:var(--sb-active); opacity:1 }
    .sidebar a.text-danger{ color:#ef4444 }
    .sidebar i{ font-size:1.1rem; width:22px; text-align:center }
    .sidebar .spacer{ flex:1 }

    /* collapsed (desktop) = icon rail */
    .sidebar.collapsed{ width:var(--sidebar-collapsed-w) }
    .sidebar.collapsed a span{ display:none }

    /* --- Mobile: off-canvas slide --- */
    @media (max-width: 992px){
      .sidebar{ transform:translateX(-100%) }
      .sidebar.open{ transform:none }
      .main{ margin-left:0 }
      .has-collapsed .main{ margin-left:0 }
      .overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:900; display:none }
      .overlay.show{ display:block }
    }
  </style>
</head>
<body>

<div class="app">
  <!-- Sidebar -->
  <nav class="sidebar" id="sidebar">
    <a href="#" class="brand"><span class="logo"></span><span>Eden LMS</span></a>

    <!-- Your links (kept as-is) -->
    <a class="active" href="dashboard.php" title="Dashboard"><i class="bi bi-speedometer2"></i><span>Dashboard</span></a>
    <a href="new_registration.php" title="New Registration"><i class="bi bi-person-plus"></i><span>New Registration</span></a>
    <a href="students.php" title="Registrations"><i class="bi bi-people"></i><span>Registrations</span></a>
    <a href="courses.php" title="Courses"><i class="bi bi-book"></i><span>Courses</span></a>
    <a href="batches.php" title="Batches"><i class="bi bi-calendar"></i><span>Batches</span></a>
    <a href="payment_plan_add.php" title="Payment Plans"><i class="bi bi-credit-card"></i><span>Payment Plans</span></a>
    <a href="marks_validation.php" title="Administration"><i class="bi bi-gear"></i><span>Administration</span></a>

    <div class="spacer"></div>
    <a href="../logout.php" class="text-danger" title="Logout"><i class="bi bi-box-arrow-right"></i><span>Logout</span></a>
  </nav>

  <div class="overlay" id="overlay"></div>

  <!-- Main -->
  <div class="main">
    <header class="header">
      <button id="sidebarToggle" aria-label="Toggle sidebar"><i class="bi bi-list"></i></button>
      <h1 class="page-title" style="margin:0;font-size:18px;">Admin Dashboard</h1>
    </header>

    <!-- your page content -->
    <p style="margin-top:16px">Content goes here…</p>
  </div>
</div>

<script>
(function(){
  const sidebar = document.getElementById('sidebar');
  const overlay = document.getElementById('overlay');
  const toggle  = document.getElementById('sidebarToggle');
  const mq      = window.matchMedia('(max-width: 992px)');
  let collapsed = false;

  function setCollapsed(on){
    collapsed = !!on;
    document.body.classList.toggle('has-collapsed', collapsed);
    if(!mq.matches){ sidebar.classList.toggle('collapsed', collapsed); }
  }

  // restore collapsed state
  try { setCollapsed(localStorage.getItem('lms.sidebar.collapsed') === '1'); } catch(e){}

  // toggle button
  toggle.addEventListener('click', () => {
    if (mq.matches){
      // mobile: slide in/out
      sidebar.classList.toggle('open');
      overlay.classList.toggle('show');
    } else {
      // desktop: collapse/expand
      setCollapsed(!collapsed);
      try { localStorage.setItem('lms.sidebar.collapsed', collapsed ? '1' : '0'); } catch(e){}
    }
  });

  // click overlay to close on mobile
  overlay.addEventListener('click', () => {
    sidebar.classList.remove('open');
    overlay.classList.remove('show');
  });

  // close off-canvas if resizing up
  window.addEventListener('resize', () => {
    if(!mq.matches){
      overlay.classList.remove('show');
      sidebar.classList.remove('open');
    }
  });

  // auto-activate current link (best-effort)
  const path = location.pathname.split('/').pop();
  document.querySelectorAll('#sidebar a[href]').forEach(a=>{
    const href = a.getAttribute('href');
    if (href && href !== '#' && path && href.indexOf(path) !== -1){
      a.classList.add('active');
    }
  });
})();
</script>
</body>
</html>
