LoggedBar component
This commit is contained in:
parent
fa1e58ecf0
commit
77ac7a0f16
12
src/App.js
12
src/App.js
@ -12,12 +12,22 @@ import Login from './pages/auth/Login';
|
||||
import LoginWithEmail from './pages/auth/LoginWithEmail';
|
||||
import RegisterWithEmail from './pages/auth/RegisterWithEmail';
|
||||
import KeyCloakService from './services/KeyCloakService';
|
||||
import React from 'react';
|
||||
import LoggedBar from './components/elements/LoggedBar';
|
||||
|
||||
const App = () => {
|
||||
const [loggedBarVisible, setLoggedBarVisible] = React.useState(false);
|
||||
|
||||
const loggedBarVisibleHandler = () => {
|
||||
let newLoggedBarVisible = !loggedBarVisible;
|
||||
setLoggedBarVisible(newLoggedBarVisible);
|
||||
};
|
||||
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<ThemeProvider theme={theme}>
|
||||
<NavBar/>
|
||||
<NavBar loggedBarVisibleHandler={loggedBarVisibleHandler}/>
|
||||
<LoggedBar visible={loggedBarVisible} username={KeyCloakService.getUsername()}/>
|
||||
<Routes>
|
||||
<Route path='/register-email' element={<RegisterWithEmail/>}/>
|
||||
<Route path='/login-email' element={<LoginWithEmail/>}/>
|
||||
|
||||
3
src/assets/user_ico.svg
Normal file
3
src/assets/user_ico.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.28592 12.0007C4.23252 12.0007 5.98268 11.2819 7.23279 10.1412C8.30431 13.5164 11.8046 16.0009 16.005 16.0009C21.059 16.0009 25.0844 12.4226 25.0844 8.00047C25.0844 3.57833 20.9947 0 16.005 0C12.4061 0 9.31655 1.83636 7.8257 4.48464C6.57916 2.98455 4.57184 2.00012 2.28592 2.00012C2.28592 4.08586 3.50888 5.92222 5.36691 7.00041C3.5096 8.08172 2.28592 9.91308 2.28592 12.0007ZM12.5726 6.00035H19.366C20.6947 6.00035 21.7162 6.89415 21.7162 8.00047H10.2866C10.2866 6.89415 11.3082 6.00035 12.5726 6.00035ZM21.8448 19.1824L16.0014 26.0015L10.158 19.1824C4.38325 20.1012 0 24.5139 0 29.833C0 31.0293 1.10867 32 2.47594 32H29.5241C30.8913 32 32 31.0299 32 29.833C32.0029 24.5139 27.6167 20.1012 21.8448 19.1824Z" fill="#343434"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 840 B |
62
src/components/elements/LoggedBar.js
Normal file
62
src/components/elements/LoggedBar.js
Normal file
@ -0,0 +1,62 @@
|
||||
import React from 'react';
|
||||
import {Container, FlexColumn, FlexRow, Svg} from '../../utils/containers';
|
||||
import {Body, H3} from '../../utils/fonts';
|
||||
import theme from '../../utils/theme';
|
||||
import userIco from '../../assets/user_ico.svg';
|
||||
import KeyCloakService from '../../services/KeyCloakService';
|
||||
import loginIco from '../../assets/login_ico.svg';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const LoggedBarStyle = styled(FlexColumn)`
|
||||
width: 260px;
|
||||
height: calc(100vh - 48px);
|
||||
position: fixed;
|
||||
top: 48px;
|
||||
right: 0;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
background-color: ${({theme}) => theme.colors.white};
|
||||
box-shadow: ${({theme}) => theme.shadow};
|
||||
z-index: 3;
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
|
||||
* {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const LoggedBar = (props) => {
|
||||
if (props.visible) {
|
||||
return (
|
||||
<LoggedBarStyle>
|
||||
<FlexRow alignmentX='flex-start' alignmentY='flex-end'
|
||||
gap='16px' width='100%' padding='12px 16px'>
|
||||
<Svg src={userIco} width='32px' height='32px' backgroundColor={theme.colors.dark} size='cover'/>
|
||||
<H3>
|
||||
{props.username}
|
||||
</H3>
|
||||
</FlexRow>
|
||||
<Container width='90%' backgroundColor={theme.colors.dark05} height='1px'/>
|
||||
<FlexColumn as='ul' gap='24px' padding='32px 24px' alignmentX='flex-start'>
|
||||
<FlexRow as='button' gap='16px'>
|
||||
<Svg width='16px' height='16px' src={userIco} size='cover'/>
|
||||
<Body as='li'>
|
||||
Profile
|
||||
</Body>
|
||||
</FlexRow>
|
||||
<FlexRow as='button' onClick={KeyCloakService.doLogout} gap='16px'>
|
||||
<Svg width='16px' height='16px' src={loginIco} rotate='180deg'/>
|
||||
<Body as='li'>
|
||||
Sign out
|
||||
</Body>
|
||||
</FlexRow>
|
||||
</FlexColumn>
|
||||
</LoggedBarStyle>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default LoggedBar;
|
||||
@ -6,6 +6,7 @@ import menuButtonIcon from '../../../assets/menu-button.svg';
|
||||
import MobileNavMenu from '../MobileNavMenu';
|
||||
import {Link} from 'react-router-dom';
|
||||
import loginIco from '../../../assets/login_ico.svg';
|
||||
import userIco from '../../../assets/user_ico.svg';
|
||||
import {Menu} from '../../../utils/fonts';
|
||||
import registerIco from '../../../assets/register_ico.svg';
|
||||
import {CHALLENGES_PAGE} from '../../../utils/globals';
|
||||
@ -28,7 +29,7 @@ const MenuButton = styled(Container)`
|
||||
}
|
||||
`;
|
||||
|
||||
const NavBar = () => {
|
||||
const NavBar = (props) => {
|
||||
const [navMenuTranslateY, setNavMenuTranslateY] = React.useState('calc(-100vh - 42px)');
|
||||
|
||||
const toggleNavMenu = () => {
|
||||
@ -58,12 +59,8 @@ const NavBar = () => {
|
||||
</Menu>
|
||||
</FlexRow> : ''}
|
||||
{KeyCloakService.isLoggedIn() ?
|
||||
<FlexRow as='button' onClick={KeyCloakService.doLogout} gap='16px'>
|
||||
<Svg width='16px' height='16px' src={loginIco} rotate='180deg'/>
|
||||
<Menu as='li'>
|
||||
Sign out
|
||||
</Menu>
|
||||
</FlexRow> :
|
||||
<Svg as='button' onClick={props.loggedBarVisibleHandler}
|
||||
width='32px' height='32px' src={userIco} margin='0 16px 0 0'/> :
|
||||
<FlexRow as='button' onClick={KeyCloakService.doLogin} gap='16px'>
|
||||
<Svg width='16px' height='16px' src={loginIco}/>
|
||||
<Menu as='li'>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user