Skip to content

Commit 6ff98cd

Browse files
wbglaeserwbglaeser
committed
new mobile drowndown menu
1 parent b92e994 commit 6ff98cd

File tree

4 files changed

+174
-95
lines changed

4 files changed

+174
-95
lines changed

‎src/screens/landing-page/components/LandingPageButton.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@ const styles = {
2020
borderRadius: '12px',
2121
borderStyle: 'solid',
2222
borderWidth: '1px',
23-
borderColor: globalStyles.primaryColor,
23+
borderColor:"white",
2424
padding: '4px 12px',
25-
color: 'black',
25+
color: globalStyles.colorDarkGrey,
2626
fontSize: '20px',
2727
fontWeight: 'bold',
2828
textTransform: 'none'

‎src/screens/landing-page/sections/header/HeaderBar.js‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,12 @@
11
import React from "react";
2-
import HStack from "../../../../components/HStack";
3-
import {Link} from "react-router-dom";
42
import HeaderBarMobile from "./views/HeaderBarMobile";
53
import HeaderBarDesktop from "./views/HeaderBarDesktop";
64
import LandingPageSectionWrapper from "../../components/LandingPageSectionWrapper";
7-
import LogoBar from "../../../../components/LogoBar";
85

96
const HeaderBar = ({isApp, isDesktop}) => {
10-
const size = isDesktop ? 'large' : 'small';
11-
127
return (
138
<LandingPageSectionWrapper isDesktop={isDesktop} isTop={true}>
14-
<HStack gap={5} justifyContent={'space-between'} alignItems={'center'} sx={{width: '100%'}}>
15-
<HStack alignItems={'center'}>
16-
<Link to={"/"} style={{textDecoration: 'none', color: "black", width: '100%'}}>
17-
<LogoBar size={size}/>
18-
</Link>
19-
</HStack>
20-
{isDesktop ? <HeaderBarDesktop isApp={isApp}/> : <HeaderBarMobile/>}
21-
</HStack>
9+
{isDesktop ? <HeaderBarDesktop isApp={isApp}/> : <HeaderBarMobile isApp={isApp}/>}
2210
</LandingPageSectionWrapper>
2311
)
2412
}

‎src/screens/landing-page/sections/header/views/HeaderBarDesktop.js‎

Lines changed: 64 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,80 @@
11
import React, {useContext} from 'react';
2-
import {Typography} from "@mui/material";
2+
import {ToggleButton, ToggleButtonGroup} from "@mui/material";
33
import HStack from "../../../../../components/HStack";
44
import LandingPageWAppButton from "../../../components/LandingPageWAppButton";
5-
import NarBarLink from "../../../../../components/NavBarLink";
65
import LandingPageHollowButton from "../../../components/LandingPageButton";
7-
import { LanguageContext } from "../../../../../language/LanguageContext";
6+
import {LanguageContext} from "../../../../../language/LanguageContext";
87
import featureFlags from "../../../../../featureFlags";
98
import useTranslation from "../../../../../language/useTranslation";
9+
import {Link} from "react-router-dom";
10+
import LogoBar from "../../../../../components/LogoBar";
1011

1112
const HeaderBarDesktop = ({isApp}) => {
1213
const {language, setLanguage} = useContext(LanguageContext);
13-
const { t } = useTranslation();
14+
const {t} = useTranslation();
15+
16+
const handleLanguageChange = (event, newLanguage) => {
17+
if (newLanguage !== null) {
18+
setLanguage(newLanguage);
19+
}
20+
};
1421

1522
return (
16-
<HStack gap={5} justifyContent={'flex-end'} alignItems={'center'} sx={{width: '100%'}}>
17-
<HStack gap={3}>
18-
{isApp ? null : <LandingPageWAppButton backgroundColor={'primary'}/>}
19-
{isApp ? null :
20-
featureFlags.newFeedbackSection ?
21-
<LandingPageHollowButton text={t('menu.improve')} to={'/#feedback'}/>
22-
: null
23-
}
24-
{isApp ? null :
25-
featureFlags.newCollaborationSection ?
26-
<LandingPageHollowButton text={t('menu.collaborate')} to={'/#collaboration'}/>
27-
: null
28-
}
29-
{isApp ? null :
30-
featureFlags.newActivityLog ?
31-
<LandingPageHollowButton text={t('menu.activityLog')} to={'/activity-log'}/>
32-
: null
33-
}
23+
<HStack gap={5} justifyContent={'space-between'} alignItems={'center'} sx={{width: '100%'}}>
24+
<HStack alignItems={'center'}>
25+
<Link to={"/"} style={{textDecoration: 'none', color: "black", width: '100%'}}>
26+
<LogoBar size={'large'}/>
27+
</Link>
3428
</HStack>
35-
<HStack>
36-
<NarBarLink to={"/#about-us"} title={t('menu.aboutUs')}/>
37-
{
38-
featureFlags.newLanguageToggle && (
39-
<Typography>
40-
<span
41-
onClick={() => setLanguage('en')}
42-
style={{
43-
cursor: 'pointer',
44-
fontWeight: language === 'en' ? 'bold' : 'normal',
45-
}}
46-
>
47-
EN
48-
</span>
49-
{' '}/{' '}
50-
<span
51-
onClick={() => setLanguage('de')}
52-
style={{
53-
cursor: 'pointer',
54-
fontWeight: language === 'de' ? 'bold' : 'normal',
55-
}}
29+
<HStack gap={9} justifyContent={'flex-end'} alignItems={'center'} sx={{width: '100%'}}>
30+
<HStack gap={5}>
31+
{isApp ? null : <LandingPageWAppButton backgroundColor={'primary'}/>}
32+
{isApp ? null :
33+
featureFlags.newFeedbackSection ?
34+
<LandingPageHollowButton text={t('menu.improve')} to={'/#feedback'}/>
35+
: null
36+
}
37+
{isApp ? null :
38+
featureFlags.newCollaborationSection ?
39+
<LandingPageHollowButton text={t('menu.collaborate')} to={'/#collaboration'}/>
40+
: null
41+
}
42+
{isApp ? null :
43+
featureFlags.newActivityLog ?
44+
<LandingPageHollowButton text={t('menu.activityLog')} to={'/activity-log'}/>
45+
: null
46+
}
47+
{
48+
isApp ? null :
49+
<LandingPageHollowButton text={t('menu.aboutUs')} to={"/#about-us"}/>
50+
}
51+
{
52+
featureFlags.newLanguageToggle && (
53+
<ToggleButtonGroup
54+
value={language}
55+
exclusive
56+
onChange={handleLanguageChange}
57+
aria-label="language selection"
58+
size="small"
5659
>
57-
DE
58-
</span>
59-
</Typography>
60-
)
61-
}
60+
<ToggleButton
61+
value="en"
62+
aria-label="english"
63+
sx={{padding: '8px'}}
64+
>
65+
EN
66+
</ToggleButton>
67+
<ToggleButton
68+
value="de"
69+
aria-label="german"
70+
sx={{padding: '8px'}}
71+
>
72+
DE
73+
</ToggleButton>
74+
</ToggleButtonGroup>
75+
)
76+
}
77+
</HStack>
6278
</HStack>
6379
</HStack>
6480
)

‎src/screens/landing-page/sections/header/views/HeaderBarMobile.js‎

Lines changed: 107 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,119 @@
1-
import React, {useState} from 'react';
1+
import React, {useContext, useState} from 'react';
22
import MenuIcon from '@mui/icons-material/Menu';
3-
import {Menu, MenuItem, IconButton} from '@mui/material';
3+
import {IconButton, ToggleButtonGroup, ToggleButton} from '@mui/material';
44
import {Link} from 'react-router-dom';
5+
import HStack from "../../../../../components/HStack";
6+
import LogoBar from "../../../../../components/LogoBar";
7+
import VStack from "../../../../../components/VStack";
8+
import featureFlags from "../../../../../featureFlags";
9+
import LandingPageHollowButton from "../../../components/LandingPageButton";
10+
import {LanguageContext} from "../../../../../language/LanguageContext";
511
import useTranslation from "../../../../../language/useTranslation";
12+
import Divider from "@mui/material/Divider";
13+
import globalStyles from "../../../../../styles/styles";
614

7-
const HeaderBarMobile = () => {
8-
const [anchorEl, setAnchorEl] = useState(null);
15+
const HeaderBarMobile = ({isApp}) => {
16+
const [showDropdown, setShowDropdown] = useState(false);
917

10-
const handleClick = (event) => {
11-
setAnchorEl(event.currentTarget);
12-
};
18+
const {language, setLanguage} = useContext(LanguageContext);
19+
const {t} = useTranslation();
1320

14-
const handleClose = () => {
15-
setAnchorEl(null);
21+
const handleLanguageChange = (event, newLanguage) => {
22+
if (newLanguage !== null) {
23+
setLanguage(newLanguage);
24+
}
1625
};
1726

18-
// const {language, setLanguage} = useContext(LanguageContext); TODO
19-
const { t } = useTranslation();
20-
2127
return (
22-
<>
23-
<IconButton
24-
aria-controls="simple-menu"
25-
aria-haspopup="true"
26-
onClick={handleClick}
27-
>
28-
<MenuIcon sx={{ fontSize: '32px' }} />
29-
</IconButton>
30-
<Menu
31-
id="simple-menu"
32-
anchorEl={anchorEl}
33-
keepMounted
34-
open={Boolean(anchorEl)}
35-
onClose={handleClose}
36-
>
37-
<MenuItem component={Link} to="/#how-it-works" onClick={handleClose}>{t('menu.howWorks')}</MenuItem>
38-
<MenuItem component={Link} to="/#principles" onClick={handleClose}>{t('menu.principles')}</MenuItem>
39-
<MenuItem component={Link} to="/#about-us" onClick={handleClose}>{t('menu.aboutUs')}</MenuItem>
40-
</Menu>
41-
</>
28+
<VStack gap={5}>
29+
<HStack gap={5} justifyContent={'space-between'} alignItems={'center'} sx={{width: '100%'}}>
30+
<HStack alignItems={'center'}>
31+
<Link to={"/"} style={{textDecoration: 'none', color: "black", width: '100%'}}>
32+
<LogoBar size={'large'}/>
33+
</Link>
34+
</HStack>
35+
<IconButton
36+
aria-controls="simple-menu"
37+
aria-haspopup="true"
38+
onClick={() => setShowDropdown(!showDropdown)}
39+
>
40+
<MenuIcon sx={{fontSize: '32px'}}/>
41+
</IconButton>
42+
</HStack>
43+
{
44+
showDropdown && (
45+
<VStack gap={2} alignItems={'center'}
46+
sx={{
47+
paddingBottom: '16px',
48+
borderBottom: '1px solid rgba(0, 0, 0, 0.12)',
49+
}}
50+
>
51+
{isApp ? null :
52+
featureFlags.newFeedbackSection ? (
53+
<>
54+
<LandingPageHollowButton text={t('menu.improve')} to={'/#feedback'}/>
55+
<Divider sx={{width: '100%', backgroundColor: globalStyles.colorLightGreyTransparent}}/>
56+
</>
57+
)
58+
: null
59+
}
60+
{isApp ? null :
61+
featureFlags.newCollaborationSection ? (
62+
<>
63+
<LandingPageHollowButton text={t('menu.collaborate')} to={'/#collaboration'}/>
64+
<Divider sx={{width: '100%', backgroundColor: globalStyles.colorLightGreyTransparent}}/>
65+
</>
66+
)
67+
: null
68+
}
69+
{isApp ? null :
70+
featureFlags.newActivityLog ?
71+
(<>
72+
<LandingPageHollowButton text={t('menu.activityLog')} to={'/activity-log'}/>
73+
<Divider sx={{width: '100%', backgroundColor: globalStyles.colorLightGreyTransparent}}/>
74+
</>
75+
)
76+
: null
77+
}
78+
{
79+
isApp ? null : (
80+
<>
81+
<LandingPageHollowButton text={t('menu.aboutUs')} to={"/#about-us"}/>
82+
<Divider sx={{width: '100%', backgroundColor: globalStyles.colorLightGreyTransparent}}/>
83+
</>
84+
)
85+
}
86+
{
87+
featureFlags.newLanguageToggle && (
88+
<ToggleButtonGroup
89+
value={language}
90+
exclusive
91+
onChange={handleLanguageChange}
92+
aria-label="language selection"
93+
size="small"
94+
>
95+
<ToggleButton
96+
value="en"
97+
aria-label="english"
98+
sx={{padding: '8px'}}
99+
>
100+
EN
101+
</ToggleButton>
102+
<ToggleButton
103+
value="de"
104+
aria-label="german"
105+
sx={{padding: '8px'}}
106+
>
107+
DE
108+
</ToggleButton>
109+
</ToggleButtonGroup>
110+
)
111+
}
112+
</VStack>)
113+
}
114+
115+
116+
</VStack>
42117
)
43118
}
44119

0 commit comments

Comments
 (0)