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

Fixed navbar issues

Browse source
This commit is contained in:
chark1es 2025-01-27 10:21:53 -08:00
parent 1a44c0fa0a
commit 43fb2f37d8
4 changed files with 157 additions and 160 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

236
src/components/core/Navbar.astro
View file

@ -4,146 +4,140 @@ import whiteLogoHorizontal from "../../images/logos/white_logo_horizontal.svg";
import pages from "../../data/pages.json"; import pages from "../../data/pages.json";
--- ---
<div class="md:w-full w-fit fixed z-10"> <div class="w-full">
<div <div
class="flex justify-between items-center bg-black my-[1%] mx-[2.5%] py-[0.5%] px-[1%] md:rounded-full md:border-[0.1vw]" class="flex justify-between items-center bg-black my-[1%] mx-[2.5%] py-[0.5%] px-[1%] md:rounded-full md:border-[0.1vw]"
> >
<a href="/" class="hover:opacity-60 duration-300 hidden md:flex"> <a href="/" class="hover:opacity-60 duration-300 hidden md:flex">
<Image <Image class="w-[15vw]" src={whiteLogoHorizontal} alt="IEEE UCSD Logo" />
class="w-[15vw]" </a>
src={whiteLogoHorizontal}
alt="IEEE UCSD Logo"
/>
</a>
<!-- Desktop Navigation --> <!-- Desktop Navigation -->
<div class="hidden md:flex md:w-[55%] md:justify-between"> <div class="hidden md:flex md:w-[55%] md:justify-between">
{ {
pages.map((page) => ( pages.map((page) => (
<a <a
href={page.path} href={page.path}
class={`uppercase rounded-full duration-300 px-[1.5vw] py-[0.2vw] text-[1.2vw] text-nowrap class={`uppercase rounded-full duration-300 px-[1.5vw] py-[0.2vw] text-[1.2vw] text-nowrap
${ ${
page.name === "Online Store" page.name === "Online Store"
? "bg-ieee-yellow text-black hover:opacity-70" ? "bg-ieee-yellow text-black hover:opacity-70"
: "text-white border-white hover:opacity-50 border-[0.1vw] font-light" : "text-white border-white hover:opacity-50 border-[0.1vw] font-light"
}`} }`}
> >
{page.name} {page.name}
</a> </a>
)) ))
} }
</div>
<!-- Mobile Hamburger/Close Button -->
<button
id="menu-btn"
class="md:hidden text-white p-2 flex justify-center items-center 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 --> <!-- Mobile Hamburger/Close Button -->
<div <button
id="mobile-menu" id="menu-btn"
class="fixed inset-0 z-[51] hidden xl:hidden motion-safe:transition-transform motion-safe:duration-300 translate-x-full" class="md:hidden text-white p-2 flex justify-center items-center focus:outline-none relative z-[60] scale-150"
aria-label="Toggle menu"
> >
<div <!-- Hamburger Icon -->
class="flex flex-col items-center h-[70vh] justify-evenly bg-black" <svg
> class="w-6 h-6 menu-icon"
{ fill="none"
pages.map((page) => ( stroke="currentColor"
<a viewBox="0 0 24 24"
href={page.path} >
class={`block py-2 px-8 text-center rounded-[3rem] motion-safe:transition-colors motion-safe:duration-200 uppercase font-bold text-xl <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>
<!-- Mobile Menu -->
<div
id="mobile-menu"
class="fixed inset-0 z-[51] hidden xl:hidden motion-safe:transition-transform motion-safe:duration-300 translate-x-full"
>
<div class="flex flex-col items-center h-[70vh] justify-evenly bg-black">
{
pages.map((page) => (
<a
href={page.path}
class={`block py-2 px-8 text-center rounded-[3rem] motion-safe:transition-colors motion-safe:duration-200 uppercase font-bold text-xl
${ ${
page.name === "Online Store" page.name === "Online Store"
? "bg-[#f3c135] text-black border-[#f3c135] hover:bg-[#dba923] hover:border-[#dba923]" ? "bg-[#f3c135] text-black border-[#f3c135] hover:bg-[#dba923] hover:border-[#dba923]"
: "text-white hover:text-gray-300 border-white" : "text-white hover:text-gray-300 border-white"
}`} }`}
> >
{page.name} {page.name}
</a> </a>
)) ))
} }
</div>
</div> </div>
</div>
</div> </div>
<style> <style>
#mobile-menu.show { #mobile-menu.show {
@apply translate-x-0; @apply translate-x-0;
} }
</style> </style>
<script> <script>
const menuBtn = document.getElementById("menu-btn"); const menuBtn = document.getElementById("menu-btn");
const mobileMenu = document.getElementById("mobile-menu"); const mobileMenu = document.getElementById("mobile-menu");
const menuIcon = document.querySelector(".menu-icon"); const menuIcon = document.querySelector(".menu-icon");
const closeIcon = document.querySelector(".close-icon"); const closeIcon = document.querySelector(".close-icon");
function toggleMenu(show: boolean) { function toggleMenu(show: boolean) {
if (show) { if (show) {
mobileMenu?.classList.remove("hidden"); mobileMenu?.classList.remove("hidden");
menuIcon?.classList.add("hidden"); menuIcon?.classList.add("hidden");
closeIcon?.classList.remove("hidden"); closeIcon?.classList.remove("hidden");
document.body.style.overflow = "hidden"; document.body.style.overflow = "hidden";
setTimeout(() => { setTimeout(() => {
mobileMenu?.classList.add("show"); mobileMenu?.classList.add("show");
}, 10); }, 10);
} else { } else {
mobileMenu?.classList.remove("show"); mobileMenu?.classList.remove("show");
menuIcon?.classList.remove("hidden"); menuIcon?.classList.remove("hidden");
closeIcon?.classList.add("hidden"); closeIcon?.classList.add("hidden");
document.body.style.overflow = ""; document.body.style.overflow = "";
setTimeout(() => { setTimeout(() => {
mobileMenu?.classList.add("hidden"); mobileMenu?.classList.add("hidden");
}, 100); }, 100);
}
} }
}
menuBtn?.addEventListener("click", () => { menuBtn?.addEventListener("click", () => {
const isMenuHidden = mobileMenu?.classList.contains("hidden") ?? true; const isMenuHidden = mobileMenu?.classList.contains("hidden") ?? true;
toggleMenu(isMenuHidden); toggleMenu(isMenuHidden);
}); });
// Close menu when clicking outside // Close menu when clicking outside
document.addEventListener("click", (e) => { document.addEventListener("click", (e) => {
if ( if (
!mobileMenu?.contains(e.target as Node) && !mobileMenu?.contains(e.target as Node) &&
!menuBtn?.contains(e.target as Node) && !menuBtn?.contains(e.target as Node) &&
!mobileMenu?.classList.contains("hidden") !mobileMenu?.classList.contains("hidden")
) { ) {
toggleMenu(false); toggleMenu(false);
} }
}); });
</script> </script>

