From 525655901e20d4fc65f3ebba6f75aff4d64f2f6c Mon Sep 17 00:00:00 2001 From: mattyl006 Date: Wed, 6 Jul 2022 16:25:20 +0200 Subject: [PATCH] refactor and mobile navbar --- src/App.js | 2 + src/assets/cup_ico.svg | 3 ++ src/assets/login_ico.svg | 3 ++ src/assets/menu-button.svg | 5 +++ src/assets/register_ico.svg | 3 ++ src/components/Logo.js | 9 +++-- src/components/MobileNavMenu.js | 72 +++++++++++++++++++++++++++++++++ src/components/NavBar.js | 46 +++++++++++++++++++-- src/pages/LandingPage.js | 10 ++--- src/utils/containers.js | 53 +++++++++++++----------- src/utils/theme.js | 1 + 11 files changed, 172 insertions(+), 35 deletions(-) create mode 100644 src/assets/cup_ico.svg create mode 100644 src/assets/login_ico.svg create mode 100644 src/assets/menu-button.svg create mode 100644 src/assets/register_ico.svg create mode 100644 src/components/MobileNavMenu.js diff --git a/src/App.js b/src/App.js index b537da8..7a7bd14 100644 --- a/src/App.js +++ b/src/App.js @@ -3,11 +3,13 @@ import theme from "./utils/theme"; import LandingPage from "./pages/LandingPage"; import Challenges from "./pages/Challenges"; import {BrowserRouter, Route, Routes} from "react-router-dom"; +import NavBar from "./components/NavBar"; const App = () => { return ( + }/> }/> diff --git a/src/assets/cup_ico.svg b/src/assets/cup_ico.svg new file mode 100644 index 0000000..319ca86 --- /dev/null +++ b/src/assets/cup_ico.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/login_ico.svg b/src/assets/login_ico.svg new file mode 100644 index 0000000..aeb1840 --- /dev/null +++ b/src/assets/login_ico.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/menu-button.svg b/src/assets/menu-button.svg new file mode 100644 index 0000000..dbb5c0d --- /dev/null +++ b/src/assets/menu-button.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/register_ico.svg b/src/assets/register_ico.svg new file mode 100644 index 0000000..fc3d694 --- /dev/null +++ b/src/assets/register_ico.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Logo.js b/src/components/Logo.js index c3fdfaf..7880b92 100644 --- a/src/components/Logo.js +++ b/src/components/Logo.js @@ -1,10 +1,13 @@ import React from "react"; +import {H1} from "../utils/fonts"; +import theme from "../utils/theme"; +import {Link} from "react-router-dom"; const Logo = () => { return ( - <> - - +

+ Gonito.net +

); } diff --git a/src/components/MobileNavMenu.js b/src/components/MobileNavMenu.js new file mode 100644 index 0000000..fa7c022 --- /dev/null +++ b/src/components/MobileNavMenu.js @@ -0,0 +1,72 @@ +import React from "react"; +import {Container, FlexColumn, FlexRow, Svg} from "../utils/containers"; +import {Menu} from "../utils/fonts"; +import loginIco from '../assets/login_ico.svg'; +import registerIco from '../assets/register_ico.svg'; +import cupIco from '../assets/cup_ico.svg'; +import styled from "styled-components"; +import {Link} from "react-router-dom"; + +const MobileNavMenuStyle = styled(FlexColumn)` + gap: 32px; + padding: 16px 20px; + background-color: ${({theme}) => theme.colors.white}; + box-shadow: ${({theme}) => theme.navShadow}; + position: fixed; + top: 44px; + left: 0; + width: 100%; + align-items: flex-start; + transition: transform 0.3s ease-in-out; + + a { + cursor: pointer; + + div { + cursor: pointer; + transition: background-color 0.3s ease-in-out; + } + + li { + cursor: pointer; + transition: color 0.3s ease-in-out; + } + + &:hover { + div { + background-color: ${({theme}) => theme.colors.green}; + } + + li { + color: ${({theme}) => theme.colors.green}; + } + } + } +`; + +const MobileNavMenu = (props) => { + return ( + + + + + Sign in + + + + + + Register + + + + + + Challenges + + + + ); +} + +export default MobileNavMenu; \ No newline at end of file diff --git a/src/components/NavBar.js b/src/components/NavBar.js index 9ce1b21..00c5640 100644 --- a/src/components/NavBar.js +++ b/src/components/NavBar.js @@ -1,13 +1,51 @@ import React from "react"; import {Container, FlexRow} from "../utils/containers"; +import Logo from "./Logo"; +import styled from "styled-components"; +import menuButtonIcon from '../assets/menu-button.svg'; +import MobileNavMenu from "./MobileNavMenu"; + +const NavBarStyle = styled(Container)` + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 42px; + background-color: ${({theme}) => theme.colors.white}; + box-shadow: ${({theme}) => theme.navShadow}; + padding: 0 10px; + z-index: 2; +`; + +const MenuButton = styled(Container)` + width: 20px; + height: 14px; + background-image: url(${menuButtonIcon}); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + cursor: pointer; + margin-top: 4px; +`; const NavBar = () => { - return ( - - + const [navMenuTranslateY, setNavMenuTranslateY] = React.useState('-100vh'); + const toggleNavMenu = () => { + if (navMenuTranslateY === '-100vh') + setNavMenuTranslateY('0'); + else + setNavMenuTranslateY('-100vh'); + } + + return ( + + + + toggleNavMenu()}/> - + + ); } diff --git a/src/pages/LandingPage.js b/src/pages/LandingPage.js index a75ce72..9087c42 100644 --- a/src/pages/LandingPage.js +++ b/src/pages/LandingPage.js @@ -1,5 +1,5 @@ import React from "react"; -import {Body, H1, Label} from "../utils/fonts"; +import {Body, H1} from "../utils/fonts"; import {Container, FlexColumn} from "../utils/containers"; import theme from "../utils/theme"; import {Link} from "react-router-dom"; @@ -7,12 +7,12 @@ import ButtonLink from "../components/ButtonLink"; const LandingPage = () => { return ( - - + +

Welcome to - +  Gonito.net!

diff --git a/src/utils/containers.js b/src/utils/containers.js index 7339924..45cdc0c 100644 --- a/src/utils/containers.js +++ b/src/utils/containers.js @@ -1,30 +1,31 @@ import styled from 'styled-components'; const Container = styled.div` - padding: ${({setPadding}) => setPadding ? setPadding : '0'}; - margin: ${({setMargin}) => setMargin ? setMargin : '0'}; - width: ${({setWidth}) => setWidth ? setWidth : 'auto'}; - text-align: ${({setTextAlign}) => setTextAlign ? setTextAlign : 'left'}; - max-width: ${({setMaxWidth}) => setMaxWidth ? setMaxWidth : 'auto'}; - min-width: ${({setMinWidth}) => setMinWidth ? setMinWidth : 'auto'}; - height: ${({setHeight}) => setHeight ? setHeight : 'auto'}; - max-height: ${({setMaxHeight}) => setMaxHeight ? setMaxHeight : 'auto'}; - min-height: ${({setMinHeight}) => setMinHeight ? setMinHeight : 'auto'}; - background-color: ${({setBackgroundColor}) => setBackgroundColor ? setBackgroundColor : 'transparent'}; - color: ${({theme, setColor}) => setColor ? setColor : theme.colors.dark}; - border-radius: ${({setBorderRadius}) => setBorderRadius ? setBorderRadius : '0'}; + padding: ${({padding}) => padding ? padding : '0'}; + margin: ${({margin}) => margin ? margin : '0'}; + width: ${({width}) => width ? width : 'auto'}; + text-align: ${({textAlign}) => textAlign ? textAlign : 'left'}; + max-width: ${({maxWidth}) => maxWidth ? maxWidth : 'auto'}; + min-width: ${({minWidth}) => minWidth ? minWidth : 'auto'}; + height: ${({height}) => height ? height : 'auto'}; + max-height: ${({maxHeight}) => maxHeight ? maxHeight : 'auto'}; + min-height: ${({minHeight}) => minHeight ? minHeight : 'auto'}; + background-color: ${({backgroundColor}) => backgroundColor ? backgroundColor : 'transparent'}; + color: ${({theme, color}) => color ? color : theme.colors.dark}; + border-radius: ${({borderRadius}) => borderRadius ? borderRadius : '0'}; box-shadow: ${({shadow}) => shadow ? shadow : 'none'}; - gap: ${({setGap}) => setGap ? setGap : '0'}; - border: ${({setBorder}) => setBorder ? setBorder : 'none'}; - cursor: ${({setCursor}) => setCursor ? setCursor : 'auto'}; - display: ${({setDisplay}) => setDisplay ? setDisplay : 'block'}; - opacity: ${({setOpacity}) => setOpacity ? setOpacity : '1'}; - outline: ${({setOutline}) => setOutline ? setOutline : 'none'}; - text-decoration: ${({setTextDecoration}) => setTextDecoration ? setTextDecoration : 'none'}; + gap: ${({gap}) => gap ? gap : '0'}; + border: ${({border}) => border ? border : 'none'}; + cursor: ${({cursor}) => cursor ? cursor : 'auto'}; + display: ${({display}) => display ? display : 'block'}; + opacity: ${({opacity}) => opacity ? opacity : '1'}; + outline: ${({outline}) => outline ? outline : 'none'}; + text-decoration: ${({textDecoration}) => textDecoration ? textDecoration : 'none'}; + transform: translate(${({translateX}) => translateX ? translateX : 0}, ${({translateY}) => translateY ? translateY : 0}); `; const FlexRow = styled(Container)` - display: ${({setDisplay}) => setDisplay ? setDisplay : 'flex'}; + display: ${({display}) => display ? display : 'flex'}; justify-content: ${({alignmentX}) => alignmentX ? alignmentX : 'center'}; align-items: ${({alignmentY}) => alignmentY ? alignmentY : 'center'}; `; @@ -37,8 +38,14 @@ const FlexColumn = styled(FlexRow)` const Grid = styled(Container)` display: grid; - grid-template-columns: ${({setTemplateColumns}) => setTemplateColumns ? setTemplateColumns : 'auto'}; - grid-template-rows: ${({setTemplateRows}) => setTemplateRows ? setTemplateRows : 'auto'}; + grid-template-columns: ${({templateColumns}) => templateColumns ? templateColumns : 'auto'}; + grid-template-rows: ${({templateRows}) => templateRows ? templateRows : 'auto'}; `; -export {Container, FlexRow, FlexColumn, Grid}; \ No newline at end of file +const Svg = styled(Container)` + background-color: ${({backgroundColor, theme}) => backgroundColor ? backgroundColor : theme.colors.dark}; + -webkit-mask: url(${({src}) => src}) no-repeat center; + mask: url(${({src}) => src}) no-repeat center; +`; + +export {Container, FlexRow, FlexColumn, Grid, Svg}; \ No newline at end of file diff --git a/src/utils/theme.js b/src/utils/theme.js index 6cd9bc6..68896d9 100644 --- a/src/utils/theme.js +++ b/src/utils/theme.js @@ -5,6 +5,7 @@ const theme = { overMobile: '768px', mobile: '(max-width: 768px)', desktop: '(min-width: 769px)', + navShadow: '0 1px 2px rgba(52, 52, 52, 0.25)' }; export default theme; \ No newline at end of file