From 377f8ff4605bd7c618752c329d8eccac22084bc4 Mon Sep 17 00:00:00 2001 From: Faris Ashai Date: Sun, 27 Feb 2022 02:43:55 -0800 Subject: [PATCH 01/10] started responsive navbar --- pages/_app.tsx | 2 +- src/components/NavigationBar/index.tsx | 14 +-- src/components/NavigationBar/nav2.tsx | 58 ++++++++++ src/styles/modules/App.module.scss | 143 +++++++++++++++++++++++++ 4 files changed, 204 insertions(+), 13 deletions(-) create mode 100644 src/components/NavigationBar/nav2.tsx create mode 100644 src/styles/modules/App.module.scss diff --git a/pages/_app.tsx b/pages/_app.tsx index bb8d5f88..360bb438 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -17,7 +17,7 @@ import "src/sections/community/styles.scss"; import "src/sections/home/styles.scss"; import "src/sections/sponsorship/styles.scss"; -import NavigationBar from "src/components/NavigationBar"; +import NavigationBar from "src/components/NavigationBar/nav2"; import Footer from "src/components/Footer"; const MyApp = ({ Component, pageProps }) => ( diff --git a/src/components/NavigationBar/index.tsx b/src/components/NavigationBar/index.tsx index f2b1e828..d298d021 100644 --- a/src/components/NavigationBar/index.tsx +++ b/src/components/NavigationBar/index.tsx @@ -23,7 +23,6 @@ const NavigationBar: React.FC = () => {
  • - {/* image breaking the website right now */} ACM Logo

    at UCSD

     @@ -52,12 +51,7 @@ const NavigationBar: React.FC = () => { {menuState ? (
    About Us @@ -83,11 +77,7 @@ const NavigationBar: React.FC = () => {
    diff --git a/src/components/NavigationBar/nav2.tsx b/src/components/NavigationBar/nav2.tsx new file mode 100644 index 00000000..9d252be1 --- /dev/null +++ b/src/components/NavigationBar/nav2.tsx @@ -0,0 +1,58 @@ +import Link from "next/link"; +import { 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/styles/modules/App.module.scss"; + +const navLinks = [ + // { to: "/events", text: "Events" }, + { to: "#contact", text: "Contact" }, + { to: "/sponsor", text: "Sponsor" }, + { to: "/communities", text: "Communities" }, + { to: "/about", text: "About Us" }, +]; + +const NavigationBar: React.FC = () => { + const [menuOpen, setMenuOpen] = useState(false); + const [mobile, setMobile] = useState(true); + const toggleMenu = () => setMenuOpen(!menuOpen); + + return ( +
    +
    + + + ACM Logo +

    at UCSD

    +     + +
    +
    + + + Member Login + +
    + + {/* */} + {/* */} +
    +
    + ); +}; + +export default NavigationBar; diff --git a/src/styles/modules/App.module.scss b/src/styles/modules/App.module.scss new file mode 100644 index 00000000..d09ed463 --- /dev/null +++ b/src/styles/modules/App.module.scss @@ -0,0 +1,143 @@ +.navbar { + position: fixed; + top: 0; + width: 100%; + font-weight: bold; + background-color: #eee; // TODO: temporary background + z-index: 10; + font-size: 18px; + height: 78px; + display: flex; + justify-content: space-between; + align-items: center; + + .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: black; + margin-left: 4px; + white-space: nowrap; + margin-bottom: 2px; + } + } + } + + .right { + display: flex; + flex-flow: row nowrap; + justify-content: center; + align-items: center; + + &.hidden { + display: none; + } + .navItem { + float: right; + display: flex; + align-items: center; + text-decoration: none; + color: black; + margin-right: 32px; + } + + .loginButton { + float: right; + height: 100%; + align-self: center; + + display: flex; + justify-content: center; + align-items: center; + text-decoration: none; + + height: 35px; + width: 150px; + + color: white; + background-color: black; + border-radius: 0.5em; + margin-right: 32px; + + &:hover { + opacity: 0.85; + transition: 200ms; + } + } + } + + .toggleIcon { + position: relative; + width: 40px; + height: 20px; + margin: 0 30px; + padding: 0; + + .bar1 { + width: 40px; + height: 5px; + border-radius: 2px; + background-color: 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: 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; + } + } + + &.hidden { + display: none; + } + } + + .rainbow { + width: 100vw; + height: 0.4em; + position: absolute; + bottom: -0.4em; + background: linear-gradient( + // TODO: use actual colors + 270deg, + red 0%, + orange 18.75%, + green 36.98%, + turquoise 55.73%, + blue 75%, + purple 100% + ); + } +} From 3401ac45842fbdfbcb74d9896fbb470e8ad03d1b Mon Sep 17 00:00:00 2001 From: Faris Ashai Date: Sun, 27 Feb 2022 02:45:11 -0800 Subject: [PATCH 02/10] commit typing --- .gitignore | 3 --- src/styles/modules/App.module.scss.d.ts | 21 +++++++++++++++++++++ 2 files changed, 21 insertions(+), 3 deletions(-) create mode 100644 src/styles/modules/App.module.scss.d.ts 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/src/styles/modules/App.module.scss.d.ts b/src/styles/modules/App.module.scss.d.ts new file mode 100644 index 00000000..cb1065f7 --- /dev/null +++ b/src/styles/modules/App.module.scss.d.ts @@ -0,0 +1,21 @@ +// AUTOGENERATED FILE -- DO NOT EDIT DIRECTLY + +declare namespace AppModuleScssNamespace { + export interface IAppModuleScss { + bar1: string; + bar2: string; + hidden: string; + left: string; + loginButton: string; + navItem: string; + navbar: string; + open: string; + rainbow: string; + right: string; + toggleIcon: string; + } +} + +declare const AppModuleScssModule: AppModuleScssNamespace.IAppModuleScss; + +export = AppModuleScssModule; From 43a7df6342b804b7f1597e0a0430bec84a946b09 Mon Sep 17 00:00:00 2001 From: Faris Ashai Date: Sun, 27 Feb 2022 04:03:53 -0800 Subject: [PATCH 03/10] finish navbar --- pages/_app.tsx | 3 +- src/components/NavigationBar/index.tsx | 120 +++++------- src/components/NavigationBar/nav2.tsx | 58 ------ src/components/NavigationBar/styles.scss | 210 -------------------- src/styles/modules/App.module.scss | 235 +++++++++++++---------- src/styles/modules/App.module.scss.d.ts | 2 + 6 files changed, 188 insertions(+), 440 deletions(-) delete mode 100644 src/components/NavigationBar/nav2.tsx delete mode 100644 src/components/NavigationBar/styles.scss diff --git a/pages/_app.tsx b/pages/_app.tsx index 360bb438..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 @@ -17,7 +16,7 @@ import "src/sections/community/styles.scss"; import "src/sections/home/styles.scss"; import "src/sections/sponsorship/styles.scss"; -import NavigationBar from "src/components/NavigationBar/nav2"; +import NavigationBar from "src/components/NavigationBar"; import Footer from "src/components/Footer"; const MyApp = ({ Component, pageProps }) => ( diff --git a/src/components/NavigationBar/index.tsx b/src/components/NavigationBar/index.tsx index d298d021..c2b0fc58 100644 --- a/src/components/NavigationBar/index.tsx +++ b/src/components/NavigationBar/index.tsx @@ -1,89 +1,75 @@ 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/styles/modules/App.module.scss"; +import { Size, useWindowSize } from "src/utils"; const navLinks = [ + { to: "#contact", text: "Contact" }, { to: "/sponsor", text: "Sponsor" }, { to: "/communities", text: "Communities" }, { to: "/about", text: "About Us" }, ]; const NavigationBar: React.FC = () => { - const [menuState, setMenuState] = useState(false); + const size: Size = useWindowSize(); - const toggleMenu = () => setMenuState(!menuState); + 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]); + + // If they go back to desktop size, don't keep the menu open + useEffect(() => { + if (!mobile) setMenuOpen(false); + }, [mobile]); return ( -
    -
    - + + Member Login + +
    + {/* Mobile Navbar Toggle */} +
    - {menuState ? ( -
    - - - About Us - - - Communities - - - Sponsor - - - Contact + {/* Mobile Menu Dropdown */} +
    + {navLinks.map((link, key) => ( + + {link.text} - Login -
    - ) : ( -
    -
    - - - ACM Logo -

    at UCSD

    -     - - -
    -
    - )} + ))} +
    -
    + {/* Bottom Rainbow */} +
    ); }; diff --git a/src/components/NavigationBar/nav2.tsx b/src/components/NavigationBar/nav2.tsx deleted file mode 100644 index 9d252be1..00000000 --- a/src/components/NavigationBar/nav2.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import Link from "next/link"; -import { 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/styles/modules/App.module.scss"; - -const navLinks = [ - // { to: "/events", text: "Events" }, - { to: "#contact", text: "Contact" }, - { to: "/sponsor", text: "Sponsor" }, - { to: "/communities", text: "Communities" }, - { to: "/about", text: "About Us" }, -]; - -const NavigationBar: React.FC = () => { - const [menuOpen, setMenuOpen] = useState(false); - const [mobile, setMobile] = useState(true); - const toggleMenu = () => setMenuOpen(!menuOpen); - - return ( -
    - -
    - - - Member Login - -
    - - {/* */} - {/* */} -
    -
    - ); -}; - -export default NavigationBar; diff --git a/src/components/NavigationBar/styles.scss b/src/components/NavigationBar/styles.scss deleted file mode 100644 index 2fc2c6ed..00000000 --- a/src/components/NavigationBar/styles.scss +++ /dev/null @@ -1,210 +0,0 @@ -@import "src/styles/colors.scss"; - -.navigation-bar { - height: 78px; - font-size: 18px; - font-weight: bold; - - ul { - text-decoration: none; - margin: 0 !important; - padding: 0 !important; - list-style-type: none; - height: 100%; - } - li { - display: flex; - justify-content: center; - align-items: center; - margin-bottom: 0 !important; - text-decoration: none; - list-style-type: none; - height: 100%; - margin-right: 32px; - } - - &__logo { - float: 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: $black; - margin-left: 4px; - margin-bottom: 2px; - } - } - } - - &__nav-button { - float: right; - display: flex; - align-items: center; - a { - text-decoration: none; - color: $black; - } - } - &__login { - float: right; - height: 100%; - align-self: center; - &:hover { - opacity: 0.85; - transition: 200ms; - } - a { - display: flex; - justify-content: center; - align-items: center; - text-decoration: none; - - height: 35px !important; - width: 150px; - - color: $white !important; - background-color: $black !important; - border-radius: 0.5em; - } - } - - &__nav-button--login { - float: right; - } -} -.fixed-nav { - position: fixed; - top: 0; - width: 100%; - font-weight: bold; - background-color: $white; - z-index: 2; - font-size: 18px; - height: 78px; -} -.rainbow { - width: 100vw; - height: 0.4em; - display: table; - z-index: 3; - background: linear-gradient( - 270deg, - $red 0%, - $orange 18.75%, - $green 36.98%, - $turquoise 55.73%, - $blue 75%, - $purple 100% - ); -} -.navbar-mobile-div { - display: none; -} -// Styling for menu based nav bar - -.mobile-links { - display: none; -} - -@media only screen and (max-width: 900px) { - .navigation-bar { - display: none; - } - .navbar-mobile { - margin: 0px !important; - height: 78px; - a:first-of-type { - img { - margin-bottom: 0px !important; - } - } - } - .navbar-mobile-div { - font-size: 16px; - display: block; - } - - .navbar-mobile > button { - padding: 0px 30px; - float: right; - border: none; - background-color: transparent; - outline: none; - } - - .navbar-mobile > a:first-of-type { - display: flex; - align-items: center; - float: left; - height: 60px; - margin: 9px 32px; - text-decoration: none; - img { - height: 60px; - } - > p { - color: $black; - margin: 0 0 0 4px; - } - } - .icon { - height: 78px; - } - .menuicon { - height: 20px; - width: 40px; - margin: 29px 0; - } - - .mobile-links { - z-index: 2; - display: block; - background-color: $black; - padding-top: 0.5em; - padding-bottom: 0.5em; - a { - font-size: 24px !important; - font-weight: bold; - text-decoration: underline solid transparent; - transition: text-decoration 0.2s ease; - color: $white; - padding: 0.5em; - display: block; - text-align: center; - background-color: $black; - } - a:first-of-type { - margin-top: 0.5em; - } - a:hover { - text-decoration: underline solid Currentcolor; - } - button { - position: absolute; - right: 30px; - top: 28px; - height: 40px !important; - width: 60px !important; - color: $white; - background-color: $black; - cursor: pointer; - border: none; - outline: 0; - font-size: 1.3em; - img { - float: right; - } - } - } -} diff --git a/src/styles/modules/App.module.scss b/src/styles/modules/App.module.scss index d09ed463..9713fb1f 100644 --- a/src/styles/modules/App.module.scss +++ b/src/styles/modules/App.module.scss @@ -1,143 +1,172 @@ -.navbar { +.navbarWrapper { position: fixed; top: 0; width: 100%; font-weight: bold; - background-color: #eee; // TODO: temporary background z-index: 10; - font-size: 18px; - height: 78px; - display: flex; - justify-content: space-between; - align-items: center; + white-space: nowrap; - .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: black; - margin-left: 4px; - white-space: nowrap; - margin-bottom: 2px; - } - } - } + .navbar { + background-color: #fff; + z-index: 20; + font-size: 18px; + width: 100%; - .right { + height: 78px; display: flex; - flex-flow: row nowrap; - justify-content: center; + justify-content: space-between; align-items: center; - &.hidden { - display: none; - } - .navItem { - float: right; - display: flex; - align-items: center; - text-decoration: none; - color: black; - margin-right: 32px; + .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: black; + margin-left: 4px; + margin-bottom: 2px; + } + } } - .loginButton { - float: right; - height: 100%; - align-self: center; - + .right { display: flex; + flex-flow: row nowrap; justify-content: center; align-items: center; - text-decoration: none; - height: 35px; - width: 150px; + &.hidden { + display: none; + } + .navItem { + display: flex; + align-items: center; + text-decoration: none; + color: black; + margin-right: 32px; + } - color: white; - background-color: black; - border-radius: 0.5em; - margin-right: 32px; + .loginButton { + height: 100%; + align-self: center; - &:hover { - opacity: 0.85; - transition: 200ms; - } - } - } + display: flex; + justify-content: center; + align-items: center; + text-decoration: none; - .toggleIcon { - position: relative; - width: 40px; - height: 20px; - margin: 0 30px; - padding: 0; + height: 35px; + width: 150px; - .bar1 { - width: 40px; - height: 5px; - border-radius: 2px; - background-color: black; - position: absolute; - top: 1.5px; - transition: 0.3s ease-in-out all; - - &.open { - transform: rotate(45deg); - top: 5px; - right: 0; + color: white; + background-color: black; + border-radius: 0.5em; + margin-right: 32px; + + &:hover { + opacity: 0.85; + transition: 200ms; + } } } - .bar2 { - width: 23px; - height: 5px; - border-radius: 2px; - background-color: black; - position: absolute; - right: 0; - bottom: 1.5px; - transition: 0.3s ease-in-out all; - - &.open { - transform: rotate(-45deg); + .toggleIcon { + position: relative; + width: 40px; + height: 20px; + margin: 0 30px; + padding: 0; + background-color: white; + .bar1 { width: 40px; - top: 5px; + height: 5px; + border-radius: 2px; + background-color: black; + position: absolute; + top: 1.5px; + transition: 0.2s cubic-bezier(0, 0.1, 0.9, 1) all; + + &.open { + transform: rotate(45deg); + top: 5px; + right: 0; + } + } + + .bar2 { + width: 23px; + height: 5px; + border-radius: 2px; + background-color: black; + position: absolute; right: 0; + bottom: 1.5px; + transition: 0.2s cubic-bezier(0, 0.1, 0.9, 1) all; + + &.open { + transform: rotate(-45deg); + width: 40px; + top: 5px; + right: 0; + } + } + + &.hidden { + display: none; } } + } - &.hidden { - display: none; + .mobileNav { + // top: 83px; + width: 100vw; + background-color: white; + position: relative; + z-index: -1; + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: center; + line-height: 300%; + margin-top: -12rem; + transition: 0.4s ease-in-out; + &.open { + margin-top: 0; + } + .navItem { + width: 100%; + text-align: center; + color: black; + transition: 0.2s ease-in-out all; + &:hover { + text-decoration: underline solid transparent; + } } } .rainbow { width: 100vw; height: 0.4em; - position: absolute; bottom: -0.4em; background: linear-gradient( - // TODO: use actual colors 270deg, - red 0%, - orange 18.75%, - green 36.98%, - turquoise 55.73%, - blue 75%, - purple 100% + #ff6f6f 0%, + #f9a857 18.75%, + #80ce1c 36.98%, + #51c0c0 55.73%, + #62b0ff 75%, + #816dff 100% ); } } diff --git a/src/styles/modules/App.module.scss.d.ts b/src/styles/modules/App.module.scss.d.ts index cb1065f7..c142a1c9 100644 --- a/src/styles/modules/App.module.scss.d.ts +++ b/src/styles/modules/App.module.scss.d.ts @@ -7,8 +7,10 @@ declare namespace AppModuleScssNamespace { hidden: string; left: string; loginButton: string; + mobileNav: string; navItem: string; navbar: string; + navbarWrapper: string; open: string; rainbow: string; right: string; From e990bd2ddf8ce2355148809f320ed0ac57adf43f Mon Sep 17 00:00:00 2001 From: Faris Ashai Date: Sun, 27 Feb 2022 18:31:24 -0800 Subject: [PATCH 04/10] move navbar styles to component level module --- .gitignore | 2 ++ .../NavigationBar/Navbar.module.scss} | 0 src/components/NavigationBar/index.tsx | 2 +- src/styles/modules/App.module.scss.d.ts | 23 ------------------- 4 files changed, 3 insertions(+), 24 deletions(-) rename src/{styles/modules/App.module.scss => components/NavigationBar/Navbar.module.scss} (100%) delete mode 100644 src/styles/modules/App.module.scss.d.ts diff --git a/.gitignore b/.gitignore index 1437c53f..efbc9469 100644 --- a/.gitignore +++ b/.gitignore @@ -32,3 +32,5 @@ yarn-error.log* # vercel .vercel + +*.scss.d.ts \ No newline at end of file diff --git a/src/styles/modules/App.module.scss b/src/components/NavigationBar/Navbar.module.scss similarity index 100% rename from src/styles/modules/App.module.scss rename to src/components/NavigationBar/Navbar.module.scss diff --git a/src/components/NavigationBar/index.tsx b/src/components/NavigationBar/index.tsx index c2b0fc58..55901005 100644 --- a/src/components/NavigationBar/index.tsx +++ b/src/components/NavigationBar/index.tsx @@ -1,7 +1,7 @@ import Link from "next/link"; import { useEffect, useState } from "react"; import ACMLogo from "public/assets/ACMWhiteLogo.png"; -import s from "src/styles/modules/App.module.scss"; +import s from "src/components/NavigationBar/Navbar.module.scss"; import { Size, useWindowSize } from "src/utils"; const navLinks = [ diff --git a/src/styles/modules/App.module.scss.d.ts b/src/styles/modules/App.module.scss.d.ts deleted file mode 100644 index c142a1c9..00000000 --- a/src/styles/modules/App.module.scss.d.ts +++ /dev/null @@ -1,23 +0,0 @@ -// AUTOGENERATED FILE -- DO NOT EDIT DIRECTLY - -declare namespace AppModuleScssNamespace { - export interface IAppModuleScss { - 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 AppModuleScssModule: AppModuleScssNamespace.IAppModuleScss; - -export = AppModuleScssModule; From 22ff23ac8416909ea2c517ddb7e7444cd6781a98 Mon Sep 17 00:00:00 2001 From: Faris Ashai Date: Sun, 27 Feb 2022 19:17:35 -0800 Subject: [PATCH 05/10] commit module typing --- .gitignore | 2 -- .../NavigationBar/Navbar.module.scss.d.ts | 23 +++++++++++++++++++ 2 files changed, 23 insertions(+), 2 deletions(-) create mode 100644 src/components/NavigationBar/Navbar.module.scss.d.ts diff --git a/.gitignore b/.gitignore index efbc9469..1437c53f 100644 --- a/.gitignore +++ b/.gitignore @@ -32,5 +32,3 @@ yarn-error.log* # vercel .vercel - -*.scss.d.ts \ No newline at end of file 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; From f418b56fd6858c4bdb9e391047fe2231fcd64803 Mon Sep 17 00:00:00 2001 From: Faris Ashai Date: Sun, 27 Feb 2022 19:22:19 -0800 Subject: [PATCH 06/10] use proper color variables --- .../NavigationBar/Navbar.module.scss | 37 ++++++++++--------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/src/components/NavigationBar/Navbar.module.scss b/src/components/NavigationBar/Navbar.module.scss index 9713fb1f..915c4d64 100644 --- a/src/components/NavigationBar/Navbar.module.scss +++ b/src/components/NavigationBar/Navbar.module.scss @@ -1,3 +1,5 @@ +@use "src/styles/colors" as colors; + .navbarWrapper { position: fixed; top: 0; @@ -7,7 +9,7 @@ white-space: nowrap; .navbar { - background-color: #fff; + background-color: colors.$white; z-index: 20; font-size: 18px; width: 100%; @@ -33,7 +35,7 @@ } > p { font-size: 16px; - color: black; + color: colors.$black; margin-left: 4px; margin-bottom: 2px; } @@ -53,7 +55,7 @@ display: flex; align-items: center; text-decoration: none; - color: black; + color: colors.$black; margin-right: 32px; } @@ -69,8 +71,8 @@ height: 35px; width: 150px; - color: white; - background-color: black; + color: colors.$white; + background-color: colors.$black; border-radius: 0.5em; margin-right: 32px; @@ -87,12 +89,12 @@ height: 20px; margin: 0 30px; padding: 0; - background-color: white; + background-color: colors.$white; .bar1 { width: 40px; height: 5px; border-radius: 2px; - background-color: black; + background-color: colors.$black; position: absolute; top: 1.5px; transition: 0.2s cubic-bezier(0, 0.1, 0.9, 1) all; @@ -108,7 +110,7 @@ width: 23px; height: 5px; border-radius: 2px; - background-color: black; + background-color: colors.$black; position: absolute; right: 0; bottom: 1.5px; @@ -131,7 +133,7 @@ .mobileNav { // top: 83px; width: 100vw; - background-color: white; + background-color: colors.$white; position: relative; z-index: -1; display: flex; @@ -147,10 +149,11 @@ .navItem { width: 100%; text-align: center; - color: black; + color: colors.$black; transition: 0.2s ease-in-out all; + text-decoration: underline solid transparent; &:hover { - text-decoration: underline solid transparent; + text-decoration: underline solid currentColor; } } } @@ -161,12 +164,12 @@ bottom: -0.4em; background: linear-gradient( 270deg, - #ff6f6f 0%, - #f9a857 18.75%, - #80ce1c 36.98%, - #51c0c0 55.73%, - #62b0ff 75%, - #816dff 100% + colors.$red 0%, + colors.$orange 18.75%, + colors.$green 36.98%, + colors.$turquoise 55.73%, + colors.$blue 75%, + colors.$purple 100% ); } } From 85cc7b1ce1f4ba0619a0907f4bad69a69af0884e Mon Sep 17 00:00:00 2001 From: Faris Ashai Date: Sun, 27 Feb 2022 19:23:33 -0800 Subject: [PATCH 07/10] use seconds for transitions --- src/components/Button/styles.scss | 2 +- src/components/Footer/styles.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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 { From 24107e0f0a5c8580c6aab2461fe7005a2efd520c Mon Sep 17 00:00:00 2001 From: Faris Ashai Date: Mon, 28 Feb 2022 16:14:49 -0800 Subject: [PATCH 08/10] fix navlink order --- src/components/NavigationBar/Navbar.module.scss | 3 +-- src/components/NavigationBar/index.tsx | 9 ++++++--- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/NavigationBar/Navbar.module.scss b/src/components/NavigationBar/Navbar.module.scss index 915c4d64..d6c7b63b 100644 --- a/src/components/NavigationBar/Navbar.module.scss +++ b/src/components/NavigationBar/Navbar.module.scss @@ -131,7 +131,6 @@ } .mobileNav { - // top: 83px; width: 100vw; background-color: colors.$white; position: relative; @@ -141,7 +140,7 @@ justify-content: center; align-items: center; line-height: 300%; - margin-top: -12rem; + margin-top: -15rem; transition: 0.4s ease-in-out; &.open { margin-top: 0; diff --git a/src/components/NavigationBar/index.tsx b/src/components/NavigationBar/index.tsx index 55901005..bc5de68b 100644 --- a/src/components/NavigationBar/index.tsx +++ b/src/components/NavigationBar/index.tsx @@ -5,10 +5,10 @@ import s from "src/components/NavigationBar/Navbar.module.scss"; import { Size, useWindowSize } from "src/utils"; const navLinks = [ - { to: "#contact", text: "Contact" }, - { 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 = () => { @@ -66,6 +66,9 @@ const NavigationBar: React.FC = () => { {link.text} ))} + + Member Login +
    {/* Bottom Rainbow */} From 71d20a3ecc85da2ef200490b40f066483469d62c Mon Sep 17 00:00:00 2001 From: Faris Ashai Date: Mon, 28 Feb 2022 16:17:45 -0800 Subject: [PATCH 09/10] fix easing functions --- src/components/NavigationBar/Navbar.module.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/NavigationBar/Navbar.module.scss b/src/components/NavigationBar/Navbar.module.scss index d6c7b63b..b40c01a1 100644 --- a/src/components/NavigationBar/Navbar.module.scss +++ b/src/components/NavigationBar/Navbar.module.scss @@ -78,7 +78,7 @@ &:hover { opacity: 0.85; - transition: 200ms; + transition: 0.3s; } } } @@ -97,7 +97,7 @@ background-color: colors.$black; position: absolute; top: 1.5px; - transition: 0.2s cubic-bezier(0, 0.1, 0.9, 1) all; + transition: 0.3s ease-in-out all; &.open { transform: rotate(45deg); @@ -114,7 +114,7 @@ position: absolute; right: 0; bottom: 1.5px; - transition: 0.2s cubic-bezier(0, 0.1, 0.9, 1) all; + transition: 0.3s ease-in-out all; &.open { transform: rotate(-45deg); @@ -141,7 +141,7 @@ align-items: center; line-height: 300%; margin-top: -15rem; - transition: 0.4s ease-in-out; + transition: 0.3s ease-in-out; &.open { margin-top: 0; } @@ -149,7 +149,7 @@ width: 100%; text-align: center; color: colors.$black; - transition: 0.2s ease-in-out all; + transition: 0.3s ease-in-out all; text-decoration: underline solid transparent; &:hover { text-decoration: underline solid currentColor; From bdcd3b8e0449434d1160b0ad3e47ff0ec6d22dc7 Mon Sep 17 00:00:00 2001 From: Faris Ashai Date: Mon, 28 Feb 2022 16:40:07 -0800 Subject: [PATCH 10/10] add css comments --- .../NavigationBar/Navbar.module.scss | 23 ++++++++++++------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/src/components/NavigationBar/Navbar.module.scss b/src/components/NavigationBar/Navbar.module.scss index b40c01a1..f8e11fc8 100644 --- a/src/components/NavigationBar/Navbar.module.scss +++ b/src/components/NavigationBar/Navbar.module.scss @@ -8,6 +8,7 @@ z-index: 10; white-space: nowrap; + // container for fixed navbar (desktop and mobile) .navbar { background-color: colors.$white; z-index: 20; @@ -19,6 +20,7 @@ justify-content: space-between; align-items: center; + // left side of navbar is just the acm logo .left { height: 78px; padding-top: 9px; @@ -42,15 +44,13 @@ } } + // navbar right side contains all navlinks on desktop .right { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; - &.hidden { - display: none; - } .navItem { display: flex; align-items: center; @@ -83,6 +83,7 @@ } } + // toggle button for mobile menu is only visible on mobile, otherwise hidden .toggleIcon { position: relative; width: 40px; @@ -90,6 +91,8 @@ 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; @@ -123,13 +126,10 @@ right: 0; } } - - &.hidden { - display: none; - } } } + // menu div for links only on mobile version .mobileNav { width: 100vw; background-color: colors.$white; @@ -140,8 +140,9 @@ justify-content: center; align-items: center; line-height: 300%; - margin-top: -15rem; 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; } @@ -157,6 +158,7 @@ } } + // 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; @@ -172,3 +174,8 @@ ); } } + +// we use this class to either hide the navlinks or mobile menu toggle based on viewport width +.hidden { + display: none; +}