From 43fb2f37d8b7687fe27f33c71b4d54be8ea60d73 Mon Sep 17 00:00:00 2001
From: chark1es <charles15851@gmail.com>
Date: Mon, 27 Jan 2025 10:21:53 -0800
Subject: [PATCH] Fixed navbar issues

---
 src/components/core/Navbar.astro       | 236 ++++++++++++-------------
 src/components/main_page/Divider.astro |  34 ++--
 src/components/main_page/Landing.astro |   4 +-
 src/layouts/Layout.astro               |  43 ++---
 4 files changed, 157 insertions(+), 160 deletions(-)

diff --git a/src/components/core/Navbar.astro b/src/components/core/Navbar.astro
index d046f60..bb4b76a 100644
--- a/src/components/core/Navbar.astro
+++ b/src/components/core/Navbar.astro
@@ -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>
diff --git a/src/components/main_page/Divider.astro b/src/components/main_page/Divider.astro
index e7f536d..a34a38f 100644
--- a/src/components/main_page/Divider.astro
+++ b/src/components/main_page/Divider.astro
@@ -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>
diff --git a/src/components/main_page/Landing.astro b/src/components/main_page/Landing.astro
index f81894e..3f2a599 100644
--- a/src/components/main_page/Landing.astro
+++ b/src/components/main_page/Landing.astro
@@ -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]"
   >
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 9c9a4ac..61fe175 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -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>