From f49e9e241cbdf28bab5b19d06714ed603870f1f8 Mon Sep 17 00:00:00 2001
From: Calvin Nguyen <can005@ucsd.edu>
Date: Sun, 24 Sep 2023 23:59:14 -0700
Subject: [PATCH] Mobile Fixes for Proj Website

- Added Mobile layout for Navbar that allows you to pick from a menu
-  clicking the proj logo goes to the home page now
- flex columns for the hero pages now
---
 src/components/navbar/Navbar.module.scss | 53 +++++++++++++++++-
 src/components/navbar/index.tsx          | 68 ++++++++++++++++--------
 src/sections/Timer/style.module.scss     | 20 +++++--
 3 files changed, 114 insertions(+), 27 deletions(-)

diff --git a/src/components/navbar/Navbar.module.scss b/src/components/navbar/Navbar.module.scss
index e6626df..c0d6db2 100644
--- a/src/components/navbar/Navbar.module.scss
+++ b/src/components/navbar/Navbar.module.scss
@@ -27,6 +27,17 @@
       padding: 16px 30px 16px 30px;
       margin-left: 32px;
       display: flex;
+      flex-flow: row nowrap;
+      
+      .navLinks {
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: flex-start;
+
+        &.hidden {
+          display: none;
+        }
+      }
 
       a {
         display: flex;
@@ -62,7 +73,6 @@
           margin-bottom: 2px;
         }
       }
-      
     }
 
     // navbar right side contains all navlinks on desktop
@@ -109,13 +119,23 @@
 
     // toggle button for mobile menu is only visible on mobile, otherwise hidden
     .toggleIcon {
-      position: relative;
+      // position: relative;
+      // width: 40px;
+      // height: 20px;
+      // margin: 0 30px;
+      // padding: 0;
+      // background-color: vars.$white;
+      position: absolute;
+      top: 30px;
+      right: 0;
       width: 40px;
       height: 20px;
       margin: 0 30px;
       padding: 0;
+      border: none;
       background-color: vars.$white;
 
+
       // the toggle icon is composed of two bars we can separately animate between a hamburger icon and an x icon (default is hamburger, we have .open class we can toggle to rotate into the shape of an x)
       .bar1 {
         width: 40px;
@@ -154,6 +174,35 @@
     }
   }
 
