Webmaster/ieeeucsd-org
3
1
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

add mobile support

Browse source
This commit is contained in:
chark1es 2024-12-21 02:44:20 -08:00
parent 2b964ce4b9
commit 76ca138982
1 changed files with 139 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

116
src/components/Navbar.astro
View file

@ -6,7 +6,7 @@ import pages from "../data/pages.json";
<div class="flex items-center">
<div
class="flex flex-col border-white-500 border-2 bg-ieee_navigation_bg w-[98%] h-full mt-3 mx-auto rounded-[4rem] py-3"
class="flex flex-col border-white-500 shadow-md shadow-ieee_blue bg-nav_bg w-[98%] h-full mt-3 mx-auto rounded-[4rem] py-3"
>
<div class="flex justify-between items-center mx-6">
<div class="flex min-h-[1rem] max-h-[3rem]">
@ -18,12 +18,13 @@ import pages from "../data/pages.json";
/>
</div>
<div class="flex gap-6">
<!-- Desktop Navigation -->
<div class="hidden xl:flex gap-6">
{
pages.map((page) => (
<a
href={page.path}
class={`uppercase border-2 px-4 py-2 rounded-[3rem] transition-colors duration-200
class={`uppercase font-bold text-xl px-2 py-2 rounded-[3rem] transition-colors duration-200
${
page.name === "Online Store"
? "bg-[#f3c135] text-black border-[#f3c135] hover:bg-[#dba923] hover:border-[#dba923]"
@ -35,6 +36,115 @@ import pages from "../data/pages.json";
))
}
</div>
<!-- Mobile Hamburger/Close Button -->
<button
id="menu-btn"
class="xl:hidden text-white p-2 focus:outline-none relative z-[60] scale-150"
aria-label="Toggle menu"
>
<!-- Hamburger Icon -->
<svg
class="w-6 h-6 menu-icon"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
<!-- Close Icon -->
<svg
class="w-6 h-6 close-icon hidden"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
<!-- Mobile Menu -->
<div
id="mobile-menu"
class="fixed inset-0 bg-nav_bg bg-opacity-95 z-[51] hidden xl:hidden transition-transform duration-300 transform translate-x-full"
>
<div class="flex flex-col items-center justify-center h-full space-y-6">
{
pages.map((page) => (
<a
href={page.path}
class={`block py-2 px-8 text-center rounded-[3rem] transition-colors duration-200 uppercase font-bold text-xl
${
page.name === "Online Store"
? "bg-[#f3c135] text-black border-[#f3c135] hover:bg-[#dba923] hover:border-[#dba923]"
: "text-white hover:text-gray-300 border-white"
}`}
>
{page.name}
</a>
))
}
</div>
</div>
</div>
<style>
#mobile-menu.show {
transform: translateX(0);
}
</style>
<script>
const menuBtn = document.getElementById("menu-btn");
const mobileMenu = document.getElementById("mobile-menu");
const menuIcon = document.querySelector(".menu-icon");
const closeIcon = document.querySelector(".close-icon");
function toggleMenu(show: boolean) {
if (show) {
mobileMenu?.classList.remove("hidden");
menuIcon?.classList.add("hidden");
closeIcon?.classList.remove("hidden");
document.body.style.overflow = "hidden";
setTimeout(() => {
mobileMenu?.classList.add("show");
}, 10);
} else {
mobileMenu?.classList.remove("show");
menuIcon?.classList.remove("hidden");
closeIcon?.classList.add("hidden");
document.body.style.overflow = "";
setTimeout(() => {
mobileMenu?.classList.add("hidden");
}, 300);
}
}
menuBtn?.addEventListener("click", () => {
const isMenuHidden = mobileMenu?.classList.contains("hidden") ?? true;
toggleMenu(isMenuHidden);
});
// Close menu when clicking outside
document.addEventListener("click", (e) => {
if (
!mobileMenu?.contains(e.target as Node) &&
!menuBtn?.contains(e.target as Node) &&
!mobileMenu?.classList.contains("hidden")
) {
toggleMenu(false);
}
});
</script>