Header

<header>
  <div class="@container">
    <div
      class="max-w-5xl flex mx-auto justify-between items-center @desktop:items-end border-b @desktop:border-b-0 border-b-gray-cool-10"
    >
      <div class="@desktop:text-2xl @desktop:mt-8 @desktop:mb-4 ml-4 @desktop:ml-0 @desktop:w-1/3 w-full">
        <em class="font-bold not-italic">
          <a
            class="text-gray-90 focus:outline-4 focus:outline-blue-40v"
            href="/"
          >Project Title</a>
        </em>
      </div>
      <div class="@desktop:hidden">
        <button
          data-part="modal-trigger"
          data-target="mobile-menu"
          class="uppercase ml-auto leading-none text-white text-sm h-12 px-3 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline-4 focus:outline-blue-40v"
        >Menu</button>
      </div>
      <div class="hidden @desktop:flex ml-auto">
        <nav class="flex justify-end items-center pl-2 pb-1">
          <ul class="flex">
            <li class="leading-none">
              <div data-part="dropdown-root">
                <button
                  data-part="dropdown-trigger"
                  class="after:bg-blue-60v after:absolute after:-bottom-1 after:inset-x-4 after:h-1 relative flex items-center gap-1 group p-4 aria-expanded:bg-blue-warm-80v aria-[expanded=true]:text-white font-bold text-gray-cool-60 focus:outline-4 focus:outline-blue-40v hover:text-blue-60v hover:after:bg-blue-60v hover:after:absolute hover:after:-bottom-1 hover:after:inset-x-4 hover:after:h-1 aria-expanded:after:hidden"
                >
                  <span>Dropdown</span>
                  <div
                    aria-hidden="true"
                    class="hidden @mobile-lg:inline-flex"
                  >
                    <span
                      class="icon-[material-symbols--keyboard-arrow-down] group-aria-expanded:icon-[material-symbols--keyboard-arrow-up] align-middle size-4"
                    ></span>
                  </div>
                </button>
                <div
                  data-part="dropdown-content"
                  class="outline-none z-10 bg-blue-warm-80v py-2 w-60 leading-snug"
                >
                  <a
                    data-part="dropdown-item"
                    href="#"
                    class="flex text-white py-2 px-4 hover:underline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
                  >Action</a>
                  <a
                    data-part="dropdown-item"
                    href="#"
                    class="flex text-white py-2 px-4 hover:underline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
                  >Another action</a>
                </div>
              </div>
            </li>
            <li class="leading-none">
              <div data-part="dropdown-root">
                <button
                  data-part="dropdown-trigger"
                  class=" relative flex items-center gap-1 group p-4 aria-expanded:bg-blue-warm-80v aria-[expanded=true]:text-white font-bold text-gray-cool-60 focus:outline-4 focus:outline-blue-40v hover:text-blue-60v hover:after:bg-blue-60v hover:after:absolute hover:after:-bottom-1 hover:after:inset-x-4 hover:after:h-1 aria-expanded:after:hidden"
                >
                  <span>Dropdown</span>
                  <div
                    aria-hidden="true"
                    class="hidden @mobile-lg:inline-flex"
                  >
                    <span
                      class="icon-[material-symbols--keyboard-arrow-down] group-aria-expanded:icon-[material-symbols--keyboard-arrow-up] align-middle size-4"
                    ></span>
                  </div>
                </button>
                <div
                  data-part="dropdown-content"
                  class="outline-none z-10 bg-blue-warm-80v py-2 w-60 leading-snug"
                >
                  <a
                    data-part="dropdown-item"
                    href="#"
                    class="flex text-white py-2 px-4 hover:underline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
                  >Action</a>
                  <a
                    data-part="dropdown-item"
                    href="#"
                    class="flex text-white py-2 px-4 hover:underline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
                  >Another action</a>
                </div>
              </div>
            </li>
            <li class="leading-none">
              <a
                href="#"
                class="p-4 flex font-bold text-gray-cool-60 focus:outline-4 focus:outline-blue-40v hover:text-blue-60v"
              >Link</a>
            </li>
          </ul>

          <section aria-label="search component">
            <form role="search">
              <label
                for="nav-search"
                class="sr-only"
              >Search</label>
              <div class="relative flex items-center">
                <input
                  id="nav-search"
                  type="search"
                  class="p-2 w-full max-w-lg h-8 border border-r-0 border-gray-60 focus:outline-4 focus:outline-blue-40v data-[invalid]:ring-4 data-[invalid]:ring-red-60v data-[invalid]:border-transparent data-[invalid]:outline-offset-4"
                >
                <button
                  aria-label="search"
                  class="flex items-center rounded-r font-bold leading-none text-white px-3 h-8 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v"
                >
                  <div class="icon-[material-symbols--search] size-6"></div>
                </button>
              </div>
            </form>
          </section>

        </nav>

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

  <div>
    <div
      data-part="modal-positioner"
      data-value="mobile-menu"
      class="fixed z-50 inset-0 overflow-y-auto"
    >
      <nav
        data-part="modal-content"
        class="hidden data-[state=open]:flex flex-col gap-6 pt-16 pb-4 px-4 bg-white w-60 fixed right-0 inset-y-0 overflow-auto animate-in duration-300 ease-in-out slide-in-from-right"
      >

        <header
          data-part="modal-title"
          class="sr-only"
        >Menu</header>

        <button
          type="button"
          data-part="modal-close-trigger"
          class="absolute top-0 right-0 size-12 flex items-center justify-center text-black bg-transparent focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
          aria-label="Close"
        >
          <div class="icon-[material-symbols--close] size-6"></div>
        </button>

        <section aria-label="search component">
          <form role="search">
            <label
              for="mobile-nav-search"
              class="sr-only"
            >Search</label>
            <div class="relative flex items-center">
              <input
                id="mobile-nav-search"
                type="search"
                class="p-2 w-full max-w-lg h-8 border border-r-0 border-gray-60 focus:outline-4 focus:outline-blue-40v data-[invalid]:ring-4 data-[invalid]:ring-red-60v data-[invalid]:border-transparent data-[invalid]:outline-offset-4"
              >
              <button
                aria-label="search"
                class="flex items-center rounded-r font-bold leading-none text-white px-3 h-8 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v"
              >
                <div class="icon-[material-symbols--search] size-6"></div>
              </button>
            </div>
          </form>
        </section>

        <ul class="flex flex-col">
          <li class="border-t border-t-gray-10">
            <div data-part="accordion-root">
              <div
                data-part="accordion-item"
                data-value="mobile-dropdown-1"
              >
                <button
                  data-part="accordion-trigger"
                  class="text-left group relative flex items-center justify-between w-full py-3 pl-4 leading-none hover:bg-gray-5 focus:z-10 focus:outline-4 focus:outline-blue-40v gap-3 data-[current]:font-bold data-[current]:after:block data-[current]:after:absolute data-[current]:after:bg-blue-60v data-[current]:after:inset-y-1 data-[current]:after:left-0 data-[current]:after:w-1 data-[current]:after:rounded-full"
                  data-current="true"
                >
                  <span
                    class="text-gray-60 group-hover:text-blue-60v group-[[data-current]]:text-blue-60v">Dropdown</span>
                  <span class="h-full flex items-center">
                    <span
                      class="size-5 icon-[material-symbols--add] group-aria-expanded:icon-[material-symbols--remove]"
                    ></span>
                  </span>
                </button>
                <ul data-part="accordion-content">
                  <li class="border-t border-t-gray-10">
                    <a
                      href="#"
                      class="block py-2 pl-8 pr-4 text-gray-60 hover:text-blue-60v hover:bg-gray-5 focus:outline-4 focus:outline-blue-40v"
                    >Dropdown</a>
                  </li>
                  <li class="border-t border-t-gray-10">
                    <a
                      href="#"
                      class="block py-2 pl-8 pr-4 text-gray-60 hover:text-blue-60v hover:bg-gray-5 focus:outline-4 focus:outline-blue-40v"
                    >Dropdown</a>
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li class="border-t border-t-gray-10">
            <div data-part="accordion-root">
              <div
                data-part="accordion-item"
                data-value="mobile-dropdown-2"
              >
                <button
                  data-part="accordion-trigger"
                  class="text-left group relative flex items-center justify-between w-full py-3 pl-4 leading-none hover:bg-gray-5 focus:z-10 focus:outline-4 focus:outline-blue-40v gap-3 data-[current]:font-bold data-[current]:after:block data-[current]:after:absolute data-[current]:after:bg-blue-60v data-[current]:after:inset-y-1 data-[current]:after:left-0 data-[current]:after:w-1 data-[current]:after:rounded-full"
                >
                  <span
                    class="text-gray-60 group-hover:text-blue-60v group-[[data-current]]:text-blue-60v">Dropdown</span>
                  <span class="h-full flex items-center">
                    <span
                      class="size-5 icon-[material-symbols--add] group-aria-expanded:icon-[material-symbols--remove]"
                    ></span>
                  </span>
                </button>
                <ul data-part="accordion-content">
                  <li class="border-t border-t-gray-10">
                    <a
                      href="#"
                      class="block py-2 pl-8 pr-4 text-gray-60 hover:text-blue-60v hover:bg-gray-5 focus:outline-4 focus:outline-blue-40v"
                    >Dropdown</a>
                  </li>
                  <li class="border-t border-t-gray-10">
                    <a
                      href="#"
                      class="block py-2 pl-8 pr-4 text-gray-60 hover:text-blue-60v hover:bg-gray-5 focus:outline-4 focus:outline-blue-40v"
                    >Dropdown</a>
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li class="border-t border-t-gray-10">
            <a
              href="#"
              class="block py-3 px-4 leading-none text-gray-60 hover:text-blue-60v hover:bg-gray-5 focus:outline-4 focus:outline-blue-40v"
            >Link</a>
          </li>
        </ul>

      </nav>
    </div>

    <div
      data-part="modal-backdrop"
      data-value="mobile-menu"
      class="hidden data-[state=open]:block fixed z-40 inset-0 bg-black/70 animate-in duration-150 ease-in-out fade-in-0"
    ></div>

  </div>
