diff --git a/.gitignore b/.gitignore index 97e61955..1437c53f 100644 --- a/.gitignore +++ b/.gitignore @@ -32,6 +32,3 @@ yarn-error.log* # vercel .vercel - -# autogenerated css module typings -*.module.scss.d.ts \ No newline at end of file diff --git a/pages/_app.tsx b/pages/_app.tsx index bb8d5f88..e940a065 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -8,7 +8,6 @@ import "src/components/BoardGrid/styles.scss"; import "src/components/Button/styles.scss"; import "src/components/CommunitiesGrid/styles.scss"; import "src/components/Footer/styles.scss"; -import "src/components/NavigationBar/styles.scss"; import "src/components/ScrollDownArrow/styles.scss"; import "src/components/Statistic/styles.scss"; // section css imports diff --git a/src/components/Button/styles.scss b/src/components/Button/styles.scss index 0fffacc3..1cf32561 100644 --- a/src/components/Button/styles.scss +++ b/src/components/Button/styles.scss @@ -25,5 +25,5 @@ .button:hover { opacity: 0.85; transform: translatey(-1px); - transition: 200ms; + transition: 0.2s; } diff --git a/src/components/Footer/styles.scss b/src/components/Footer/styles.scss index 3ccfddfd..862e77ce 100644 --- a/src/components/Footer/styles.scss +++ b/src/components/Footer/styles.scss @@ -123,7 +123,7 @@ cursor: pointer; color: $black; background-color: $hover-blue; - transition-duration: 200ms; + transition-duration: 0.2s; } } .vercel-btn { diff --git a/src/components/NavigationBar/Navbar.module.scss b/src/components/NavigationBar/Navbar.module.scss new file mode 100644 index 00000000..f8e11fc8 --- /dev/null +++ b/src/components/NavigationBar/Navbar.module.scss @@ -0,0 +1,181 @@ +@use "src/styles/colors" as colors; + +.navbarWrapper { + position: fixed; + top: 0; + width: 100%; + font-weight: bold; + z-index: 10; + white-space: nowrap; + + // container for fixed navbar (desktop and mobile) + .navbar { + background-color: colors.$white; + z-index: 20; + font-size: 18px; + width: 100%; + + height: 78px; + display: flex; + justify-content: space-between; + align-items: center; + + // left side of navbar is just the acm logo + .left { + height: 78px; + padding-top: 9px; + padding-bottom: 9px; + margin-left: 32px; + a { + display: flex; + flex-direction: row; + align-items: center; + text-decoration: none; + > img { + height: 60px; + margin: 0; + } + > p { + font-size: 16px; + color: colors.$black; + margin-left: 4px; + margin-bottom: 2px; + } + } + } + + // navbar right side contains all navlinks on desktop + .right { + display: flex; + flex-flow: row nowrap; + justify-content: center; + align-items: center; + + .navItem { + display: flex; + align-items: center; + text-decoration: none; + color: colors.$black; + margin-right: 32px; + } + + .loginButton { + height: 100%; + align-self: center; + + display: flex; + justify-content: center; + align-items: center; + text-decoration: none; + + height: 35px; + width: 150px; + + color: colors.$white; + background-color: colors.$black; + border-radius: 0.5em; + margin-right: 32px; + + &:hover { + opacity: 0.85; + transition: 0.3s; + } + } + } + + // toggle button for mobile menu is only visible on mobile, otherwise hidden + .toggleIcon { + position: relative; + width: 40px; + height: 20px; + margin: 0 30px; + padding: 0; + background-color: colors.$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; + height: 5px; + border-radius: 2px; + background-color: colors.$black; + position: absolute; + top: 1.5px; + transition: 0.3s ease-in-out all; + + &.open { + transform: rotate(45deg); + top: 5px; + right: 0; + } + } + + .bar2 { + width: 23px; + height: 5px; + border-radius: 2px; + background-color: colors.$black; + position: absolute; + right: 0; + bottom: 1.5px; + transition: 0.3s ease-in-out all; + + &.open { + transform: rotate(-45deg); + width: 40px; + top: 5px; + right: 0; + } + } + } + } + + // menu div for links only on mobile version + .mobileNav { + width: 100vw; + background-color: colors.$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: -15rem; + &.open { + margin-top: 0; + } + .navItem { + width: 100%; + text-align: center; + color: colors.$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 { + width: 100vw; + height: 0.4em; + bottom: -0.4em; + background: linear-gradient( + 270deg, + colors.$red 0%, + colors.$orange 18.75%, + colors.$green 36.98%, + colors.$turquoise 55.73%, + colors.$blue 75%, + colors.$purple 100% + ); + } +} + +// we use this class to either hide the navlinks or mobile menu toggle based on viewport width +.hidden { + display: none; +} diff --git a/src/components/NavigationBar/Navbar.module.scss.d.ts b/src/components/NavigationBar/Navbar.module.scss.d.ts new file mode 100644 index 00000000..0841fa1f --- /dev/null +++ b/src/components/NavigationBar/Navbar.module.scss.d.ts @@ -0,0 +1,23 @@ +// AUTOGENERATED FILE -- DO NOT EDIT DIRECTLY + +declare namespace NavbarModuleScssNamespace { + export interface INavbarModuleScss { + bar1: string; + bar2: string; + hidden: string; + left: string; + loginButton: string; + mobileNav: string; + navItem: string; + navbar: string; + navbarWrapper: string; + open: string; + rainbow: string; + right: string; + toggleIcon: string; + } +} + +declare const NavbarModuleScssModule: NavbarModuleScssNamespace.INavbarModuleScss; + +export = NavbarModuleScssModule; diff --git a/src/components/NavigationBar/index.tsx b/src/components/NavigationBar/index.tsx index f2b1e828..bc5de68b 100644 --- a/src/components/NavigationBar/index.tsx +++ b/src/components/NavigationBar/index.tsx @@ -1,99 +1,78 @@ import Link from "next/link"; -import Image from "next/image"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import ACMLogo from "public/assets/ACMWhiteLogo.png"; -import CloseMenuButton from "public/assets/closemenubutton.svg"; -import MenuButtonIcon from "public/assets/menubutton.svg"; +import s from "src/components/NavigationBar/Navbar.module.scss"; +import { Size, useWindowSize } from "src/utils"; const navLinks = [ - { to: "/sponsor", text: "Sponsor" }, - { to: "/communities", text: "Communities" }, { to: "/about", text: "About Us" }, + { to: "/communities", text: "Communities" }, + { to: "/sponsor", text: "Sponsor" }, + { to: "#contact", text: "Contact" }, ]; const NavigationBar: React.FC = () => { - const [menuState, setMenuState] = useState(false); + const size: Size = useWindowSize(); + + const [menuOpen, setMenuOpen] = useState(false); + const [mobile, setMobile] = useState(false); + const toggleMenu = () => setMenuOpen(!menuOpen); + + // Switch to mobile less than 920px + useEffect(() => { + setMobile(size.width < 920); + }, [size]); - const toggleMenu = () => setMenuState(!menuState); + // If they go back to desktop size, don't keep the menu open + useEffect(() => { + if (!mobile) setMenuOpen(false); + }, [mobile]); return ( -
at UCSD
- - -at UCSD
+ + +at UCSD
- - - -