---
import { MENU_LINKS } from "@/data/constants";

const url = new URL(Astro.request.url);
---

<script>
	import { toggleClass } from "@/utils";

  class MobileNavBtn extends HTMLElement {
		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);

</script>

<header id="main-header" class="group relative 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}
      >

      <svg
        key="0"
        class="mr-3 h-10 w-6 sm:pb-4 sm:absolute sm:left-[-4.5rem] sm:mr-0 sm:h-20 sm:w-12"
        fill="none"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="2"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path d="m8 3 4 8 5-5 5 15H2L8 3z" />
      </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>
  <mobile-button>
    <button
        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>
      <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>
      </svg>
    </button>
  </mobile-button>

</header>