diff --git a/src/components/elements/MobileNavMenu.js b/src/components/elements/MobileNavMenu.js
index 3caa13e..9f0273e 100644
--- a/src/components/elements/MobileNavMenu.js
+++ b/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 (
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
);
}
diff --git a/src/components/elements/NavBar.js b/src/components/elements/NavBar.js
index 8ee3140..afec095 100644
--- a/src/components/elements/NavBar.js
+++ b/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 (
- toggleNavMenu()}/>
+
-
+
);
}
diff --git a/src/pages/Challenges.js b/src/pages/Challenges.js
index 97029fa..e5f4720 100644
--- a/src/pages/Challenges.js
+++ b/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 = () => {
-
);