</header>

<header>
  <div class="@container">
    <div
      class="max-w-5xl flex justify-between items-center @desktop:px-8 mx-auto border-b @desktop:border-b-0 border-b-gray-cool-10"
    >
      <div class="@desktop:text-4xl @desktop:pt-8 @desktop:pb-6 ml-4 @desktop:ml-0 @desktop:w-1/3 w-full">
        <em class="font-bold not-italic">
          <a
            class="text-gray-90 focus:outline-4 focus:outline-blue-40v"
            href="/"
          >Project Title</a>
        </em>
      </div>
      <div class="@desktop:hidden">
        <button
          data-part="modal-trigger"
          data-target="mobile-extended-menu"
          class="uppercase ml-auto leading-none text-white text-sm h-12 px-3 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline-4 focus:outline-blue-40v"
        >Menu</button>
      </div>
    </div>
    <div class="hidden @desktop:block border-t border-t-gray-cool-10">
      <nav class="max-w-5xl px-4 mx-auto relative">
        <ul class="flex">
          <li class="leading-none">
            <div data-part="dropdown-root">
              <button
                data-part="dropdown-trigger"
                class="after:bg-blue-60v after:absolute after:-bottom-1 after:inset-x-4 after:h-1 relative flex items-center gap-1 group p-4 aria-expanded:bg-blue-warm-80v aria-[expanded=true]:text-white font-bold text-gray-cool-60 focus:outline-4 focus:outline-blue-40v hover:text-blue-60v hover:after:bg-blue-60v hover:after:absolute hover:after:-bottom-1 hover:after:inset-x-4 hover:after:h-1 aria-expanded:after:hidden"
              >
                <span>Dropdown</span>
                <div class="hidden @mobile-lg:inline-flex">
                  <span
                    class="icon-[material-symbols--keyboard-arrow-down] group-aria-expanded:icon-[material-symbols--keyboard-arrow-up] align-middle size-4"
                  ></span>
                </div>
              </button>
              <div
                data-part="dropdown-content"
                class="outline-none z-10 bg-blue-warm-80v py-2 w-60 leading-snug"
              >
                <a
                  data-part="dropdown-item"
                  href="#"
                  class="flex text-white py-2 px-4 hover:underline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
                >Action</a>
                <a
                  data-part="dropdown-item"
                  href="#"
                  class="flex text-white py-2 px-4 hover:underline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
                >Another action</a>
              </div>
            </div>
          </li>
          <li class="leading-none">
            <div data-part="dropdown-root">
              <button
                data-part="dropdown-trigger"
                class=" relative flex items-center gap-1 group p-4 aria-expanded:bg-blue-warm-80v aria-[expanded=true]:text-white font-bold text-gray-cool-60 focus:outline-4 focus:outline-blue-40v hover:text-blue-60v hover:after:bg-blue-60v hover:after:absolute hover:after:-bottom-1 hover:after:inset-x-4 hover:after:h-1 aria-expanded:after:hidden"
              >
                <span>Dropdown</span>
                <div class="hidden @mobile-lg:inline-flex">
                  <span
                    class="icon-[material-symbols--keyboard-arrow-down] group-aria-expanded:icon-[material-symbols--keyboard-arrow-up] align-middle size-4"
                  ></span>
                </div>
              </button>
              <div
                data-part="dropdown-content"
                class="outline-none z-10 bg-blue-warm-80v py-2 w-60 leading-snug"
              >
                <a
                  data-part="dropdown-item"
                  href="#"
                  class="flex text-white py-2 px-4 hover:underline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
                >Action</a>
                <a
                  data-part="dropdown-item"
                  href="#"
                  class="flex text-white py-2 px-4 hover:underline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
                >Another action</a>
              </div>
            </div>
          </li>
          <li class="leading-none">
            <a
              href="#"
              class="p-4 flex font-bold text-gray-cool-60 focus:outline-4 focus:outline-blue-40v hover:text-blue-60v"
            >Link</a>
          </li>
        </ul>

        <div class="mt-2 right-8 bottom-16 absolute min-w-64 flex flex-col items-end">

          <ul class="flex gap-2 mb-1 divide-x divide-gray-cool-10 *:pr-2 *:last:pr-0">
            <li class="inline-flex">
              <a
                href="#"
                class="text-gray-50 text-sm hover:underline hover:text-blue-60v focus:outline-4 focus:outline-blue-40v"
              >Secondary Link</a>
            </li>
            <li class="inline-flex">
              <a
                href="#"
                class="text-gray-50 text-sm hover:underline hover:text-blue-60v focus:outline-4 focus:outline-blue-40v"
              >Another Secondary Link</a>
            </li>
          </ul>

          <section aria-label="search component">
            <form
              role="search"
              class="mt-1 max-w-64"
            >
              <label
                for="nav-search"
                class="sr-only"
              >Search</label>
              <div class="relative flex items-center">
                <input
                  id="nav-search"
                  type="search"
                  class="p-2 max-w-lg h-8 border border-r-0 border-gray-60 focus:outline-4 focus:outline-blue-40v data-[invalid]:ring-4 data-[invalid]:ring-red-60v data-[invalid]:border-transparent data-[invalid]:outline-offset-4"
                >
                <button
                  aria-label="search"
                  class="flex items-center rounded-r font-bold leading-none text-white px-3 h-8 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v"
                >
                  <div class="icon-[material-symbols--search] size-6"></div>
                </button>
              </div>
            </form>
          </section>
        </div>

      </nav>

    </div>
  </div>

  <div
    data-part="modal-backdrop"
    data-value="mobile-extended-menu"
    class="hidden data-[state=open]:block fixed z-40 inset-0 bg-black/70 animate-in duration-150 ease-in-out fade-in-0"
  ></div>

  <div
    data-part="modal-positioner"
    data-value="mobile-extended-menu"
    class="fixed z-50 inset-0 overflow-y-auto"
  >
    <nav
      data-part="modal-content"
      class="hidden data-[state=open]:flex flex-col gap-6 pt-16 pb-4 px-4 bg-white w-60 fixed right-0 inset-y-0 overflow-auto animate-in duration-300 ease-in-out slide-in-from-right"
    >

      <header
        data-part="modal-title"
        class="sr-only"
      >Menu</header>

      <button
        type="button"
        data-part="modal-close-trigger"
        class="absolute top-0 right-0 size-12 flex items-center justify-center text-black bg-transparent focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
        aria-label="Close"
      >
        <div class="icon-[material-symbols--close] size-6"></div>
      </button>

      <ul class="flex flex-col">
        <li class="border-t border-t-gray-10">
          <div data-part="accordion-root">
            <div
              data-part="accordion-item"
              data-value="mobile-dropdown-1"
            >
              <button
                data-part="accordion-trigger"
                class="text-left group relative flex items-center justify-between w-full py-3 pl-4 leading-none hover:bg-gray-5 focus:z-10 focus:outline-4 focus:outline-blue-40v gap-3 data-[current]:font-bold data-[current]:after:block data-[current]:after:absolute data-[current]:after:bg-blue-60v data-[current]:after:inset-y-1 data-[current]:after:left-0 data-[current]:after:w-1 data-[current]:after:rounded-full"
                data-current="true"
              >
                <span
                  class="text-gray-60 group-hover:text-blue-60v group-[[data-current]]:text-blue-60v">Dropdown</span>
                <span class="h-full flex items-center">
                  <span
                    class="size-5 icon-[material-symbols--add] group-aria-expanded:icon-[material-symbols--remove]"
                  ></span>
                </span>
              </button>
              <ul data-part="accordion-content">
                <li class="border-t border-t-gray-10">
                  <a
                    href="#"
                    class="block py-2 pl-8 pr-4 text-gray-60 hover:text-blue-60v hover:bg-gray-5 focus:outline-4 focus:outline-blue-40v"
                  >Dropdown</a>
                </li>
                <li class="border-t border-t-gray-10">
                  <a
                    href="#"
                    class="block py-2 pl-8 pr-4 text-gray-60 hover:text-blue-60v hover:bg-gray-5 focus:outline-4 focus:outline-blue-40v"
                  >Dropdown</a>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li class="border-t border-t-gray-10">
          <div data-part="accordion-root">
            <div
              data-part="accordion-item"
              data-value="mobile-dropdown-2"
            >
              <button
                data-part="accordion-trigger"
                class="text-left group relative flex items-center justify-between w-full py-3 pl-4 leading-none hover:bg-gray-5 focus:z-10 focus:outline-4 focus:outline-blue-40v gap-3 data-[current]:font-bold data-[current]:after:block data-[current]:after:absolute data-[current]:after:bg-blue-60v data-[current]:after:inset-y-1 data-[current]:after:left-0 data-[current]:after:w-1 data-[current]:after:rounded-full"
              >
                <span
                  class="text-gray-60 group-hover:text-blue-60v group-[[data-current]]:text-blue-60v">Dropdown</span>
                <span class="h-full flex items-center">
                  <span
                    class="size-5 icon-[material-symbols--add] group-aria-expanded:icon-[material-symbols--remove]"
                  ></span>
                </span>
              </button>
              <ul data-part="accordion-content">
                <li class="border-t border-t-gray-10">
                  <a
                    href="#"
                    class="block py-2 pl-8 pr-4 text-gray-60 hover:text-blue-60v hover:bg-gray-5 focus:outline-4 focus:outline-blue-40v"
                  >Dropdown</a>
                </li>
                <li class="border-t border-t-gray-10">
                  <a
                    href="#"
                    class="block py-2 pl-8 pr-4 text-gray-60 hover:text-blue-60v hover:bg-gray-5 focus:outline-4 focus:outline-blue-40v"
                  >Dropdown</a>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li class="border-t border-t-gray-10">
          <a
            href="#"
            class="block py-3 px-4 leading-none text-gray-60 hover:text-blue-60v hover:bg-gray-5 focus:outline-4 focus:outline-blue-40v"
          >Link</a>
        </li>
      </ul>

      <div class="flex flex-col gap-4">
        <ul>
          <li>
            <a
              href="#"
              class="text-gray-50 text-sm hover:underline hover:text-blue-60v focus:outline-4 focus:outline-blue-40v"
            >Secondary Link</a>
          </li>
          <li>
            <a
              href="#"
              class="text-gray-50 text-sm hover:underline hover:text-blue-60v focus:outline-4 focus:outline-blue-40v"
            >Another Secondary Link</a>
          </li>
        </ul>

        <section aria-label="search component">
          <form role="search">
            <label
              for="mobile-nav-search"
              class="sr-only"
            >Search</label>
            <div class="relative flex items-center">
              <input
                id="mobile-nav-search"
                type="search"
                class="p-2 bg-transparent w-full max-w-lg h-8 border border-r-0 border-gray-60 focus:outline-4 focus:outline-blue-40v data-[invalid]:ring-4 data-[invalid]:ring-red-60v data-[invalid]:border-transparent data-[invalid]:outline-offset-4"
              >
              <button
                aria-label="search"
                class="flex items-center rounded-r font-bold leading-none text-white px-3 h-8 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v"
              >
                <div class="icon-[material-symbols--search] size-6"></div>
              </button>
            </div>
          </form>
        </section>
      </div>

    </nav>

  </div>
</header>