डैशबोर्ड ढाँचा और साइडबार

<!-- Dashboard shell structure -->
<div class="flex h-screen overflow-hidden bg-gray-100">
  <!-- Sidebar -->
  <aside class="w-64 flex-shrink-0">
    <!-- Navigation -->
  </aside>

  <!-- Main content area -->
  <div class="flex flex-1 flex-col overflow-hidden">
    <!-- Top bar -->
    <main class="flex-1 overflow-y-auto p-6">
      <!-- Page content -->
    </main>
  </div>
</div>

<aside class="flex h-screen w-64 flex-shrink-0 flex-col bg-gray-900">
  <!-- Logo area -->
  <div class="flex h-16 items-center border-b border-gray-800 px-4">
    <div class="flex items-center gap-2 font-bold text-white">
      <div class="h-7 w-7 rounded-lg bg-blue-500"></div>
      Dashboard
    </div>
  </div>

  <!-- Scrollable navigation -->
  <nav class="flex-1 overflow-y-auto px-3 py-4">
    <!-- Navigation links -->
  </nav>

  <!-- User profile -->
  <div class="border-t border-gray-800 p-4">
    <!-- User info -->
  </div>
</aside>

<nav class="flex-1 space-y-1 overflow-y-auto px-3 py-4">
  <!-- Active link -->
  <a href="/dashboard"
     class="flex items-center gap-3 rounded-lg bg-gray-800 px-3 py-2
            text-sm font-medium text-white">
    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3"/>
    </svg>
    Overview
  </a>

  <!-- Inactive link -->
  <a href="/users"
     class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium
            text-gray-400 transition-colors hover:bg-gray-800 hover:text-white">
    <!-- Icon + label -->
    Users
  </a>
</nav>

<nav class="flex-1 space-y-1 overflow-y-auto px-3 py-4">
  <!-- Main group -->
  <p class="mb-2 px-3 text-xs font-semibold uppercase tracking-widest text-gray-500">
    Main
  </p>
  <a href="/dashboard" class="flex items-center gap-3 rounded-lg ...">Overview</a>
  <a href="/analytics" class="flex items-center gap-3 rounded-lg ...">Analytics</a>

  <!-- Settings group -->
  <p class="mb-2 mt-6 px-3 text-xs font-semibold uppercase tracking-widest text-gray-500">
    Settings
  </p>
  <a href="/billing" class="flex items-center gap-3 rounded-lg ...">Billing</a>
  <a href="/team" class="flex items-center gap-3 rounded-lg ...">Team</a>
</nav>

<div class="border-t border-gray-800 p-3">
  <div class="flex cursor-pointer items-center gap-3 rounded-lg p-2 transition hover:bg-gray-800">
    <img src="/avatar.jpg" alt="User" class="h-9 w-9 rounded-full">
    <div class="min-w-0 flex-1">
      <p class="truncate text-sm font-medium text-white">Jane Doe</p>
      <p class="truncate text-xs text-gray-400">jane@example.com</p>
    </div>
    <button class="ml-auto rounded-md p-1 text-gray-400 hover:text-white">
      <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35"/>
      </svg>
    </button>
  </div>
</div>

<div class="flex flex-1 flex-col overflow-hidden">
  <!-- Top bar (sticks to top of main area) -->
  <header class="flex h-16 items-center border-b border-gray-200 bg-white px-6">
    <!-- Search, notifications, avatar -->
  </header>

  <!-- Scrollable page content -->
  <main class="flex-1 overflow-y-auto bg-gray-100 p-6">
    <!-- Dashboard widgets, tables, charts -->
  </main>
</div>

<!-- Overlay backdrop (shown when sidebar is open) -->
<div id="sidebar-backdrop"
     class="fixed inset-0 z-20 hidden bg-black/50 lg:hidden"
     onclick="closeSidebar()"></div>

<!-- Sidebar with transition -->
<aside id="sidebar"
       class="fixed inset-y-0 left-0 z-30 w-64 -translate-x-full flex-col bg-gray-900
              transition-transform duration-300 lg:relative lg:translate-x-0 lg:flex">
  <!-- ... -->
</aside>

<!-- Collapsible sidebar pattern -->
<aside id="sidebar"
       class="flex flex-col bg-gray-900 transition-all duration-300"
       :class="expanded ? 'w-64' : 'w-16'">
  <a href="/dashboard" class="flex items-center gap-3 rounded-lg px-3 py-2">
    <svg class="h-5 w-5 flex-shrink-0 text-gray-400"><!-- icon --></svg>
    <span :class="expanded ? 'opacity-100' : 'opacity-0 w-0 overflow-hidden'"
          class="transition-opacity duration-200 text-sm text-gray-400">
      Overview
    </span>
  </a>
</aside>

<nav class="flex-1 space-y-1 overflow-y-auto px-3 py-4">
  <!-- Main group -->
  <a href="/" class="...">Overview</a>
  <a href="/analytics" class="...">Analytics</a>
  <a href="/reports" class="...">Reports</a>

  <!-- Divider -->
  <div class="my-4 border-t border-gray-800"></div>

  <!-- Settings group -->
  <a href="/billing" class="...">Billing</a>
  <a href="/api" class="...">API Keys</a>
</nav>

<a href="/messages"
   class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium
          text-gray-400 transition hover:bg-gray-800 hover:text-white">
  <svg class="h-5 w-5"><!-- message icon --></svg>
  Messages
  <!-- Badge -->
  <span class="ml-auto flex h-5 min-w-[20px] items-center justify-center
               rounded-full bg-blue-500 px-1 text-xs font-semibold text-white">
    3
  </span>
</a>

<!-- Dark sidebar -->
<aside class="w-64 bg-gray-900 text-gray-400">
  <!-- Links: text-gray-400 hover:bg-gray-800 hover:text-white -->
  <!-- Active: bg-gray-800 text-white -->
</aside>

<!-- Light sidebar -->
<aside class="w-64 border-r border-gray-200 bg-white text-gray-600">
  <!-- Links: text-gray-600 hover:bg-gray-50 hover:text-gray-900 -->
  <!-- Active: bg-blue-50 text-blue-700 -->
</aside>