34
src/components/main_page/Divider.astro
View file

@ -1,14 +1,24 @@
<div class="flex py-[25vw] md:py-[8vw] px-[7vw] items-end w-full"> <div class="flex py-[25vw] md:py-[8vw] px-[7vw] items-end w-full">
<div class="w-2/5"> <div class="w-2/5">
<p data-inview class="animate-ease-in-out text-ieee-yellow text-[7vw] md:text-[4.5vw] font-semibold in-view:animate-fade-right"> <p
02 data-inview
</p> class="animate-ease-in-out text-ieee-yellow text-[7vw] md:text-[4.5vw] font-semibold in-view:animate-fade-right"
<p data-inview class="text-white text-[3.5vw] md:text-[2.5vw] font-light in-view:animate-fade-right animate-delay-100"> >
2nd Largest in the US? 02
</p>
</div>
<p data-inview class="animate-ease-in-out text-white text-[2vw] md:text-[1.3vw] in-view:animate-fade-left w-3/5 font-light">
The community of engineers at IEEE @ UCSD has consistently been one of the largest in the country. In 2021 and 2022, we won the 2nd Largest Student Branch Award in the US and we strive to win it again in the coming year.
</p> </p>
</div > <p
data-inview
class="text-white text-[3.5vw] md:text-[2.5vw] font-light in-view:animate-fade-right animate-delay-100"
>
2nd Largest in the US?
</p>
</div>
<p
data-inview
class="animate-ease-in-out text-white text-[2vw] md:text-[1.3vw] in-view:animate-fade-left w-3/5 font-light"
>
The community of engineers at IEEE @ UCSD has consistently been one of the
largest in the country. In 2021 and 2022, we won the 2nd Largest Student
Branch Award in the US and we strive to win it again in the coming year.
</p>
</div>

4
src/components/main_page/Landing.astro
View file

@ -7,9 +7,7 @@ import { RiInstagramFill } from "react-icons/ri";
import { MdEmail } from "react-icons/md"; import { MdEmail } from "react-icons/md";
--- ---
<div <div class="w-full flex justify-between space-x-2">
class="w-full flex justify-between xl:pt-[12vh] lg:pt-[8vh] md:pt-[6vh] pt-[12vw] space-x-2"
>
<div <div
class="md:pt-[5%] pt-[6%] bg-gradient-to-t to-ieee-blue-100/30 p-[5vw] via-ieee-black from-ieee-black md:w-[53%] w-[60%] md:h-[40vw] h-[65vw] border-white/70 border-[0.1vw] rounded-[3vw]" class="md:pt-[5%] pt-[6%] bg-gradient-to-t to-ieee-blue-100/30 p-[5vw] via-ieee-black from-ieee-black md:w-[53%] w-[60%] md:h-[40vw] h-[65vw] border-white/70 border-[0.1vw] rounded-[3vw]"
> >

43
src/layouts/Layout.astro
View file

@ -5,29 +5,24 @@ import InView from "../components/core/InView.astro";
--- ---
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en" class="w-full h-full m-0 bg-ieee-black">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<title>Astro Basics</title> <title>Astro Basics</title>
</head> </head>
<InView /> <InView />
<body class="text-white bg-ieee-black relative flex flex-col items-center min-h-screen justify-between overflow-x-clip"> <body class="w-full h-full m-0 bg-ieee-black">
<div class="text-white min-h-screen">
<header class="sticky top-0 w-full z-[999]">
<Navbar /> <Navbar />
<main class="w-[95%]"> </header>
<slot /> <main class="w-[95%] mx-auto">
</main> <slot />
<Footer /> </main>
</body> <Footer />
</div>
<style> </body>
html,
body {
margin: 0;
width: 100%;
height: 100%;
}
</style>
</html> </html>