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

Mobile menu when login and LoggedBar items hover

Browse Source
This commit is contained in:
mattyl006 2022-08-31 11:46:17 +02:00
parent 42d958a753
commit 25a6a8060e
3 changed files with 41 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/elements/LoggedBar.js
View File

@ -22,6 +22,24 @@ const LoggedBarStyle = styled(FlexColumn)`
button {
cursor: pointer;
li {
transition: color 0.3s ease-in-out;
}
div {
transition: background-color 0.3s ease-in-out;
}
&:hover {
li {
color: ${({theme}) => theme.colors.green};
}
div {
background-color: ${({theme}) => theme.colors.green};
}
}
* {
cursor: pointer;
}

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

@ -2,6 +2,7 @@ import React from 'react';
import {FlexColumn, FlexRow, Svg, TransBack} from '../../utils/containers';
import {Menu} from '../../utils/fonts';
import loginIco from '../../assets/login_ico.svg';
import userIco from '../../assets/user_ico.svg';
import registerIco from '../../assets/register_ico.svg';
import cupIco from '../../assets/cup_ico.svg';
import styled from 'styled-components';
@ -66,12 +67,20 @@ const MobileNavMenu = (props) => {
</Menu>
</FlexRow> : ''}
{KeyCloakService.isLoggedIn() ?
<>
<FlexRow as='button' gap='16px'>
<Svg width='16px' height='16px' src={userIco} size='cover'/>
<Menu as='li'>
Profile
</Menu>
</FlexRow>
<FlexRow as='button' onClick={KeyCloakService.doLogout} gap='16px'>
<Svg width='16px' height='16px' src={loginIco} rotate='180deg'/>
<Menu as='li'>
Sign out
</Menu>
</FlexRow> :
</FlexRow>
</> :
<FlexRow as='button' onClick={KeyCloakService.doLogin} gap='16px'>
<Svg width='16px' height='16px' src={loginIco}/>
<Menu as='li'>

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

@ -13,6 +13,8 @@ import {CHALLENGES_PAGE} from '../../../utils/globals';
import cupIco from '../../../assets/cup_ico.svg';
import NavBarStyle from './NavBarStyle';
import KeyCloakService from '../../../services/KeyCloakService';
import Media from 'react-media';
import theme from '../../../utils/theme';
const MenuButton = styled(Container)`
width: 20px;
@ -43,7 +45,12 @@ const NavBar = (props) => {
<NavBarStyle as='header'>
<FlexRow height='100%' alignmentX='space-between' as='nav'>
<Logo/>
<MenuButton as='button' onClick={toggleNavMenu}/>
{KeyCloakService.isLoggedIn() ?
<Media query={theme.mobile}>
<Svg as='button' width='20px' onClick={toggleNavMenu}
height='20px' src={userIco} size='cover' cursor='pointer'/>
</Media> :
<MenuButton as='button' onClick={toggleNavMenu}/>}
<FlexRow as='ul' className='ul-desktop' gap='32px'>
<FlexRow as={Link} to={CHALLENGES_PAGE} gap='16px'>
<Svg width='16px' height='16px' src={cupIco}/>