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

desktop Challenge menu option background green when active

Browse Source
This commit is contained in:
mattyl006 2022-07-18 11:50:46 +02:00
parent 98f5848993
commit 81fa27c48c
4 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/elements/DesktopChallengeMenu.js
View File

@ -22,6 +22,7 @@ const Option = styled(FlexColumn)`
width: 100%; width: 100%;
transition: background-color 0.3s ease-in-out; transition: background-color 0.3s ease-in-out;
cursor: pointer; cursor: pointer;
background-color: ${({theme, active}) => active ? theme.colors.green05 : theme.colors.white};
* { * {
cursor: pointer; cursor: pointer;
@ -39,6 +40,7 @@ const DesktopChallengeMenu = (props) => {
{options.map((option, index) => { {options.map((option, index) => {
return ( return (
<Option key={`challenge_menu_option-${index}`} as='button' <Option key={`challenge_menu_option-${index}`} as='button'
active={index === props.section}
onClick={() => props.setSection(index)}> onClick={() => props.setSection(index)}>
<H3 textTransform='uppercase'> <H3 textTransform='uppercase'>
{option} {option}

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

@ -50,10 +50,10 @@ const MobileNavMenu = (props) => {
<TransBack transition='transform' alignmentX='flex-start' top='42px' <TransBack transition='transform' alignmentX='flex-start' top='42px'
translateY={props.translateY} onClick={props.toggleNavMenu}> translateY={props.translateY} onClick={props.toggleNavMenu}>
<MobileNavMenuStyle as='ul'> <MobileNavMenuStyle as='ul'>
<FlexRow as={Link} to='/' gap='16px'> <FlexRow as={Link} to={CHALLENGES_PAGE} gap='16px'>
<Svg width='16px' height='16px' src={loginIco}/> <Svg width='16px' height='16px' src={cupIco}/>
<Menu as='li'> <Menu as='li'>
Sign in Challenges
</Menu> </Menu>
</FlexRow> </FlexRow>
<FlexRow as={Link} to='/' gap='16px'> <FlexRow as={Link} to='/' gap='16px'>
@ -62,10 +62,10 @@ const MobileNavMenu = (props) => {
Register Register
</Menu> </Menu>
</FlexRow> </FlexRow>
<FlexRow as={Link} to={CHALLENGES_PAGE} gap='16px'> <FlexRow as={Link} to='/' gap='16px'>
<Svg width='16px' height='16px' src={cupIco}/> <Svg width='16px' height='16px' src={loginIco}/>
<Menu as='li'> <Menu as='li'>
Challenges Sign in
</Menu> </Menu>
</FlexRow> </FlexRow>
</MobileNavMenuStyle> </MobileNavMenuStyle>

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

@ -43,10 +43,10 @@ const NavBar = () => {
<Logo/> <Logo/>
<MenuButton as='button' onClick={toggleNavMenu}/> <MenuButton as='button' onClick={toggleNavMenu}/>
<FlexRow as='ul' className='ul-desktop' gap='32px'> <FlexRow as='ul' className='ul-desktop' gap='32px'>
<FlexRow as={Link} to='/' gap='16px'> <FlexRow as={Link} to={CHALLENGES_PAGE} gap='16px'>
<Svg width='16px' height='16px' src={loginIco}/> <Svg width='16px' height='16px' src={cupIco}/>
<Menu as='li'> <Menu as='li'>
Sign in Challenges
</Menu> </Menu>
</FlexRow> </FlexRow>
<FlexRow as={Link} to='/' gap='16px'> <FlexRow as={Link} to='/' gap='16px'>
@ -55,10 +55,10 @@ const NavBar = () => {
Register Register
</Menu> </Menu>
</FlexRow> </FlexRow>
<FlexRow as={Link} to={CHALLENGES_PAGE} gap='16px'> <FlexRow as={Link} to='/' gap='16px'>
<Svg width='16px' height='16px' src={cupIco}/> <Svg width='16px' height='16px' src={loginIco}/>
<Menu as='li'> <Menu as='li'>
Challenges Sign in
</Menu> </Menu>
</FlexRow> </FlexRow>
</FlexRow> </FlexRow>

4
src/pages/Challenge.js
View File

@ -18,7 +18,7 @@ import textIco from "../assets/text_ico.svg";
const Challenge = () => { const Challenge = () => {
const challengeName = useParams().challengeId; const challengeName = useParams().challengeId;
const [challenges, setChallenges] = React.useState([]); const [challenges, setChallenges] = React.useState([]);
const [section, setSection] = React.useState([0]); const [section, setSection] = React.useState(0);
React.useEffect(() => { React.useEffect(() => {
getChallenges(setChallenges); getChallenges(setChallenges);
@ -67,7 +67,7 @@ const Challenge = () => {
const desktopRender = () => { const desktopRender = () => {
return ( return (
<> <>
<DesktopChallengeMenu setSection={setSection}/> <DesktopChallengeMenu setSection={setSection} section={section}/>
<FlexColumn minHeight='100vh' alignmentY='flex-start' padding='64px 0 64px 310px'> <FlexColumn minHeight='100vh' alignmentY='flex-start' padding='64px 0 64px 310px'>
<FlexRow gap='32px' margin='0 0 32px 0' padding='16px'> <FlexRow gap='32px' margin='0 0 32px 0' padding='16px'>
<FlexColumn alignmentX='flex-start' gap='24px' maxWidth='500px'> <FlexColumn alignmentX='flex-start' gap='24px' maxWidth='500px'>