add mobile support
This commit is contained in:
chark1es
parent
2b964ce4b9
commit
76ca138982
1 changed files with 139 additions and 29 deletions
|
|
@ -5,36 +5,146 @@ import pages from "../data/pages.json";
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<div
|
<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 justify-between items-center mx-6">
|
||||||
<div class="flex min-h-[1rem] max-h-[3rem]">
|
<div class="flex min-h-[1rem] max-h-[3rem]">
|
||||||
<Image
|
<Image
|
||||||
src={whiteLogoHorizontal}
|
src={whiteLogoHorizontal}
|
||||||
alt="IEEE UCSD Logo"
|
alt="IEEE UCSD Logo"
|
||||||
width={300}
|
width={300}
|
||||||
height={300}
|
height={300}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex gap-6">
|
<!-- Desktop Navigation -->
|
||||||
{
|
<div class="hidden xl:flex gap-6">
|
||||||
pages.map((page) => (
|
{
|
||||||
<a
|
pages.map((page) => (
|
||||||
href={page.path}
|
<a
|
||||||
class={`uppercase border-2 px-4 py-2 rounded-[3rem] transition-colors duration-200
|
href={page.path}
|
||||||
${
|
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]"
|
page.name === "Online Store"
|
||||||
: "text-white border-white hover:text-gray-300"
|
? "bg-[#f3c135] text-black border-[#f3c135] hover:bg-[#dba923] hover:border-[#dba923]"
|
||||||
}`}
|
: "text-white border-white hover:text-gray-300"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{page.name}
|
||||||
|
</a>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</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"
|
||||||
>
|
>
|
||||||
{page.name}
|
<!-- Hamburger Icon -->
|
||||||
</a>
|
<svg
|
||||||
))
|
class="w-6 h-6 menu-icon"
|
||||||
}
|
fill="none"
|
||||||
</div>
|
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>
|
||||||
</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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue