---
import {
  Astronav,
  MenuItems,
  MenuIcon,
  Dropdown,
  DropdownItems,
  DropdownSubmenu,
} from "astro-navbar";
---

<header class="lg:flex justify-between p-5 gap-5 mx-auto container">
  <Astronav closeOnClick>
    <div class="flex w-full lg:w-auto justify-between">
      <a>Your Logo</a>
      <div class="block lg:hidden">
        <MenuIcon class="w-4 h-4 text-gray-800" />
      </div>
    </div>
    <MenuItems class="hidden lg:flex">
      <ul class="flex flex-col lg:flex-row lg:gap-5">
        <li>
          <a href="/">Home</a>
        </li>
        <li>
          <Dropdown class="group">
            <button class="flex items-center">
              <span> About</span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="3"
                stroke="currentColor"
                class="w-3 h-3 mt-0.5 group-open:rotate-180">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>
              </svg>
            </button>
            <DropdownItems class="relative">
              <div
                class="lg:absolute bg-white top-2 w-40 border shadow rounded p-2">
                <ul>
                  <li>
                    <a href="#">Menu 1</a>
                  </li>
                  <li>
                    <a href="#">Menu 2</a>
                  </li>
                  <li>
                    <DropdownSubmenu class="group/submenu">
                      <button class="flex w-full items-center justify-between">
                        <span> Dropdown</span>
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          fill="none"
                          viewBox="0 0 24 24"
                          stroke-width="3"
                          stroke="currentColor"
                          class="w-3 h-3 mt-0.5 group-open/submenu:rotate-180">
                          <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M8.25 4.5l7.5 7.5-7.5 7.5"></path>
                        </svg>
                      </button>
                      <DropdownItems class="relative">
                        <ul
                          class="lg:absolute bg-white top-0 left-full w-40 border shadow rounded p-2">
                          <li>
                            <a href="#">Submenu 1</a>
                          </li>
                          <li>
                            <a href="#">Submenu 2</a>
                          </li>
                          <li>
                            <DropdownSubmenu class="group/nestedsubmenu">
                              <button
                                class="flex w-full items-center justify-between">
                                <span> Dropdown</span>
                                <svg
                                  xmlns="http://www.w3.org/2000/svg"
                                  fill="none"
                                  viewBox="0 0 24 24"
                                  stroke-width="3"
                                  stroke="currentColor"
                                  class="w-3 h-3 mt-0.5 group-open/nestedsubmenu:rotate-180">
                                  <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    d="M8.25 4.5l7.5 7.5-7.5 7.5"></path>
                                </svg>
                              </button>
                              <DropdownItems class="relative">
                                <ul
                                  class="lg:absolute bg-white top-0 left-full w-40 border shadow rounded p-2">
                                  <li>
                                    <a href="#">Submenu 1</a>
                                  </li>
                                  <li>
                                    <a href="#">Submenu 2</a>
                                  </li>
                                </ul>
                              </DropdownItems>
                            </DropdownSubmenu>
                          </li>
                        </ul>
                      </DropdownItems>
                    </DropdownSubmenu>
                  </li>
                  <li>
                    <DropdownSubmenu class="group/submenu">
                      <button class="flex w-full items-center justify-between">
                        <span> Dropdown</span>
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          fill="none"
                          viewBox="0 0 24 24"
                          stroke-width="3"
                          stroke="currentColor"
                          class="w-3 h-3 mt-0.5 group-open/submenu:rotate-180">
                          <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M8.25 4.5l7.5 7.5-7.5 7.5"></path>
                        </svg>
                      </button>
                      <DropdownItems class="relative">
                        <ul
                          class="lg:absolute bg-white top-0 left-full w-40 border shadow rounded p-2">
                          <li>
                            <a href="#">Submenu 1</a>
                          </li>
                          <li>
                            <a href="#">Submenu 2</a>
                          </li>
                        </ul>
                      </DropdownItems>
                    </DropdownSubmenu>
                  </li>
                </ul>
              </div>
            </DropdownItems>
          </Dropdown>
        </li>
        <li>
          <Dropdown class="group">
            <button class="flex items-center">
              <span> Services</span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="3"
                stroke="currentColor"
                class="w-3 h-3 mt-0.5 group-open:rotate-180">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>
              </svg>
            </button>
            <DropdownItems class="relative">
              <div
                class="lg:absolute bg-white top-2 w-40 border shadow rounded p-2">
                <ul>
                  <li>
                    <a href="#">Menu 1</a>
                  </li>
                  <li>
                    <a href="#">Menu 2</a>
                  </li>
                  <li>
                    <DropdownSubmenu class="group/submenu">
                      <button class="flex w-full items-center justify-between">
                        <span> Dropdown</span>
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          fill="none"
                          viewBox="0 0 24 24"
                          stroke-width="3"
                          stroke="currentColor"
                          class="w-3 h-3 mt-0.5 group-open/submenu:rotate-180">
                          <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M8.25 4.5l7.5 7.5-7.5 7.5"></path>
                        </svg>
                      </button>
                      <DropdownItems class="relative">
                        <ul
                          class="lg:absolute bg-white top-0 left-full w-40 border shadow rounded p-2">
                          <li>
                            <a href="#">Submenu 1</a>
                          </li>
                          <li>
                            <a href="#">Submenu 2</a>
                          </li>
                        </ul>
                      </DropdownItems>
                    </DropdownSubmenu>
                  </li>
                </ul>
              </div>
            </DropdownItems>
          </Dropdown>
          <li>
            <a href="#">Pricing</a>
          </li>
          <li>
            <a href="/contact">Contact</a>
          </li>
        </li>
      </ul>
    </MenuItems>
  </Astronav>
</header>