From 238e5dfdf72284cf829a389819530e5187274153 Mon Sep 17 00:00:00 2001
From: liyunze <50455574+liyunze-coding@users.noreply.github.com>
Date: Fri, 8 Aug 2025 13:21:31 +1000
Subject: [PATCH] update navbar

---
 src/components/global/NavBar.astro     |  11 +-
 src/components/global/NavBar_old.astro | 266 -------------------------
 2 files changed, 4 insertions(+), 273 deletions(-)
 delete mode 100644 src/components/global/NavBar_old.astro

diff --git a/src/components/global/NavBar.astro b/src/components/global/NavBar.astro
index 337d0f2..99b3d5c 100644
--- a/src/components/global/NavBar.astro
+++ b/src/components/global/NavBar.astro
@@ -1,5 +1,7 @@
 ---
 import { HoverNavigation } from "@/components/ui/HoverNavigation";
+import { Image } from "astro:assets";
+import pfp from "@/components/images/pfp_new.webp";
 
 const navLinks = [
 	{
@@ -26,13 +28,8 @@ const navLinks = [
 ---
 
 <div
-	class="bg-secondary fixed top-5 left-1/2 z-30 box-border flex -translate-x-1/2 items-center justify-center gap-5 overflow-auto rounded-full border-2 border-solid border-gray-700 px-5 py-3"
+	class="bg-secondary fixed top-5 left-1/2 z-30 box-border flex -translate-x-1/2 items-center justify-center overflow-auto rounded-full border-2 border-solid border-gray-700 px-5 py-3"
 >
-	<img
-		src="/images/pfp_new.webp"
-		alt="Ryan"
-		width={50}
-		class="rounded-full"
-	/>
+	<Image src={pfp} alt="Ryan" width={50} class="mr-3 rounded-full" />
 	<HoverNavigation items={navLinks} client:load />
 </div>
diff --git a/src/components/global/NavBar_old.astro b/src/components/global/NavBar_old.astro
deleted file mode 100644
index 731d0f8..0000000
--- a/src/components/global/NavBar_old.astro
+++ /dev/null
@@ -1,266 +0,0 @@
-<div class="w-full">
-    <label
-        class="hamburger-menu bg-primary fixed flex rounded-lg border-2 border-solid border-gray-100"
-        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 z-20 flex">
-        <nav
-            class="flex w-full flex-col items-center justify-center gap-5 capitalize"
-            role="navigation"
-        >
-            <a
-                class="sidebar-url rounded-md px-5 py-2 text-center text-2xl transition-colors duration-300 hover:bg-gray-100 hover:text-gray-600"
-                href="/">Home</a
-            >
-            <a
-                class="sidebar-url rounded-md px-5 py-2 text-center text-2xl transition-colors duration-300 hover:bg-gray-100 hover:text-gray-600"
-                href="/what-i-do">What I Do</a
-            >
-            <a
-                class="sidebar-url rounded-md px-5 py-2 text-center text-2xl transition-colors duration-300 hover:bg-gray-100 hover:text-gray-600"
-                href="/projects">Projects</a
-            >
-            <a
-                class="sidebar-url rounded-md px-5 py-2 text-center text-2xl transition-colors duration-300 hover:bg-gray-100 hover:text-gray-600"
-                href="/skills">Skills</a
-            >
-            <a
-                class="sidebar-url rounded-md px-5 py-2 text-center text-2xl transition-colors duration-300 hover:bg-gray-100 hover:text-gray-600"
-                href="/experience">Experience</a
-            >
-            <a
-                class="sidebar-url rounded-md px-5 py-2 text-center text-2xl transition-colors duration-300 hover:bg-gray-100 hover:text-gray-600"
-                href="/contact">Contact</a
-            >
-        </nav>
-    </aside>
-    <div
-        id="navbar"
-        class="fixed top-0 z-50 hidden w-full justify-center bg-[#202020]/80 backdrop-blur md:flex"
-        transition:name="navBar"
-    >
-        <div
-            id="navbar-div"
-            class="flex w-full flex-row items-center justify-center py-4 uppercase"
-        >
-            <a
-                class="mx-2 rounded-md px-3 py-1 text-white transition-colors duration-300 hover:bg-gray-200 hover:text-black"
-                href="/">home</a
-            >
-            <a
-                class="mx-2 rounded-md px-3 py-1 text-white transition-colors duration-300 hover:bg-gray-200 hover:text-black"
-                href="/what-i-do">What I Do</a
-            >
-
-            <a
-                class="mx-2 rounded-md px-3 py-1 text-white transition-colors duration-300 hover:bg-gray-200 hover:text-black"
-                href="/projects">projects</a
-            >
-            <a
-                class="mx-2 rounded-md px-3 py-1 text-white transition-colors duration-300 hover:bg-gray-200 hover:text-black"
-                href="/skills">skills</a
-            >
-            <a
-                class="mx-2 rounded-md px-3 py-1 text-white transition-colors duration-300 hover:bg-gray-200 hover:text-black"
-                href="/experience">experience</a
-            >
-            <a
-                class="mx-2 rounded-md px-3 py-1 text-white transition-colors duration-300 hover:bg-gray-200 hover:text-black"
-                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: 300ms 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);
-        width: 100vw;
-        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>