From 2184a7ca9f1b876728f50ec9defd9427a737331f Mon Sep 17 00:00:00 2001
From: liyunze <50455574+liyunze-coding@users.noreply.github.com>
Date: Thu, 14 Mar 2024 15:42:35 +0800
Subject: [PATCH] updated navbar

---
 src/components/sections/NavBar.astro | 460 +++++++++++++--------------
 1 file changed, 230 insertions(+), 230 deletions(-)

diff --git a/src/components/sections/NavBar.astro b/src/components/sections/NavBar.astro
index 435564a..d2e4068 100644
--- a/src/components/sections/NavBar.astro
+++ b/src/components/sections/NavBar.astro
@@ -1,264 +1,264 @@
 <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
-            >
+	<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-[#202020]/80 backdrop-blur"
+		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>
+			<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
-        );
-    }
+	: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);
+	.hamburger-menu {
+		--x-width: calc(var(--hamburger-height) * 1.41421356237);
 
-        display: none;
+		display: none;
 
-        translate: 0 -20px;
-        flex-direction: column;
+		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);
+		gap: var(--hamburger-gap);
+		top: var(--hamburger-margin);
+		right: var(--hamburger-margin);
+		z-index: 30;
+		cursor: pointer;
+		background: var(--foreground);
 
-        padding: 0.5rem;
+		padding: 0.5rem;
 
-        rotate: 180deg;
+		rotate: 180deg;
 
-        transition: all var(--animation-timing);
-    }
+		transition: all var(--animation-timing);
+	}
 
-    .hamburger-menu.active {
-        padding-right: 0;
-    }
+	.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: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,
+	.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 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 .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 .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;
-    }
+	.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;
-    }
+	.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;
-        }
-    }
+	@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 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 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 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");
-    };
+	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();
-        });
-    });
+	// 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";
-    }
+	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();
-    // 	}
-    // });
+	// 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 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 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();
-        }
-    });
+	// if checked, translate the sidebar
+	checkbox.addEventListener("change", () => {
+		if (checkbox.checked) {
+			openSideBar();
+		} else {
+			closeSideBar();
+		}
+	});
 </script>