import { toggleClass } from "@/utils";

    constructor() {

      super();

      const headerEl = document.getElementById("main-header")!;

      const mobileButtonEl = document.getElementById(

        "toggle-navigation-menu",

      ) as HTMLButtonElement;

      let menuOpen = false;

      function toggleMobileMenu() {

        toggleClass(headerEl, "menu-open");

        menuOpen = !menuOpen;

        mobileButtonEl.setAttribute("aria-expanded", menuOpen.toString());

      }

      mobileButtonEl.addEventListener("click", toggleMobileMenu);

      document.addEventListener("astro:after-swap", () => {

        if (menuOpen) toggleMobileMenu();

      });

    }

  }

  customElements.define("mobile-button", MobileNavBtn);

<header

  id="main-header"

  class="group relative mb-14 sm:mb-28 flex items-center justify-between sm:pl-[4.5rem]"

>

  <div class="flex sm:flex-col">

    <a

      href="/"

      class="inline-flex items-center sm:relative sm:inline-block"

      aria-current={url.pathname === "/" ? "page" : false}

      data-astro-reload

    >

        xmlns="http://www.w3.org/2000/svg"

        class="mr-3 h-10 w-6 sm:pb-4 sm:absolute sm:left-[-4.5rem] sm:mr-0 sm:h-20 sm:w-[52px]"

        viewBox="0 0 256 256"

        ><!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->

        <path

          fill="currentColor"

          d="M164 78a26 26 0 1 0-26-26a26 26 0 0 0 26 26m0-40a14 14 0 1 1-14 14a14 14 0 0 1 14-14m89.16 158.94l-54.56-92.08a13.9 13.9 0 0 0-12-6.86a13.88 13.88 0 0 0-12 6.86l-27.88 47.05l-46.56-79a14 14 0 0 0-24.13 0L2.83 197A6 6 0 0 0 8 206h240a6 6 0 0 0 5.16-9.06M86.27 79a2 2 0 0 1 3.46 0l25.34 43H60.93ZM18.5 194l35.36-60h68.29l19.3 32.77l16 27.2Zm152.93 0l-17.85-30.29L184.83 111a2 2 0 0 1 1.72-1a1.93 1.93 0 0 1 1.72 1l49.2 83Z"

        ></path></svg

      <span class="text-xl font-bold sm:text-2xl">Steve Simkins</span>

    </a>

    <nav

      id="navigation-menu"

      class="absolute -inset-x-4 top-14 hidden flex-col items-end gap-y-4 rounded-md bg-[color:var(--theme-menu-bg)] py-4 text-accent shadow backdrop-blur group-[.menu-open]:z-50 group-[.menu-open]:flex sm:static sm:z-auto sm:mt-1 sm:-ml-4 sm:flex sm:flex-row sm:items-center sm:divide-x sm:divide-dashed sm:divide-accent sm:rounded-none sm:bg-transparent sm:py-0 sm:shadow-none sm:backdrop-blur-none"

      aria-label="Main menu"

    >

      {

        MENU_LINKS.map((link) => (

          <a

            href={link.path}

            class="py-4 px-4 sm:py-0 sm:hover:underline"

            aria-current={url.pathname === link.path ? "page" : false}

            rel="prefetch"

          >

            {link.title}

          </a>

        ))

      }

    </nav>

  </div>

      id="toggle-navigation-menu"

      class="group relative ml-8 h-7 w-7 sm:invisible sm:hidden"

      type="button"

      aria-label="Open main menu"

      aria-expanded="false"

      aria-haspopup="menu"

    >

      <svg

        id="line-svg"

        class="absolute top-1/2 left-1/2 h-full w-full -translate-x-1/2 -translate-y-1/2 transition-all group-aria-expanded:scale-0 group-aria-expanded:opacity-0"

        aria-hidden="true"

        focusable="false"

        xmlns="http://www.w3.org/2000/svg"

        fill="none"

        viewBox="0 0 24 24"

        stroke-width="1.5"

        stroke="currentColor"

      >

        <path

          stroke-linecap="round"

          stroke-linejoin="round"

          d="M3.75 9h16.5m-16.5 6.75h16.5"></path>

      </svg>

        id="cross-svg"

        class="absolute top-1/2 left-1/2 h-full w-full -translate-x-1/2 -translate-y-1/2 scale-0 text-accent opacity-0 transition-all group-aria-expanded:scale-100 group-aria-expanded:opacity-100"

        class="text-accent"

        aria-hidden="true"

        focusable="false"

        xmlns="http://www.w3.org/2000/svg"

        fill="none"

        viewBox="0 0 24 24"

        stroke-width="1.5"

        stroke="currentColor"

      >

        <path

          stroke-linecap="round"

          stroke-linejoin="round"

          d="M6 18L18 6M6 6l12 12"></path>