Fixed navbar issues
This commit is contained in:
chark1es
parent
1a44c0fa0a
commit
43fb2f37d8
4 changed files with 157 additions and 160 deletions
|
|
@ -4,146 +4,140 @@ import whiteLogoHorizontal from "../../images/logos/white_logo_horizontal.svg";
|
|||
import pages from "../../data/pages.json";
|
||||
---
|
||||
|
||||
<div class="md:w-full w-fit fixed z-10">
|
||||
<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]"
|
||||
>
|
||||
<a href="/" class="hover:opacity-60 duration-300 hidden md:flex">
|
||||
<Image
|
||||
class="w-[15vw]"
|
||||
src={whiteLogoHorizontal}
|
||||
alt="IEEE UCSD Logo"
|
||||
/>
|
||||
</a>
|
||||
<div class="w-full">
|
||||
<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]"
|
||||
>
|
||||
<a href="/" class="hover:opacity-60 duration-300 hidden md:flex">
|
||||
<Image class="w-[15vw]" src={whiteLogoHorizontal} alt="IEEE UCSD Logo" />
|
||||
</a>
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<div class="hidden md:flex md:w-[55%] md:justify-between">
|
||||
{
|
||||
pages.map((page) => (
|
||||
<a
|
||||
href={page.path}
|
||||
class={`uppercase rounded-full duration-300 px-[1.5vw] py-[0.2vw] text-[1.2vw] text-nowrap
|
||||
<!-- Desktop Navigation -->
|
||||
<div class="hidden md:flex md:w-[55%] md:justify-between">
|
||||
{
|
||||
pages.map((page) => (
|
||||
<a
|
||||
href={page.path}
|
||||
class={`uppercase rounded-full duration-300 px-[1.5vw] py-[0.2vw] text-[1.2vw] text-nowrap
|
||||
${
|
||||
page.name === "Online Store"
|
||||
? "bg-ieee-yellow text-black hover:opacity-70"
|
||||
: "text-white border-white hover:opacity-50 border-[0.1vw] font-light"
|
||||
page.name === "Online Store"
|
||||
? "bg-ieee-yellow text-black hover:opacity-70"
|
||||
: "text-white border-white hover:opacity-50 border-[0.1vw] font-light"
|
||||
}`}
|
||||
>
|
||||
{page.name}
|
||||
</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>
|
||||
>
|
||||
{page.name}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</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"
|
||||
<!-- 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"
|
||||
>
|
||||
<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
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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"
|
||||
? "bg-[#f3c135] text-black border-[#f3c135] hover:bg-[#dba923] hover:border-[#dba923]"
|
||||
: "text-white hover:text-gray-300 border-white"
|
||||
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>
|
||||
>
|
||||
{page.name}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#mobile-menu.show {
|
||||
@apply translate-x-0;
|
||||
}
|
||||
#mobile-menu.show {
|
||||
@apply translate-x-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");
|
||||
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";
|
||||
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("show");
|
||||
}, 10);
|
||||
} else {
|
||||
mobileMenu?.classList.remove("show");
|
||||
menuIcon?.classList.remove("hidden");
|
||||
closeIcon?.classList.add("hidden");
|
||||
document.body.style.overflow = "";
|
||||
|
||||
setTimeout(() => {
|
||||
mobileMenu?.classList.add("hidden");
|
||||
}, 100);
|
||||
}
|
||||
setTimeout(() => {
|
||||
mobileMenu?.classList.add("hidden");
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
menuBtn?.addEventListener("click", () => {
|
||||
const isMenuHidden = mobileMenu?.classList.contains("hidden") ?? true;
|
||||
toggleMenu(isMenuHidden);
|
||||
});
|
||||
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);
|
||||
}
|
||||
});
|
||||
// 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>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,24 @@
|
|||
<div class="flex py-[25vw] md:py-[8vw] px-[7vw] items-end w-full">
|
||||
<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">
|
||||
02
|
||||
</p>
|
||||
<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.
|
||||
<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"
|
||||
>
|
||||
02
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -7,9 +7,7 @@ import { RiInstagramFill } from "react-icons/ri";
|
|||
import { MdEmail } from "react-icons/md";
|
||||
---
|
||||
|
||||
<div
|
||||
class="w-full flex justify-between xl:pt-[12vh] lg:pt-[8vh] md:pt-[6vh] pt-[12vw] space-x-2"
|
||||
>
|
||||
<div class="w-full flex justify-between space-x-2">
|
||||
<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]"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -5,29 +5,24 @@ import InView from "../components/core/InView.astro";
|
|||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>Astro Basics</title>
|
||||
</head>
|
||||
<InView />
|
||||
<body class="text-white bg-ieee-black relative flex flex-col items-center min-h-screen justify-between overflow-x-clip">
|
||||
<html lang="en" class="w-full h-full m-0 bg-ieee-black">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>Astro Basics</title>
|
||||
</head>
|
||||
<InView />
|
||||
<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 />
|
||||
<main class="w-[95%]">
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</header>
|
||||
<main class="w-[95%] mx-auto">
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue