RythonDev/src/components/sections/NavBar.astro

<div class="w-full">
    <label
        class="fixed flex hamburger-menu bg-primary border-2 border-solid border-gray-100 rounded-lg"
        aria-label="Menu"
        transition:persist
        transition:name="hamburger"
    >
        <span class="top-bun"></span>
        <input type="checkbox" aria-label="Toggle menu" />
        <span class="bottom-bun"></span>
    </label>
    <aside class="sidebar flex z-20">
        <nav class="flex flex-col capitalize" role="navigation">
            <a
                class="sidebar-url px-5 py-2 mt-10 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
                href="./">Home</a
            >
            <a
                class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
                href="what-i-do">What I Do</a
            >
            <a
                class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
                href="projects">Projects</a
            >
            <a
                class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
                href="skills">Skills</a
            >
            <a
                class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
                href="education">Education</a
            >
            <a
                class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
                href="contact">Contact</a
            >
        </nav>
    </aside>
    <div
        id="navbar"
        class="fixed z-50 top-0 w-full hidden md:flex justify-center
            bg-[linear-gradient(180deg,_rgba(32,32,32,1)_70%,_rgba(32,32,32,0)_100%)]"
        transition:name="navBar"
    >
        <div
            id="navbar-div"
            class="py-4 uppercase w-full flex flex-row justify-center items-center"
        >
            <a
                class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
                href="./">home</a
            >
            <a
                class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
                href="what-i-do">What I Do</a
            >

            <a
                class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
                href="projects">projects</a
            >
            <a
                class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
                href="skills">skills</a
            >
            <a
                class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
                href="education">education</a
            >
            <a
                class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
                href="contact">contact</a
            >
        </div>
    </div>
</div>

<style>
    :root {
        --bar-width: 30px;
        --bar-height: 4px;
        --hamburger-gap: 6px;
        --foreground: #141414;
        --background: white;
        --hamburger-margin: 20px;
        --animation-timing: 200ms ease-in-out;
        --hamburger-height: calc(
            var(--bar-height) * 3 + var(--hamburger-gap) * 2
        );
    }

    .hamburger-menu {
        --x-width: calc(var(--hamburger-height) * 1.41421356237);

        display: none;

        translate: 0 -20px;
        flex-direction: column;

        gap: var(--hamburger-gap);
        top: var(--hamburger-margin);
        right: var(--hamburger-margin);
        z-index: 30;
        cursor: pointer;
        background: var(--foreground);

        padding: 0.5rem;

        rotate: 180deg;

        transition: all var(--animation-timing);
    }

    .hamburger-menu.active {
        padding-right: 0;
    }

    .hamburger-menu input:focus-visible {
        border: 1px solid var(--background);
        box-shadow: 0 0 0 1px var(--foreground);
    }

    .hamburger-menu input,
    .hamburger-menu span {
        content: "";
        width: var(--bar-width);
        height: var(--bar-height);
        background-color: white;
        border-radius: 9999px;
        transform-origin: left center;
        transition:
            opacity var(--animation-timing),
            width var(--animation-timing),
            rotate var(--animation-timing),
            translate var(--animation-timing),
            background-color var(--animation-timing);
    }

    .hamburger-menu input {
        appearance: none;
        padding: 0;
        margin: 0;
        outline: none;
        pointer-events: none;
    }

    .hamburger-menu .top-bun.active {
        rotate: 45deg;
        width: var(--x-width);
        translate: calc(-50% + var(--x-width) / 2) calc(var(--bar-height) / -2);
    }

    .hamburger-menu .bottom-bun.active {
        rotate: -45deg;
        width: var(--x-width);
        translate: calc(-50% + var(--x-width) / 2) calc(var(--bar-height) / 2);
    }

    .hamburger-menu input:checked {
        opacity: 0;
        width: 0;
    }

    .sidebar {
        position: fixed;
        top: 0;
        right: 0;
        transition: translate var(--animation-timing);
        translate: 100%;
        padding: 0.5rem 1rem;
        padding-top: calc(
            var(--hamburger-height) + var(--hamburger-margin) + 1rem
        );
        background-color: var(--foreground);
        color: var(--background);
        max-width: 10rem;
        min-height: 100vh;
    }

    @media (max-width: 767px) {
        .hamburger-menu {
            display: flex;
        }
    }
</style>

<script defer is:inline>
    const sidebar = document.querySelectorAll(".sidebar-url");
    const hamburger = document.querySelector(".hamburger-menu");
    const checkbox = document.querySelector("input");

    const topBun = document.querySelector(".top-bun");
    const bottomBun = document.querySelector(".bottom-bun");

    const openSideBar = () => {
        checkbox.checked = true;
        document.querySelector(".sidebar").style.translate = "0";
        hamburger.classList.add("active");
        topBun.classList.add("active");
        bottomBun.classList.add("active");
    };

    const closeSideBar = () => {
        checkbox.checked = false;
        document.querySelector(".sidebar").style.translate = "100%";
        hamburger.classList.remove("active");
        topBun.classList.remove("active");
        bottomBun.classList.remove("active");
    };

    // for each sidebar url, if clicked on, uncheck the checkbox
    sidebar.forEach((url) => {
        url.addEventListener("click", () => {
            closeSideBar();
        });
    });

    if (window.innerWidth < 768) {
        hamburger.style.translate = "0 0";
    }

    // window.addEventListener("scroll", () => {
    // 	if (window.scrollY > 50 || window.innerWidth < 768) {
    // 		hamburger.style.translate = "0 0";
    // 	} else {
    // 		hamburger.style.translate = "0 -200px";
    // 		closeSideBar();
    // 	}
    // });

    // if clicked outside of the hamburger menu, close the sidebar
    window.addEventListener("click", (e) => {
        if (
            e.target !== hamburger &&
            e.target !== topBun &&
            e.target !== bottomBun &&
            e.target !== checkbox &&
            e.target !== document.querySelector(".sidebar") &&
            e.target !== document.querySelector(".sidebar nav")
        ) {
            closeSideBar();
        }
    });

    // if window is resized, check if it's less than 768px
    window.addEventListener("resize", () => {
        if (window.innerWidth < 768) {
            hamburger.style.translate = "0 0";
        } else {
            hamburger.style.translate = "0 -200px";
            closeSideBar();
        }
    });

    // if checked, translate the sidebar
    checkbox.addEventListener("change", () => {
        if (checkbox.checked) {
            openSideBar();
        } else {
            closeSideBar();
        }
    });
</script>