Tailwind CSS Collapsible Sidebar Layout

<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 }" class="flex h-screen overflow-hidden">
  <!-- Sidebar -->
  <aside 
         :class="sidebarOpen ? 'w-64' : 'w-20'" 
         class="bg-gray-900 text-white transition-all duration-300 ease-in-out flex flex-col"
         >
    <!-- Sidebar Header -->
    <div class="flex items-center justify-between p-4 border-b border-gray-700">
      <h1 
          x-show="sidebarOpen" 
          x-transition
          class="text-xl font-bold"
          >
        Dashboard
      </h1>
      <button 
              @click="sidebarOpen = !sidebarOpen"
              class="p-2 rounded-lg hover:bg-gray-800 transition-colors"
              >
        <ion-icon :name="sidebarOpen ? 'chevron-back-outline' : 'chevron-forward-outline'" class="text-2xl"></ion-icon>
      </button>
    </div>

    <!-- Navigation -->
    <nav class="flex-1 overflow-y-auto p-4">
      <ul class="space-y-2">
        <li>
          <a href="#" class="flex items-center gap-4 p-3 rounded-lg bg-gray-800 text-white hover:bg-gray-700 transition-colors">
            <ion-icon name="home-outline" class="text-2xl flex-shrink-0"></ion-icon>
            <span x-show="sidebarOpen" x-transition class="whitespace-nowrap">Home</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center gap-4 p-3 rounded-lg text-gray-300 hover:bg-gray-800 hover:text-white transition-colors">
            <ion-icon name="analytics-outline" class="text-2xl flex-shrink-0"></ion-icon>
            <span x-show="sidebarOpen" x-transition class="whitespace-nowrap">Analytics</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center gap-4 p-3 rounded-lg text-gray-300 hover:bg-gray-800 hover:text-white transition-colors">
            <ion-icon name="people-outline" class="text-2xl flex-shrink-0"></ion-icon>
            <span x-show="sidebarOpen" x-transition class="whitespace-nowrap">Users</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center gap-4 p-3 rounded-lg text-gray-300 hover:bg-gray-800 hover:text-white transition-colors">
            <ion-icon name="folder-outline" class="text-2xl flex-shrink-0"></ion-icon>
            <span x-show="sidebarOpen" x-transition class="whitespace-nowrap">Projects</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center gap-4 p-3 rounded-lg text-gray-300 hover:bg-gray-800 hover:text-white transition-colors">
            <ion-icon name="settings-outline" class="text-2xl flex-shrink-0"></ion-icon>
            <span x-show="sidebarOpen" x-transition class="whitespace-nowrap">Settings</span>
          </a>
        </li>
      </ul>
    </nav>

    <!-- Sidebar Footer -->
    <div class="p-4 border-t border-gray-700">
      <a href="#" class="flex items-center gap-4 p-3 rounded-lg text-gray-300 hover:bg-gray-800 hover:text-white transition-colors">
        <ion-icon name="log-out-outline" class="text-2xl flex-shrink-0"></ion-icon>
        <span x-show="sidebarOpen" x-transition class="whitespace-nowrap">Logout</span>
      </a>
    </div>
  </aside>

  <!-- Main Content -->
  <main class="flex-1 overflow-y-auto">
    <!-- Header -->
    <header class="bg-white shadow-sm">
      <div class="flex items-center justify-between p-6">
        <h2 class="text-2xl font-semibold text-gray-800">Welcome Back</h2>
        <div class="flex items-center gap-4">
          <button class="p-2 rounded-lg hover:bg-gray-100 transition-colors">
            <ion-icon name="notifications-outline" class="text-2xl text-gray-600"></ion-icon>
          </button>
          <button class="p-2 rounded-lg hover:bg-gray-100 transition-colors">
            <ion-icon name="person-circle-outline" class="text-3xl text-gray-600"></ion-icon>
          </button>
        </div>
      </div>
    </header>

    <!-- Page Content -->
    <div class="p-6">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
        <!-- Card 1 -->
        <div class="bg-white rounded-lg shadow p-6">
          <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" class="text-3xl 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>

        <!-- Card 2 -->
        <div class="bg-white rounded-lg shadow p-6">
          <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-800">Revenue</h3>
            <ion-icon name="cash" class="text-3xl 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>

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

      <!-- Recent Activity -->
      <div class="bg-white rounded-lg shadow">
        <div class="p-6 border-b border-gray-200">
          <h3 class="text-xl font-semibold text-gray-800">Recent Activity</h3>
        </div>
        <div class="p-6">
          <div class="space-y-4">
            <div class="flex items-center gap-4 p-4 bg-gray-50 rounded-lg">
              <ion-icon name="person-add" class="text-2xl text-blue-500"></ion-icon>
              <div class="flex-1">
                <p class="font-medium text-gray-800">New user registered</p>
                <p class="text-sm text-gray-600">2 minutes ago</p>
              </div>
            </div>
            <div class="flex items-center gap-4 p-4 bg-gray-50 rounded-lg">
              <ion-icon name="document" class="text-2xl text-green-500"></ion-icon>
              <div class="flex-1">
                <p class="font-medium text-gray-800">Project completed</p>
                <p class="text-sm text-gray-600">1 hour ago</p>
              </div>
            </div>
            <div class="flex items-center gap-4 p-4 bg-gray-50 rounded-lg">
              <ion-icon name="mail" class="text-2xl text-purple-500"></ion-icon>
              <div class="flex-1">
                <p class="font-medium text-gray-800">New message received</p>
                <p class="text-sm text-gray-600">3 hours ago</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>