+
+  .mobileNav {
+    width: 100vw;
+    background-color: vars.$white;
+    position: relative;
+    z-index: -1;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+    align-items: center;
+    line-height: 300%;
+    transition: 0.3s ease-in-out;
+    // mobile menu is hidden by positioning under fixed navbar, we open it by sliding it out
+    margin-top: -22rem;
+    &.open {
+      margin-top: 0;
+    }
+    .navItem {
+      width: 100%;
+      text-align: center;
+      color: vars.$black;
+      transition: 0.3s ease-in-out all;
+      text-decoration: underline solid transparent;
+      &:hover {
+        text-decoration: underline solid currentColor;
+      }
+    }
+  }
+
  
   // rainbow bar is always visible below navbar, positioned to be at the bottom of the container even when mobile slides out and height changes
   .rainbow {
diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx
index 8612c88..9707f81 100644
--- a/src/components/navbar/index.tsx
+++ b/src/components/navbar/index.tsx
@@ -3,45 +3,71 @@
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import ProjLogo from "../../../public/assets/proj_logo.png";
-import s from "../navbar/Navbar.module.scss";
+import s from "./Navbar.module.scss";
 import { Size, useWindowSize } from "../../utils/general";
 
+
+const navLinks = [
+  { href: "/#home", label: "Home" },
+  { href: "/#apply", label: "Apply" },
+  { href: "/#about", label: "About" },
+  { href: "/#archive", label: "Archive" },
+  { href: "/#gallery", label: "Gallery" },
+];
+
 const NavigationBar: React.FC = () => {
   const size: Size = useWindowSize();
 
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [mobile, setMobile] = useState(false);
+  const toggleMenu = () => setMenuOpen(!menuOpen);
+
+  useEffect(() => {
+    size && size.width && setMobile(size.width <= 960);
+  }, [size]);
+
+  useEffect(() => {
+    if (!mobile) setMenuOpen(false);
+  }, [mobile]);
+
   return (
     <div className={s.navbarWrapper}>
       <div className={s.navbar}>
         {/* Navbar ACM Logo */}
-        <div className={s.left}>
-            <a href="https://acmucsd.com/">
+        <div className={`${s.left}`}>
+            <Link href={"/"}>
               <img src={ProjLogo.src} alt="ACM Logo" />
               <p>ACM Projects</p>
-            </a>
+            </Link>
             <div className={s.divider}>
               <span>|</span>
             </div>
-            <Link href={"/#home"}>
-              <p>Home</p>
-            </Link>
-
-            <Link href={"/#apply"}>
-              <p>Apply</p>
-            </Link>
+            <div className={`${s.navLinks} ${mobile && s.hidden}`}>
+              {navLinks.map((link, key) => (
+                <Link key={key} href={link.href}>
+                  <p>{link.label}</p>
+                </Link>
+              ))}
+            </div>
+        </div>
 
-            <Link href={"/#about"}>
-              <p>About</p>
-            </Link>
+            {/* Mobile Navbar Toggle */}
+          <button className={`${s.toggleIcon} ${!mobile && s.hidden}`} onClick={toggleMenu}>
+            <div className={`${s.bar1} ${menuOpen && s.open}`} />
+            <div className={`${s.bar2} ${menuOpen && s.open}`} />
+          </button>   
+        </div>
 
-            <Link href={"/#archive"}>
-              <p>Archive</p>
-            </Link>
-            <Link href={"/#gallery"}>
-              <p>Gallery</p>
+        {/* Mobile Menu Dropdown */}
+        <div className={`${s.mobileNav} ${menuOpen && s.open}`}>
+          {navLinks.map((link, key) => (
+            <Link key={key} href={link.href}>
+              <p className={`${s.navItem}`} onClick={() => setMenuOpen(false)}>
+                {link.label}
+              </p>
             </Link>
+          ))}
         </div>
-      </div>
-
       {/* Bottom Rainbow */}
       <div className={s.rainbow} />
     </div>
diff --git a/src/sections/Timer/style.module.scss b/src/sections/Timer/style.module.scss
index 9bee4fe..a369d56 100644
--- a/src/sections/Timer/style.module.scss
+++ b/src/sections/Timer/style.module.scss
@@ -6,16 +6,15 @@
   font-family: 'DM Sans';
   font-size: 22px;
 
-
   &__timer {
     padding: 0 !important;
     margin-top: 85px;
-    background-color: v.$blue;
     justify-content: center;
     align-items: center;
     text-align: center;
     display:flex;
     height: 400px;
+    background-color: v.$blue !important;
 
     &__header {
       width: 100% !important;
@@ -26,11 +25,19 @@
       h1 {
         font-size: 52px;
         font-weight: 700;
+
+        @media only screen and (max-width: 620px) {
+          font-size: 40px;
+        }
       }
 
       p {
         font-size: 41px;
         font-weight: 300;
+
+        @media only screen and (max-width: 620px) {
+          font-size: 32px;
+        }
       }
     }
 
@@ -74,13 +81,12 @@
     }
 
     @media only screen and (max-width: 500px) {
-      margin: 40px 0;
+      margin: 80px 0;
 
       .home__communities__grid {
         padding: 0;
       }
     }
- 
   }
 }
 
@@ -114,4 +120,10 @@
       margin: 0px auto;
     }
   }
+
+  @media only screen and (max-width: 800px) {
+    flex-direction: column;
+    align-items: center;
+    justify-items: flex-start
+  }
 }