Tailwind CSS Sidebar Menu

<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

<div x-data="{ 
             sidebarOpen: true, 
             activeItem: 'dashboard',
             items: [
             { id: 'dashboard', icon: 'grid-outline', label: 'Dashboard' },
             { id: 'analytics', icon: 'analytics-outline', label: 'Analytics' },
             { id: 'projects', icon: 'folder-outline', label: 'Projects' },
             { id: 'team', icon: 'people-outline', label: 'Team' },
             { id: 'messages', icon: 'chatbubbles-outline', label: 'Messages', badge: '3' },
             { id: 'calendar', icon: 'calendar-outline', label: 'Calendar' },
             { id: 'settings', icon: 'settings-outline', label: 'Settings' }
             ]
             }" class="flex h-screen">

  <!-- Sidebar -->
  <aside 
         :class="sidebarOpen ? 'w-64' : 'w-20'" 
         class="bg-white shadow-lg transition-all duration-300 ease-in-out flex flex-col">

    <!-- Logo & Toggle -->
    <div class="flex items-center justify-between p-4 border-b">
      <h1 
          x-show="sidebarOpen" 
          x-transition
          class="text-xl font-bold text-gray-800">
        Dashboard
      </h1>
      <button 
              @click="sidebarOpen = !sidebarOpen" 
              class="p-2 rounded-lg hover:bg-gray-100 transition-colors">
        <ion-icon :name="sidebarOpen ? 'chevron-back-outline' : 'chevron-forward-outline'" class="text-xl text-gray-600"></ion-icon>
      </button>
    </div>

    <!-- Navigation -->
    <nav class="flex-1 p-4 space-y-2 overflow-y-auto">
      <template x-for="item in items" :key="item.id">
        <button
                @click="activeItem = item.id"
                :class="activeItem === item.id ? 'bg-blue-50 text-blue-600' : 'text-gray-700 hover:bg-gray-50'"
                class="w-full flex items-center gap-4 px-4 py-3 rounded-lg transition-colors group relative">

          <ion-icon 
                    :name="item.icon" 
                    :class="activeItem === item.id ? 'text-blue-600' : 'text-gray-500 group-hover:text-gray-700'"
                    class="text-2xl flex-shrink-0"></ion-icon>

          <span 
                x-show="sidebarOpen" 
                x-transition
                class="font-medium whitespace-nowrap">
            <span x-text="item.label"></span>
          </span>

          <!-- Badge -->
          <span 
                x-show="sidebarOpen && item.badge" 
                x-transition
                class="ml-auto bg-red-500 text-white text-xs font-semibold px-2 py-1 rounded-full">
            <span x-text="item.badge"></span>
          </span>

          <!-- Tooltip for collapsed state -->
          <div 
               x-show="!sidebarOpen"
               class="absolute left-full ml-2 px-2 py-1 bg-gray-900 text-white text-sm rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap z-10">
            <span x-text="item.label"></span>
          </div>
        </button>
      </template>
    </nav>

    <!-- User Profile -->
    <div class="p-4 border-t">
      <div class="flex items-center gap-3">
        <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white font-semibold flex-shrink-0">
          JD
        </div>
        <div x-show="sidebarOpen" x-transition class="flex-1 min-w-0">
          <p class="text-sm font-medium text-gray-800 truncate">John Doe</p>
          <p class="text-xs text-gray-500 truncate">john@example.com</p>
        </div>
      </div>
    </div>
  </aside>

  <!-- Main Content -->
  <main class="flex-1 overflow-auto">
    <div class="p-8">
      <div class="max-w-4xl">
        <h2 class="text-3xl font-bold text-gray-800 mb-2" x-text="activeItem.charAt(0).toUpperCase() + activeItem.slice(1)"></h2>
        <p class="text-gray-600 mb-8">Welcome to your dashboard. Select a menu item to navigate.</p>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div class="bg-white p-6 rounded-lg shadow">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-800">Total Users</h3>
              <ion-icon name="people-outline" class="text-2xl text-blue-500"></ion-icon>
            </div>
            <p class="text-3xl font-bold text-gray-900">2,543</p>
            <p class="text-sm text-green-600 mt-2">↑ 12% from last month</p>
          </div>

          <div class="bg-white p-6 rounded-lg shadow">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-800">Revenue</h3>
              <ion-icon name="trending-up-outline" class="text-2xl text-green-500"></ion-icon>
            </div>
            <p class="text-3xl font-bold text-gray-900">$45,231</p>
            <p class="text-sm text-green-600 mt-2">↑ 8% from last month</p>
          </div>

          <div class="bg-white p-6 rounded-lg shadow">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-800">Active Projects</h3>
              <ion-icon name="folder-outline" class="text-2xl text-purple-500"></ion-icon>
            </div>
            <p class="text-3xl font-bold text-gray-900">12</p>
            <p class="text-sm text-gray-500 mt-2">3 due this week</p>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>