<div class="min-h-[20rem] bg-zinc-50 dark:bg-zinc-950 flex">
  <!-- Sidebar Navigation -->
  <byte-navlist color="zinc">
    <div slot="brand" class="flex items-center">
      <byte-icon name="code-bracket-square"></byte-icon>
      <span class="ml-2 text-xl font-bold">Your Brand</span>
    </div>

    <div slot="items">
      <!-- Main Navigation -->
      <div class="space-y-1">
        <byte-navlist-item href="/dashboard" icon="home" current>
          Dashboard
        </byte-navlist-item>
        
        <byte-navlist-item href="/analytics" icon="chart-bar">
          Analytics
        </byte-navlist-item>
        
        <byte-navlist-item href="/customers" icon="users">
          Customers
        </byte-navlist-item>
        
        <byte-navlist-item href="/products" icon="shopping-bag">
          Products
        </byte-navlist-item>
      </div>

      <!-- Secondary Navigation with Label -->
      <div class="mt-8">
        <h3 class="px-3 text-xs font-semibold text-zinc-500 uppercase tracking-wider">
          Administration
        </h3>
        <div class="mt-2 space-y-1">
          <byte-navlist-item href="/settings" icon="cog-6-tooth">
            Settings
          </byte-navlist-item>
          
          <byte-navlist-item href="/team" icon="user-group">
            Team Members
          </byte-navlist-item>
          
          <byte-navlist-item href="/billing" icon="credit-card">
            Billing
          </byte-navlist-item>
        </div>
      </div>

      <!-- Bottom Section -->
      <div class="mt-auto pt-8">
        <byte-navlist-item href="/help" icon="lifebuoy">
          Help & Support
        </byte-navlist-item>
        
        <byte-navlist-item href="/logout" icon="arrow-left-on-rectangle">
          Logout
        </byte-navlist-item>
      </div>
    </div>
  </byte-navlist>

  <!-- Main Content -->
  <main class="flex-1 p-8">
    <div class="max-w-7xl mx-auto">
      <!-- Page Header -->
      <div class="md:flex md:items-center md:justify-between">
        <div class="flex-1 min-w-0">
          <h1 class="text-2xl font-semibold text-zinc-900 dark:text-white">Dashboard</h1>
        </div>
        <div class="mt-4 flex md:mt-0 md:ml-4">
          <byte-button variant="soft" color="zinc">
            Export
          </byte-button>
          <byte-button variant="solid" color="blue" class="ml-3">
            New Project
          </byte-button>
        </div>
      </div>

      <!-- Content -->
      <div class="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
        <!-- Stats Card -->
        <div class="bg-white dark:bg-zinc-800 overflow-hidden shadow rounded-lg">
          <div class="p-5">
            <div class="flex items-center">
              <div class="flex-shrink-0">
                <byte-icon name="users" class="text-zinc-400"></byte-icon>
              </div>
              <div class="ml-5 w-0 flex-1">
                <dl>
                  <dt class="text-sm font-medium text-zinc-500 truncate">
                    Total Customers
                  </dt>
                  <dd class="flex items-baseline">
                    <div class="text-2xl font-semibold text-zinc-900">
                      71,897
                    </div>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </div>

        <!-- Activity Card -->
        <div class="bg-white dark:bg-zinc-800 overflow-hidden shadow rounded-lg">
          <div class="p-5">
            <div class="flex items-center">
              <div class="flex-shrink-0">
                <byte-icon name="chart-bar" class="text-zinc-400"></byte-icon>
              </div>
              <div class="ml-5 w-0 flex-1">
                <dl>
                  <dt class="text-sm font-medium text-zinc-500 truncate">
                    Sales Revenue
                  </dt>
                  <dd class="flex items-baseline">
                    <div class="text-2xl font-semibold text-zinc-900">
                      $24,500
                    </div>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </div>

        <!-- Another Card -->
        <div class="bg-white dark:bg-zinc-800 overflow-hidden shadow rounded-lg">
          <div class="p-5">
            <div class="flex items-center">
              <div class="flex-shrink-0">
                <byte-icon name="shopping-cart" class="text-zinc-400"></byte-icon>
              </div>
              <div class="ml-5 w-0 flex-1">
                <dl>
                  <dt class="text-sm font-medium text-zinc-500 truncate">
                    Orders
                  </dt>
                  <dd class="flex items-baseline">
                    <div class="text-2xl font-semibold text-zinc-900">
                      1,234
                    </div>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Table Section -->
      <div class="mt-8 bg-white dark:bg-zinc-800 shadow rounded-lg">
        <div class="px-4 py-5 sm:px-6 border-b border-zinc-200 dark:border-zinc-700">
          <h3 class="text-lg leading-6 font-medium text-zinc-900 dark:text-white">
            Recent Activity
          </h3>
        </div>
        <div class="px-4 py-5 sm:p-6">
          <!-- Add your table or content here -->
        </div>
      </div>
    </div>
  </main>
</div>