Project: Dashboard Layout with Sidebar

In this project, we will construct a standard administrative dashboard layout. The structure features a fixed left sidebar (hidden on mobile, visible on desktop) and a main content viewport panel.

1. Dashboard Specifications

• Overall Container: A viewport-height container (min-h-screen) utilizing Flexbox layout.
• Left Sidebar: Fixed-width side drawer (w-64) that hides on mobile (hidden md:flex).
• Main Content Area: Scrollable content container with a persistent top navigation bar.

2. Implementing the Dashboard

Here is the HTML layout template. You can copy this structure into your Astro templates or React pages:

<div className="flex min-h-screen bg-gray-50 text-gray-800">
  
  {/* 1. Sidebar Container (Hidden on mobile, visible from tablets up) */}
  <aside className="hidden md:flex flex-col w-64 bg-slate-900 text-slate-100 border-r border-slate-800">
    <div className="h-16 flex items-center justify-center border-b border-slate-800 font-bold text-lg">
      Admin Portal
    </div>
    <nav className="flex-1 p-4 space-y-2">
      <a href="#" className="flex items-center gap-3 px-4 py-2.5 rounded-lg bg-blue-600 text-white font-medium">
        Overview
      </a>
      <a href="#" className="flex items-center gap-3 px-4 py-2.5 rounded-lg text-slate-400 hover:bg-slate-800 hover:text-slate-100 transition">
        Analytics
      </a>
      <a href="#" className="flex items-center gap-3 px-4 py-2.5 rounded-lg text-slate-400 hover:bg-slate-800 hover:text-slate-100 transition">
        System Settings
      </a>
    </nav>
    <div className="p-4 border-t border-slate-800 text-sm text-slate-500">
      v1.0.0 Stable
    </div>
  </aside>

  {/* 2. Main Content Wrapper */}
  <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
    
    {/* 3. Top Navigation Bar */}
    <header className="h-16 bg-white border-b flex items-center justify-between px-6 z-10">
      <div className="font-semibold text-lg">Dashboard Overview</div>
      <div className="flex items-center gap-4">
        <button className="p-1.5 rounded-lg hover:bg-gray-100 relative">
          Notification Bell
        </button>
        <div className="w-9 h-9 bg-blue-500 rounded-full text-white flex items-center justify-center font-bold">
          JD
        </div>
      </div>
    </header>

    {/* 4. Scrollable Content Viewport */}
    <main className="flex-1 overflow-y-auto p-6 space-y-6">
      
      {/* 5. Metrics Cards grid */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        <div className="bg-white p-6 rounded-xl border shadow-sm">
          <p className="text-gray-500 text-sm font-medium">Total Revenue</p>
          <p className="text-2xl font-bold mt-1">$45,231</p>
        </div>
        <div className="bg-white p-6 rounded-xl border shadow-sm">
          <p className="text-gray-500 text-sm font-medium">Active Users</p>
          <p className="text-2xl font-bold mt-1">1,482</p>
        </div>
        <div className="bg-white p-6 rounded-xl border shadow-sm">
          <p className="text-gray-500 text-sm font-medium">Conversion Rate</p>
          <p className="text-2xl font-bold mt-1">2.4%</p>
        </div>
      </div>

      {/* 6. Heavy Detail Table Container */}
      <div className="bg-white border rounded-xl shadow-sm overflow-hidden">
        <div className="px-6 py-4 border-b font-semibold">Recent Transactions</div>
        <div className="p-6 text-gray-500 text-center">
          No transactions recorded today.
        </div>
      </div>

    </main>
  </div>
</div>