---
import navbarPages from "../data/navbarPages.json";
---

<div>
    <div class="bg-white flex justify-between items-center">
        <a class="h-20 flex items-center p-2 z-20 w-auto scale-[85%]" href="/">
            <img src="logos/ieeelogo_full.png" class="h-14" alt="IEEE Logo" />
        </a>
        <nav class="xl:block items-center px-6 hidden">
            <ul>
                {
                    navbarPages.map((page) => (
                        <a
                            href={page.url}
                            class=" font-extrabold text-ieee hover:text-gray-300 px-3 py-2 rounded-md text-2xl"
                        >
                            {page.name}
                        </a>
                    ))
                }
            </ul>
        </nav>
        <nav
            class="xl:hidden absolute top-[75px] w-full bg-white overflow-y-hidden transition-all duration-500 -translate-y-full z-10"
            style="height: calc(100vh - 75px);"
            id="secondNav"
        >
            <ul
                class="block text-center mt-[80px] mx-auto mb-0 my-auto w-fit"
                id="navbar-list"
            >
                {
                    navbarPages.map((page) => (
                        <a
                            href={page.url}
                            class=" block font-extrabold text-2xl text-ieee hover:text-gray-300 pb-10 rounded-md  opacity-0"
                        >
                            {page.name}
                        </a>
                    ))
                }
            </ul>
        </nav>
        <div class="xl:hidden z-5 mr-4 z-20">
            <button
                class="hamburger hamburger--collapse flex bg-white p-0 m-0"
                color="#FFFFFF"
                type="button"
            >
                <span class="hamburger-box">
                    <span class="hamburger-inner"></span>
                </span>
            </button>
        </div>
    </div>
</div>

<script>
    var hamburger = document.querySelector(".hamburger") as HTMLButtonElement;
    var secondNav = document.querySelector("#secondNav");
    var navbarListItems = document.querySelectorAll("#navbar-list a");

    if (hamburger && secondNav && navbarListItems) {
        hamburger.addEventListener("click", function () {
            hamburger.disabled = true;

            hamburger.classList.toggle("is-active");

            if (secondNav.classList.contains("-translate-y-full")) {
                secondNav.classList.remove("-translate-y-full");
                secondNav.classList.add("translate-y-0");

                let lastItemIndex = navbarListItems.length - 1;

                navbarListItems.forEach((item, index) => {
                    setTimeout(
                        () => {
                            let htmlItem = item as HTMLElement;
                            htmlItem.style.transition = "opacity 0.5s ease";
                            htmlItem.style.opacity = "1";

                            if (index === lastItemIndex) {
                                setTimeout(() => {
                                    hamburger.disabled = false;
                                }, 500);
                            }
                        },
                        500 + index * 100
                    );
                });
            } else {
                navbarListItems.forEach((item, index) => {
                    let htmlItem = item as HTMLElement;
                    htmlItem.style.opacity = "0";
                });

                setTimeout(() => {
                    secondNav.classList.remove("translate-y-0");
                    secondNav.classList.add("-translate-y-full");

                    setTimeout(() => {
                        hamburger.disabled = false;
                    }, 500);
                }, 500);
            }
        });
    }
</script>