From 821d929428b83a9fd38c9502b81d76cad9464b8e Mon Sep 17 00:00:00 2001
From: chark1es <charles15851@gmail.com>
Date: Mon, 27 Jan 2025 10:27:33 -0800
Subject: [PATCH] fix navbar mobile view

---
 src/components/core/Navbar.astro | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/core/Navbar.astro b/src/components/core/Navbar.astro
index bb4b76a..b60eb09 100644
--- a/src/components/core/Navbar.astro
+++ b/src/components/core/Navbar.astro
@@ -8,8 +8,17 @@ import pages from "../../data/pages.json";
   <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 href="/" class="hover:opacity-60 duration-300">
+      <Image
+        class="w-[15vw] md:block hidden"
+        src={whiteLogoHorizontal}
+        alt="IEEE UCSD Logo"
+      />
+      <Image
+        class="w-[40vw] md:hidden block"
+        src={whiteLogoHorizontal}
+        alt="IEEE UCSD Logo"
+      />
     </a>
 
     <!-- Desktop Navigation -->
@@ -71,16 +80,18 @@ import pages from "../../data/pages.json";
     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">
+    <div
+      class="flex flex-col items-center min-h-screen justify-center bg-black py-20 px-4 space-y-8"
+    >
       {
         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
+            class={`block py-4 px-12 text-center rounded-[3rem] motion-safe:transition-colors motion-safe:duration-200 uppercase font-bold text-2xl w-full max-w-md
                             ${
                               page.name === "Online Store"
                                 ? "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 border-2"
                             }`}
           >
             {page.name}