encie22/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor and simplify navbar, now behaves more consistenly

Browse Source
This commit is contained in:
Nathan Cummins
2025-08-13 09:36:51 +09:30
parent 69792d4faf
commit b2c89275ec
1 changed files with 35 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
src/components/Navbar.astro
View File

@@ -13,18 +13,20 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
---
<nav
class="text-primary font-header fixed top-0 right-0 left-0 z-50 uppercase"
class="font-header group/nav fixed top-0 right-0 left-0 z-50 uppercase"
aria-label="Primary"
transition:name="nav"
transition:animate="none"
id="nav"
data-mobile-menu="hidden"
data-transparency={navbarDisplay}
>
<div
id="navbar-lg"
class:list={[
"mx-auto border-b-1 border-solid px-4 shadow-lg transition",
navbarDisplay == "transparent"
? "should-be-transparent border-gray-500 bg-transparent"
: "border-white bg-white dark:border-gray-700 dark:bg-gray-700 dark:text-white"
"mx-auto border-0 border-b-1 border-solid border-b-white bg-white px-4 shadow-lg transition group-data-[mobile-menu=hidden]/nav:group-data-[transparency=transparent]/nav:border-b-gray-500 group-data-[mobile-menu=hidden]/nav:group-data-[transparency=transparent]/nav:bg-transparent dark:border-b-gray-700 dark:bg-gray-700",
"text-gray-500 dark:text-white",
"group-data-[mobile-menu=hidden]/nav:group-data-[transparency=transparent]/nav:!text-gray-500"
]}
>
<div class="flex h-12 items-center justify-between">
@@ -39,12 +41,8 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
<!-- Desktop Menu -->
<div class="hidden space-x-6 font-medium md:flex">
<div>
<ThemeSwitcher
class="inline-block"
selectClass=""
optionClass="text-primary bg-white uppercase"
/>
<div class="text-primary">
<ThemeSwitcher />
</div>
{
links.map((link) => (
@@ -52,11 +50,7 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
href={link.href}
class:list={[
"font-header font-medium uppercase transition hover:text-gray-300",
pathName === link.href
? "text-primary navbar-desktop-link-current"
: navbarDisplay === "transparent"
? "navbar-desktop-link text-gray-500"
: "navbar-desktop-link text-gray-500 dark:text-white"
pathName === link.href ? "text-primary" : ""
]}
aria-current={pathName === link.href ? "page" : undefined}
>
@@ -68,10 +62,7 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
<!-- Mobile Menu Button -->
<div class="md:hidden">
<button
id="menu-toggle"
class="text-2xl text-gray-500 focus:outline-none dark:text-white"
>
<button id="menu-toggle" class="text-2xl focus:outline-none">
☰
</button>
</div>
@@ -81,7 +72,11 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
<!-- Mobile Menu -->
<div
id="mobile-menu"
class="hidden space-y-2 bg-white px-4 pt-4 pb-4 font-medium shadow-lg md:hidden dark:bg-gray-600 dark:text-white"
class:list={[
"hidden space-y-2 bg-white px-4 pt-4 pb-4 font-medium shadow-lg transition group-data-[mobile-menu=visible]/nav:block md:hidden group-data-[mobile-menu=visible]/nav:md:hidden dark:bg-gray-600 starting:opacity-0",
"text-gray-500 dark:text-white",
"group-data-[mobile-menu=hidden]/nav:group-data-[transparency=transparent]/nav:!text-gray-500"
]}
>
{
links.map((link) => (
@@ -89,9 +84,7 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
href={link.href}
class:list={[
"block transition hover:text-gray-300",
pathName === link.href
? "text-primary"
: "text-gray-500 dark:text-white"
pathName === link.href ? "text-primary" : ""
]}
aria-current={pathName === link.href ? "page" : undefined}
>
@@ -99,12 +92,8 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
</a>
))
}
<div>
<ThemeSwitcher
class="inline-block"
selectClass=""
optionClass="text-primary bg-white uppercase"
/>
<div class="text-primary">
<ThemeSwitcher />
</div>
</div>
</nav>
@@ -123,104 +112,28 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
</script>
<script>
let menuIsShowing = false;
const toggleMenu = () => {
const toggle = document.getElementById("menu-toggle")!;
const mobileMenu = document.getElementById("mobile-menu")!;
const navbar = document.getElementById("navbar-lg")!;
toggle.addEventListener("click", () => {
mobileMenu.classList.toggle("hidden");
menuIsShowing = !mobileMenu.classList.contains("hidden");
const shouldBeTransparent = navbar.classList.contains(
"should-be-transparent"
);
if (shouldBeTransparent) {
if (menuIsShowing) {
navbar.classList.remove("bg-transparent", "border-gray-500");
navbar.classList.add(
"bg-white",
"border-white",
"dark:bg-gray-700",
"dark:border-gray-700",
"dark:text-white"
);
}
}
checkScroll();
});
};
let nav: HTMLElement;
let toggle: HTMLElement;
const checkScroll = () => {
const navbar = document.getElementById("navbar-lg")!;
const navbarDesktopLinks = document.getElementsByClassName(
"navbar-desktop-link"
nav.setAttribute(
"data-transparency",
window.scrollY === 0 && window.navbarDisplay === "transparent"
? "transparent"
: "normal"
);
if (menuIsShowing) {
navbar.classList.remove(
"bg-transparent",
"border-gray-500",
"should-be-transparent"
);
navbar.classList.add(
"bg-white",
"border-white",
"dark:bg-gray-700",
"dark:border-gray-700",
"dark:text-white"
);
return;
}
if (window.scrollY === 0 && window.navbarDisplay === "transparent") {
navbar.classList.remove(
"bg-white",
"border-white",
"dark:bg-gray-700",
"dark:border-gray-700",
"dark:text-white"
);
navbar.classList.add(
"bg-transparent",
"border-gray-500",
"should-be-transparent"
);
for (let i = 0; i < navbarDesktopLinks.length; i++) {
navbarDesktopLinks[i].classList.remove("dark:text-white");
}
} else {
navbar.classList.remove(
"bg-transparent",
"border-gray-500",
"should-be-transparent"
);
navbar.classList.add(
"bg-white",
"border-white",
"dark:bg-gray-700",
"dark:border-gray-700",
"dark:text-white"
);
for (let i = 0; i < navbarDesktopLinks.length; i++) {
navbarDesktopLinks[i].classList.add("dark:text-white");
}
}
};
document.addEventListener("astro:page-load", () => {
// Sync menuIsShowing with actual menu state on load
const mobileMenu = document.getElementById("mobile-menu");
if (mobileMenu) {
menuIsShowing = !mobileMenu.classList.contains("hidden");
}
toggleMenu();
nav = document.getElementById("nav")!;
toggle = document.getElementById("menu-toggle")!;
toggle.addEventListener("click", () => {
const visible = nav.getAttribute("data-mobile-menu") === "visible";
nav.setAttribute("data-mobile-menu", visible ? "hidden" : "visible");
checkScroll();
});
checkScroll();
});