<aside id="adminSidebar" class="fixed inset-y-0 left-0 z-50 flex w-72 -translate-x-full flex-col border-r border-slate-800 bg-slate-900/98 transition-transform duration-200 lg:translate-x-0">
  <div class="admin-shell-brand flex h-20 items-center gap-3 border-b border-slate-800 px-6">
    <div class="grid h-10 w-10 place-items-center rounded-xl bg-sky-500 font-black text-slate-950">ST</div>
    <div class="min-w-0">
      <div class="font-semibold tracking-tight text-white">SimuTradeX</div>
      <div class="text-xs text-slate-400">Admin console</div>
    </div>
    <button type="button" data-sidebar-close class="ml-auto rounded-lg p-2 text-slate-400 hover:bg-slate-800 hover:text-white lg:hidden" aria-label="Close menu">Close</button>
  </div>

  <nav class="admin-scrollbar flex-1 overflow-y-auto px-4 py-5" aria-label="Admin navigation">
    <div class="admin-nav-section">
      <div class="admin-nav-caption">Monitor</div>
      <a href="<%= adminUrl('/') %>" class="nav-link <%= activePage === 'dashboard' ? 'nav-link-active' : '' %>">
        <span class="nav-icon">DB</span><span>Dashboard</span>
      </a>
    </div>

    <div class="admin-nav-section">
      <div class="admin-nav-caption">Operations</div>
      <a href="<%= adminUrl('/users') %>" class="nav-link <%= activePage === 'users' ? 'nav-link-active' : '' %>">
        <span class="nav-icon">US</span><span>Users</span>
      </a>
      <a href="<%= adminUrl('/payments') %>" class="nav-link <%= activePage === 'payments' ? 'nav-link-active' : '' %>">
        <span class="nav-icon">$</span><span>Transactions</span>
      </a>
      <a href="<%= adminUrl('/subscriptions') %>" class="nav-link <%= activePage === 'subscriptions' ? 'nav-link-active' : '' %>">
        <span class="nav-icon">SB</span><span>Subscriptions</span>
      </a>
    </div>

    <div class="admin-nav-section">
      <div class="admin-nav-caption">Product</div>
      <a href="<%= adminUrl('/plans') %>" class="nav-link <%= activePage === 'plans' ? 'nav-link-active' : '' %>">
        <span class="nav-icon">PL</span><span>Plans</span>
      </a>
      <a href="<%= adminUrl('/notifications') %>" class="nav-link <%= activePage === 'notifications' ? 'nav-link-active' : '' %>">
        <span class="nav-icon">NT</span><span>Notifications</span>
      </a>
    </div>

    <div class="admin-nav-section">
      <div class="admin-nav-caption">System</div>
      <a href="<%= adminUrl('/logs') %>" class="nav-link <%= activePage === 'logs' ? 'nav-link-active' : '' %>">
        <span class="nav-icon">LG</span><span>Activity logs</span>
      </a>
      <a href="<%= adminUrl('/settings') %>" class="nav-link <%= activePage === 'settings' ? 'nav-link-active' : '' %>">
        <span class="nav-icon">ST</span><span>Settings</span>
      </a>
    </div>
  </nav>

  <div class="border-t border-slate-800 p-4">
    <a href="<%= siteHomePath %>" class="nav-link"><span class="nav-icon">GO</span><span>View website</span></a>
  </div>
</aside>
<div id="adminSidebarOverlay" data-sidebar-close class="fixed inset-0 z-40 hidden bg-slate-950/75 backdrop-blur-sm lg:hidden"></div>
