Dashboard Layout With Header

<div class="ws-dashboard-layout min-h-[32rem] overflow-hidden rounded-xl border border-[var(--ws-dashboard-layout-border)] bg-[var(--ws-dashboard-layout-bg)]">
  <!-- Top header bar -->
  <header class="flex items-center justify-between border-b border-[var(--ws-dashboard-layout-border)] px-6 py-3">
    <div class="flex items-center gap-4">
      <div class="flex items-center gap-2">
        <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-[var(--ws-dashboard-layout-accent)] text-sm font-bold text-white" aria-hidden="true">W</div>
        <span class="text-sm font-bold text-[var(--ws-dashboard-layout-text)]">Workspace</span>
      </div>
      <nav class="hidden items-center gap-1 md:flex" aria-label="Main navigation">
        <a href="#dashboard" class="rounded-lg bg-[var(--ws-dashboard-layout-accent)]/10 px-3 py-1.5 text-sm font-medium text-[var(--ws-dashboard-layout-accent)]" aria-current="page">Dashboard</a>
        <a href="#projects" class="rounded-lg px-3 py-1.5 text-sm text-[var(--ws-dashboard-layout-text-soft)] transition hover:bg-[var(--ws-dashboard-layout-border)]">Projects</a>
        <a href="#reports" class="rounded-lg px-3 py-1.5 text-sm text-[var(--ws-dashboard-layout-text-soft)] transition hover:bg-[var(--ws-dashboard-layout-border)]">Reports</a>
        <a href="#settings" class="rounded-lg px-3 py-1.5 text-sm text-[var(--ws-dashboard-layout-text-soft)] transition hover:bg-[var(--ws-dashboard-layout-border)]">Settings</a>
      </nav>
    </div>
    <div class="flex items-center gap-3">
      <div class="relative hidden sm:block">
        <svg class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--ws-dashboard-layout-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" /></svg>
        <input type="search" placeholder="Search..." class="w-48 rounded-lg border border-[var(--ws-dashboard-layout-border)] bg-transparent py-1.5 pl-9 pr-3 text-sm text-[var(--ws-dashboard-layout-text)] placeholder:text-[var(--ws-dashboard-layout-text-soft)]" aria-label="Search" />
      </div>
      <button type="button" class="relative rounded-lg p-2 text-[var(--ws-dashboard-layout-text-soft)] transition hover:bg-[var(--ws-dashboard-layout-border)]" aria-label="Notifications">
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" /></svg>
        <span class="absolute right-1.5 top-1.5 h-2 w-2 rounded-full bg-rose-500" aria-hidden="true"></span>
      </button>
      <div class="flex h-8 w-8 items-center justify-center rounded-full bg-indigo-600 text-xs font-bold text-white" aria-hidden="true">JD</div>
    </div>
  </header>
  <!-- Main content -->
  <main class="p-8">
    <h1 class="text-xl font-bold text-[var(--ws-dashboard-layout-text)]">Dashboard</h1>
    <p class="mt-2 text-sm text-[var(--ws-dashboard-layout-text-soft)]">Main content area. Add widgets, charts, and tables here.</p>
  </main>
</div>