s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

correct MobileNavMenu to be closed when outside area will be clicked

Browse Source
This commit is contained in:
mattyl006 2022-07-11 10:44:35 +02:00
parent 9b1742880b
commit 3a36996b24
3 changed files with 47 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/elements/MobileNavMenu.js
View File

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

10
src/components/elements/NavBar.js
View File

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

11
src/pages/Challenges.js
View File

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