Tabs Subnav Navbar

<!--
  Two tiers: a product bar over a section subnav. The subnav is a real tablist,
  and it scrolls horizontally (overflow-x-auto) rather than wrapping - the phone
  answer for a row of section tabs that will not fit. The active tab carries a
  bottom border and aria-selected. The bar's own links collapse to a hamburger.
-->
<header class="border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
  <div class="mx-auto flex h-14 max-w-6xl items-center gap-4 px-4">
    <a href="/" class="mr-auto font-bold text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-50 dark:focus-visible:ring-blue-400">Adysre</a>

    <nav class="hidden items-center gap-1 md:flex" aria-label="Main">
      <a href="/support" class="rounded-md px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-50">Support</a>
      <a href="/docs" class="rounded-md px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-50">Docs</a>
    </nav>

    <a href="/new" class="hidden rounded-lg bg-blue-600 px-3.5 py-1.5 text-sm font-semibold text-white hover:bg-blue-700 md:block">New project</a>

    <button
      type="button"
      aria-expanded="false"
      aria-controls="nav-tabs-menu"
      aria-label="Open main menu"
      class="inline-flex h-9 w-9 items-center justify-center rounded-md text-gray-700 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 md:hidden dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400"
    >
      <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M4 6h16M4 12h16M4 18h16" /></svg>
    </button>
  </div>

  <nav id="nav-tabs-menu" hidden class="flex flex-col gap-1 border-t border-gray-200 px-4 pb-4 pt-2 md:hidden dark:border-gray-800" aria-label="Main">
    <a href="/support" class="rounded-md px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800">Support</a>
    <a href="/docs" class="rounded-md px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800">Docs</a>
    <a href="/new" class="rounded-lg bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white hover:bg-blue-700">New project</a>
  </nav>

  <div class="mx-auto max-w-6xl px-4">
    <div class="-mb-px flex gap-1 overflow-x-auto" role="tablist" aria-label="Sections">
      <button type="button" role="tab" aria-selected="true" class="shrink-0 whitespace-nowrap border-b-2 border-blue-600 px-3 py-2.5 text-sm font-medium text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-blue-400 dark:text-gray-50">Overview</button>
      <button type="button" role="tab" aria-selected="false" class="shrink-0 whitespace-nowrap border-b-2 border-transparent px-3 py-2.5 text-sm font-medium text-gray-600 hover:border-gray-300 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-400 dark:hover:border-gray-600 dark:hover:text-gray-50">Activity</button>
      <button type="button" role="tab" aria-selected="false" class="shrink-0 whitespace-nowrap border-b-2 border-transparent px-3 py-2.5 text-sm font-medium text-gray-600 hover:border-gray-300 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-400 dark:hover:border-gray-600 dark:hover:text-gray-50">Settings</button>
      <button type="button" role="tab" aria-selected="false" class="shrink-0 whitespace-nowrap border-b-2 border-transparent px-3 py-2.5 text-sm font-medium text-gray-600 hover:border-gray-300 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-400 dark:hover:border-gray-600 dark:hover:text-gray-50">Billing</button>
      <button type="button" role="tab" aria-selected="false" class="shrink-0 whitespace-nowrap border-b-2 border-transparent px-3 py-2.5 text-sm font-medium text-gray-600 hover:border-gray-300 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-400 dark:hover:border-gray-600 dark:hover:text-gray-50">Members</button>
    </div>
  </div>
</header>