correct MobileNavMenu to be closed when outside area will be clicked

src/components/elements/MobileNavMenu.js

@@ -9,15 +9,15 @@ import {Link} from "react-router-dom";
 
 const MobileNavMenuStyle = styled(FlexColumn)`
   gap: 32px;
-  padding: 16px 20px;
+  padding: 20px;
   background-color: ${({theme}) => theme.colors.white};
   box-shadow: ${({theme}) => theme.navShadow};
   position: fixed;
-  top: 44px;
+  top: 0;
   left: 0;
   width: 100%;
   align-items: flex-start;
-  transition: transform 0.3s ease-in-out;
+  z-index: 2;
 
   a {
     cursor: pointer;
@@ -44,28 +44,42 @@ const MobileNavMenuStyle = styled(FlexColumn)`
   }
 `;
 
+const TransBack = styled(Container)`
+  position: fixed;
+  top: 42px;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  transition: transform 0.3s ease-in-out;
+`
+
 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='/challenges' gap='16px'>
-                <Svg width='16px' height='16px' src={cupIco}/>
-                <Menu as='li'>
-                    Challenges
-                </Menu>
-            </FlexRow>
-        </MobileNavMenuStyle>
+        <TransBack translateY={props.translateY} onClick={props.toggleNavMenu}>
+            <MobileNavMenuStyle as='ul'>
+                <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='/challenges' gap='16px'>
+                    <Svg width='16px' height='16px' src={cupIco}/>
+                    <Menu as='li'>
+                        Challenges
+                    </Menu>
+                </FlexRow>
+            </MobileNavMenuStyle>
+        </TransBack>
     );
 }
 

src/components/elements/NavBar.js

@@ -29,22 +29,22 @@ const MenuButton = styled(Container)`
 `;
 
 const NavBar = () => {
-    const [navMenuTranslateY, setNavMenuTranslateY] = React.useState('-100vh');
+    const [navMenuTranslateY, setNavMenuTranslateY] = React.useState('calc(-100vh - 42px)');
 
     const toggleNavMenu = () => {
-        if (navMenuTranslateY === '-100vh')
+        if (navMenuTranslateY === 'calc(-100vh - 42px)')
             setNavMenuTranslateY('0');
         else
-            setNavMenuTranslateY('-100vh');
+            setNavMenuTranslateY('calc(-100vh - 42px)');
     }
 
     return (
         <NavBarStyle as='header'>
             <FlexRow height='100%' alignmentX='space-between' as='nav'>
                 <Logo/>
-                <MenuButton as='button' onClick={() => toggleNavMenu()}/>
+                <MenuButton as='button' onClick={toggleNavMenu}/>
             </FlexRow>
-            <MobileNavMenu translateY={navMenuTranslateY}/>
+            <MobileNavMenu translateY={navMenuTranslateY} toggleNavMenu={toggleNavMenu}/>
         </NavBarStyle>
     );
 }

src/pages/Challenges.js

@@ -8,13 +8,13 @@ import challengesResp from "../prototypeData/challenges";
 import {ELEMENTS_PER_PAGE} from "../utils/globals";
 
 const Challenges = () => {
-    const calcPages = (challenges) => {
-        return Math.ceil(challenges.length / ELEMENTS_PER_PAGE);
-    }
-
     const [pageNr, setPageNr] = React.useState(1);
     const [challenges, setChallenges] = React.useState(challengesResp);
 
+    const calcPages = () => {
+        return Math.ceil(challenges.length / ELEMENTS_PER_PAGE);
+    }
+
     const searchQueryHandler = (event) => {
         let searchQuery = event.target.value;
         let challengesToRender = [];
@@ -47,7 +47,6 @@ const Challenges = () => {
     }
 
     const renderChallenges = () => {
-
         const n = (pageNr - 1) * ELEMENTS_PER_PAGE;
         return (
             challenges.slice(n, n + ELEMENTS_PER_PAGE).map((challenge, index) => {
@@ -75,7 +74,7 @@ const Challenges = () => {
                     </Grid>
                 </FlexColumn>
             </FlexColumn>
-            <Pager pageNr={pageNr} pages={calcPages(challenges)}
+            <Pager pageNr={pageNr} pages={calcPages()}
                    nextPage={nextPage} previousPage={previousPage}/>
         </FlexColumn>
     );