Navbar Sidebar Push

<div class="ws-navbar relative min-h-screen">
  <!-- Sidebar -->
  <aside id="push-sidebar" class="fixed top-0 left-0 z-40 h-full w-64 -translate-x-full bg-[var(--ws-navbar-bg)] text-white transition-transform duration-400 ease-out">
    <div class="flex h-full flex-col justify-between p-6">
      <div>
        <a href="#" class="text-lg font-bold tracking-tight">Brand</a>
        <nav class="mt-10">
          <ul class="space-y-4">
            <li><a href="#" class="text-sm font-medium text-slate-300 hover:text-white transition-colors">Home</a></li>
            <li><a href="#" class="text-sm font-medium text-slate-300 hover:text-white transition-colors">About</a></li>
            <li><a href="#" class="text-sm font-medium text-slate-300 hover:text-white transition-colors">Services</a></li>
            <li><a href="#" class="text-sm font-medium text-slate-300 hover:text-white transition-colors">Portfolio</a></li>
            <li><a href="#" class="text-sm font-medium text-slate-300 hover:text-white transition-colors">Contact</a></li>
          </ul>
        </nav>
      </div>
      <div class="flex gap-4 text-xs text-slate-500">
        <a href="#" class="hover:text-white transition-colors">Tw</a>
        <a href="#" class="hover:text-white transition-colors">Li</a>
        <a href="#" class="hover:text-white transition-colors">Ig</a>
      </div>
    </div>
  </aside>

  <!-- Overlay -->
  <div id="push-overlay" class="fixed inset-0 z-30 bg-black/40 opacity-0 invisible transition-all duration-400"></div>

  <!-- Main Content (pushes right when sidebar opens) -->
  <div id="push-content" class="transition-transform duration-400 ease-out">
    <header class="flex items-center justify-between px-6 py-4">
      <button id="push-toggle" class="flex flex-col gap-1.5 cursor-pointer" aria-expanded="false" aria-label="Toggle sidebar">
        <span class="block h-0.5 w-6 bg-current"></span>
        <span class="block h-0.5 w-6 bg-current"></span>
        <span class="block h-0.5 w-6 bg-current"></span>
      </button>
      <a href="#" class="text-xl font-bold tracking-tight">Brand</a>
      <div></div>
    </header>
    <main class="px-6 py-12">
      <h1 class="text-4xl font-bold">Page Content</h1>
      <p class="mt-4 max-w-xl text-slate-600">The entire content area shifts to the right when the sidebar opens, maintaining context visibility with a partial push effect.</p>
    </main>
  </div>
</div>