refactor and mobile navbar

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 (
         <BrowserRouter>
             <ThemeProvider theme={theme}>
+                <NavBar/>
                 <Routes>
                     <Route path='/challenges' element={<Challenges/>}/>
                     <Route exact path='/' element={<LandingPage/>}/>

src/assets/cup_ico.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.8971 2.57437C15.8249 2.23719 15.5554 2 15.2469 2H12.4459C12.4527 1.61094 12.4489 1.25937 12.4416 0.968125C12.4293 0.425937 12.0375 0 11.554 0H4.45151C3.96801 0 3.57621 0.425937 3.56231 0.968125C3.53175 1.25937 3.5512 1.61094 3.55953 2H0.757453C0.449013 2 0.181615 2.23719 0.108673 2.57437C0.0861098 2.68062 -0.436571 5.225 1.03005 7.68437C2.07041 9.42875 3.82546 10.6541 6.24018 11.3531C6.75981 11.5033 7.11299 12.0425 7.11299 12.6459C7.11354 13.3906 6.57169 14 5.90757 14H5.77975C5.0431 14 4.44623 14.6716 4.44623 15.5C4.44623 15.7761 4.64527 16 4.86582 16H11.0652C11.3107 16 11.4848 15.7761 11.4848 15.5C11.4848 14.6716 10.8879 14 10.1513 14H10.0222C9.35921 14 8.81735 13.3906 8.81735 12.6453C8.81735 12.0419 9.17053 11.5025 9.69016 11.3525C12.1065 10.6544 13.861 9.42906 14.9003 7.68375C16.4418 5.225 15.9194 2.68062 15.8971 2.57437ZM2.15099 6.86875C1.37461 5.58125 1.30625 4.24062 1.34432 3.5H3.57815C3.72706 5.36312 4.14362 7.59688 5.18065 9.40938C3.81796 8.8 2.80372 7.95 2.15099 6.86875ZM13.8548 6.86875C13.2034 7.95 12.1892 8.79844 10.8259 9.40687C11.8624 7.59687 12.2792 5.3625 12.4265 3.5H14.6603C14.6745 4.24062 14.63 5.58438 13.8548 6.86875Z" fill="#343434"/>
+</svg>

src/assets/login_ico.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 0H11C10.4478 0 10 0.511786 10 1.14286C10 1.77393 10.4478 2.28571 11 2.28571H13C13.5522 2.28571 14 2.7975 14 3.42857V12.5714C14 13.2025 13.5522 13.7143 13 13.7143H11C10.4478 13.7143 10 14.2261 10 14.8571C10 15.4882 10.4478 16 11 16H13C14.6569 16 16 14.465 16 12.5714V3.42857C16 1.535 14.6562 0 13 0ZM10.7063 7.19286L6.70625 2.62143C6.31531 2.17464 5.6825 2.17536 5.29219 2.62143C4.90156 3.06786 4.90156 3.79107 5.29219 4.2375L7.5875 6.85714H1C0.447187 6.85714 0 7.36786 0 8C0 8.63214 0.447187 9.14286 1 9.14286H7.5875L5.29437 11.7636C4.90375 12.21 4.90375 12.9332 5.29437 13.3796C5.685 13.8261 6.31781 13.8261 6.70844 13.3796L10.7084 8.80822C11.0969 8.36071 11.0969 7.63929 10.7063 7.19286Z" fill="#343434"/>
+</svg>

src/assets/menu-button.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line y1="1" x2="20" y2="1" stroke="#343434" stroke-width="2"/>
+<line y1="7" x2="20" y2="7" stroke="#343434" stroke-width="2"/>
+<line y1="13" x2="20" y2="13" stroke="#343434" stroke-width="2"/>
+</svg>

src/assets/register_ico.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.625 10.7719L13.4821 6.26875C13.7154 6.05313 13.7796 5.73125 13.6446 5.45625C13.5071 5.18125 13.2 5.00313 12.8571 5.00313H10.2857V1.00063C10.2857 0.447812 9.775 0 9.14286 0L6.85714 0C6.22571 0 5.71428 0.447812 5.71428 1.00063V5.00375H3.14286C2.80079 5.00375 2.49107 5.18209 2.35536 5.45719C2.22032 5.73228 2.2845 6.05188 2.51943 6.26969L7.37657 10.7728C7.7 11.0719 8.3 11.0719 8.625 10.7719ZM16 13V11C16 10.4478 15.4882 10 14.8571 10C14.2261 10 13.7143 10.4478 13.7143 11V13C13.7143 13.5522 13.2025 14 12.5714 14H3.42857C2.7975 14 2.28571 13.5522 2.28571 13V11C2.28571 10.4478 1.77393 10 1.14286 10C0.511785 10 0 10.4478 0 11V13C0 14.6569 1.535 16 3.42857 16H12.5714C14.465 16 16 14.6562 16 13Z" fill="#343434"/>
+</svg>

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 (
-        <>
-
-        </>
+        <H1 as={Link} cursor='pointer' to='/' color={theme.colors.green}>
+            Gonito.net
+        </H1>
     );
 }
 

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 (
+        <MobileNavMenuStyle as='ul' translateY={props.translateY}>
+            <FlexRow as={Link} to='/' gap='16px'>
+                <Svg width='16px' height='16px' src={loginIco}/>
+                <Menu as='li'>
+                    Sign in
+                </Menu>
+            </FlexRow>
+            <FlexRow as={Link} to='/' gap='16px'>
+                <Svg width='16px' height='16px' src={registerIco}/>
+                <Menu as='li'>
+                    Register
+                </Menu>
+            </FlexRow>
+            <FlexRow as={Link} to='/' gap='16px'>
+                <Svg width='16px' height='16px' src={cupIco}/>
+                <Menu as='li'>
+                    Challenges
+                </Menu>
+            </FlexRow>
+        </MobileNavMenuStyle>
+    );
+}
+
+export default MobileNavMenu;

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 (
-        <Container as='header'>
-            <FlexRow as='nav'>
+    const [navMenuTranslateY, setNavMenuTranslateY] = React.useState('-100vh');
 
+    const toggleNavMenu = () => {
+        if (navMenuTranslateY === '-100vh')
+            setNavMenuTranslateY('0');
+        else
+            setNavMenuTranslateY('-100vh');
+    }
+
+    return (
+        <NavBarStyle as='header'>
+            <FlexRow height='100%' alignmentX='space-between' as='nav'>
+                <Logo/>
+                <MenuButton as='button' onClick={() => toggleNavMenu()}/>
             </FlexRow>
-        </Container>
+            <MobileNavMenu translateY={navMenuTranslateY}/>
+        </NavBarStyle>
     );
 }
 

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 (
-        <FlexColumn alignmentY='flex-start' setWidth='100%' setMinHeight='100vh' as='main'>
-            <FlexColumn alignmentX='flex-start' setGap='24px'
-                        setWidth='80%' setMaxWidtsetCursorh='352px' setMargin='90px 0 0 0'>
+        <FlexColumn alignmentY='flex-start' width='100%' minHeight='100vh' as='main'>
+            <FlexColumn alignmentX='flex-start' gap='24px'
+                        width='80%' maxWidth='352px' margin='90px 0 0 0'>
                 <H1 as="h1">
                     Welcome to
-                    <Container setDisplay="inline" setColor={theme.colors.green}>
+                    <Container display="inline" color={theme.colors.green}>
                         &nbsp;Gonito.net!
                     </Container>
                 </H1>

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};
+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};

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;