Responsive Collapsible Dashboard Sidebar

<aside
  class="fixed z-40 transform md:translate-x-0 transition-transform duration-300 will-change-transform overflow-x-hidden w-72 border-white/10 border-r top-0 bottom-0 left-0 backdrop-blur-xl"
  style="" id="sidebar">
  <div class="flex flex-col h-full">
    <!-- Brand -->
    <div class="flex border-white/10 border-b pt-4 pr-4 pb-4 pl-4 items-center justify-between" style="">
      <a href="#"
        class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-2 backdrop-blur"
        style="">
        <span class="inline-flex h-8 w-8 items-center justify-center bg-emerald-500 rounded-full">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="sparkles" class="lucide lucide-sparkles w-4 h-4 text-black/90"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
            </span>
        <span class="text-base font-medium tracking-tighter font-geist" data-collapse-hide="" style="">ResuMate AI</span>
      </a>
      <div class="inline-flex items-center gap-2">
        <button id="toggleCollapse" class="hidden md:inline-flex items-center justify-center h-8 w-8 rounded-lg border border-white/10 bg-white/5" aria-label="Toggle sidebar" aria-pressed="false" title="Collapse sidebar">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevrons-left" class="lucide lucide-chevrons-left w-4 h-4 text-white/70" data-icon="left" style=""><path d="m11 17-5-5 5-5" class=""></path><path d="m18 17-5-5 5-5" class=""></path></svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevrons-right" class="lucide lucide-chevrons-right w-4 h-4 text-white/70" data-icon="right" style="display: none;"><path d="m6 17 5-5-5-5" class=""></path><path d="m13 17 5-5-5-5" class=""></path></svg>
            </button>
        <button id="closeSidebar" class="md:hidden inline-flex items-center justify-center h-8 w-8 rounded-lg border border-white/10 bg-white/5">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="x" class="lucide lucide-x w-4 h-4 text-white/70"><path d="M18 6 6 18" class=""></path><path d="m6 6 12 12" class=""></path></svg>
            </button>
      </div>
    </div>

    <!-- Nav -->
    <nav class="flex-1 overflow-y-auto pt-4 pr-3 pb-4 pl-3">
      <div class="px-2 mb-2" data-collapse-hide="" style="">
        <p class="text-[11px] uppercase tracking-wider text-white/40 font-medium font-geist">Main</p>
      </div>
      <div class="space-y-1">
        <a href="/new-dashboard"
          class="group flex items-center gap-3 hover:text-white hover:bg-white/5 hover:border-white/10 text-sm text-white/80 border-transparent border rounded-lg pt-2.5 pr-3 pb-2.5 pl-3">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            data-lucide="layout-dashboard" class="lucide lucide-layout-dashboard w-4.5 h-4.5">
            <rect width="7" height="9" x="3" y="3" rx="1" class=""></rect>
            <rect width="7" height="5" x="14" y="3" rx="1" class=""></rect>
            <rect width="7" height="9" x="14" y="12" rx="1" class=""></rect>
            <rect width="7" height="5" x="3" y="16" rx="1" class=""></rect>
          </svg>
          <span class="font-geist" style="">Overview</span>
        </a>
        <a href="/jobs"
          class="group flex items-center gap-3 hover:text-white hover:bg-white/5 hover:border-white/10 text-sm text-white/80 border-transparent border rounded-lg pt-2.5 pr-3 pb-2.5 pl-3">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            data-lucide="briefcase" class="lucide lucide-briefcase w-4.5 h-4.5">
            <path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" class=""></path>
            <rect width="20" height="14" x="2" y="6" rx="2" class=""></rect>
          </svg>
          <span class="font-geist" style="">Jobs</span>
        </a>
        <a href="#"
          class="group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-white/90 bg-white/10 border border-white/10">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            data-lucide="file-text" class="lucide lucide-file-text w-4.5 h-4.5 text-emerald-400">
            <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" class=""></path>
            <path d="M14 2v4a2 2 0 0 0 2 2h4" class=""></path>
            <path d="M10 9H8" class=""></path>
            <path d="M16 13H8" class=""></path>
            <path d="M16 17H8" class=""></path>
          </svg>
          <span class="font-geist" style="">Resumes</span>
        </a>
        <a href="#"
          class="group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-white/80 hover:text-white hover:bg-white/5 border border-transparent hover:border-white/10">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            data-lucide="bar-chart-3" class="lucide lucide-bar-chart-3 w-4.5 h-4.5">
            <path d="M3 3v16a2 2 0 0 0 2 2h16" class=""></path>
            <path d="M18 17V9" class=""></path>
            <path d="M13 17V5" class=""></path>
            <path d="M8 17v-3" class=""></path>
          </svg>
          <span class="font-geist" style="">Reports</span>
        </a>
      </div>

      <div class="px-2 mt-6 mb-2" data-collapse-hide="" style="">
        <p class="text-[11px] uppercase tracking-wider text-white/40 font-medium font-geist">Account</p>
      </div>
      <div class="space-y-1">
        <a href="#"
          class="group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-white/80 hover:text-white hover:bg-white/5 border border-transparent hover:border-white/10">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="users"
            class="lucide lucide-users w-4.5 h-4.5">
            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path>
            <path d="M16 3.128a4 4 0 0 1 0 7.744" class=""></path>
            <path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path>
            <circle cx="9" cy="7" r="4" class=""></circle>
          </svg>
          <span class="font-geist" style="">Team</span>
        </a>
        <a href="#"
          class="group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-white/80 hover:text-white hover:bg-white/5 border border-transparent hover:border-white/10">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            data-lucide="settings" class="lucide lucide-settings w-4.5 h-4.5">
            <path
              d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"
              class=""></path>
            <circle cx="12" cy="12" r="3" class=""></circle>
          </svg>
          <span class="font-geist" style="">Settings</span>
        </a>
      </div>
    </nav>

    <!-- Upgrade / footer -->
    <div class="px-4 py-4 border-t border-white/10" data-collapse-hide="" style="">
      <div class="rounded-xl border border-emerald-500/30 bg-emerald-500/10 p-3">
        <div class="flex items-center gap-2">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            data-lucide="shield-check" class="lucide lucide-shield-check w-4 h-4 text-emerald-300">
            <path
              d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
              class=""></path>
            <path d="m9 12 2 2 4-4" class=""></path>
          </svg>
          <p class="text-xs font-medium text-emerald-200 font-geist">ATS Health active</p>
        </div>
        <p class="mt-2 text-[11px] text-emerald-200/80 font-geist">Real-time checks enabled.</p>
      </div>
    </div>
  </div>

  <script class="">
    (function () {
          const sidebar = document.getElementById('sidebar');
          const collapseBtn = sidebar.querySelector('#toggleCollapse');
          const iconLeft = collapseBtn ? collapseBtn.querySelector('[data-icon="left"]') : null;
          const iconRight = collapseBtn ? collapseBtn.querySelector('[data-icon="right"]') : null;
          const brandBar = sidebar.querySelector('.border-b');
          const brandLink = brandBar ? brandBar.querySelector('a') : null;

          // Select the main content wrapper reliably (next sibling of sidebar)
          const selectMain = () => sidebar.nextElementSibling;

          function setCollapsed(collapsed) {
            try {
              if (collapsed) {
                sidebar.style.width = '64px';
                sidebar.classList.add('collapsed');
                // Hide collapsible labels/sections
                sidebar.querySelectorAll('[data-collapse-hide]').forEach(el => { el.style.display = 'none'; });
                sidebar.querySelectorAll('nav a span.font-geist').forEach(el => { el.style.display = 'none'; });
                // Ensure the toggle icon is always visible
                if (brandLink) brandLink.style.display = 'none';
                if (brandBar) { brandBar.style.paddingLeft = '8px'; brandBar.style.paddingRight = '8px'; }
                // Update main content padding so it fills space
                const main = selectMain();
                if (main) main.classList.remove('md:pl-72');
                // Toggle button icon and aria state
                if (iconLeft && iconRight) { iconLeft.style.display = 'none'; iconRight.style.display = ''; }
                if (collapseBtn) { collapseBtn.setAttribute('aria-pressed', 'true'); collapseBtn.title = 'Expand sidebar'; }
                localStorage.setItem('sidebarCollapsed', '1');
              } else {
                sidebar.style.width = '';
                sidebar.classList.remove('collapsed');
                // Show labels/sections
                sidebar.querySelectorAll('[data-collapse-hide]').forEach(el => { el.style.display = ''; });
                sidebar.querySelectorAll('nav a span.font-geist').forEach(el => { el.style.display = ''; });
                if (brandLink) brandLink.style.display = '';
                if (brandBar) { brandBar.style.paddingLeft = ''; brandBar.style.paddingRight = ''; }
                // Restore main content padding
                const main = selectMain();
                if (main) main.classList.add('md:pl-72');
                // Toggle button icon and aria state
                if (iconLeft && iconRight) { iconLeft.style.display = ''; iconRight.style.display = 'none'; }
                if (collapseBtn) { collapseBtn.setAttribute('aria-pressed', 'false'); collapseBtn.title = 'Collapse sidebar'; }
                localStorage.setItem('sidebarCollapsed', '0');
              }
            } catch (e) {}
          }

          // Initialize state from storage or fallback to DOM state
          const stored = localStorage.getItem('sidebarCollapsed');
          const initialCollapsed = stored ? stored === '1' : sidebar.classList.contains('collapsed');
          setCollapsed(initialCollapsed);

          if (collapseBtn) {
            collapseBtn.addEventListener('click', () => {
              const isCollapsed = sidebar.classList.contains('collapsed');
              setCollapsed(!isCollapsed);
            });
          }
        })();
  </script>
</aside>