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

correct init and LoggedBar animation

Browse Source
This commit is contained in:
mattyl006 2022-08-31 11:02:28 +02:00
parent 77ac7a0f16
commit 42d958a753
3 changed files with 16 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/App.js
View File

@ -16,18 +16,20 @@ import React from 'react';
import LoggedBar from './components/elements/LoggedBar';
const App = () => {
const [loggedBarVisible, setLoggedBarVisible] = React.useState(false);
const [loggedBarVisible, setLoggedBarVisible] = React.useState('100vw');
const loggedBarVisibleHandler = () => {
let newLoggedBarVisible = !loggedBarVisible;
setLoggedBarVisible(newLoggedBarVisible);
if (loggedBarVisible === '0')
setLoggedBarVisible('100vw');
else setLoggedBarVisible('0');
};
return (
<BrowserRouter>
<ThemeProvider theme={theme}>
<NavBar loggedBarVisibleHandler={loggedBarVisibleHandler}/>
<LoggedBar visible={loggedBarVisible} username={KeyCloakService.getUsername()}/>
<LoggedBar visible={loggedBarVisible} loggedBarVisibleHandler={loggedBarVisibleHandler}
username={KeyCloakService.getUsername()}/>
<Routes>
<Route path='/register-email' element={<RegisterWithEmail/>}/>
<Route path='/login-email' element={<LoginWithEmail/>}/>

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

@ -1,5 +1,5 @@
import React from 'react';
import {Container, FlexColumn, FlexRow, Svg} from '../../utils/containers';
import {Container, FlexColumn, FlexRow, Svg, TransBack} from '../../utils/containers';
import {Body, H3} from '../../utils/fonts';
import theme from '../../utils/theme';
import userIco from '../../assets/user_ico.svg';
@ -11,7 +11,7 @@ const LoggedBarStyle = styled(FlexColumn)`
width: 260px;
height: calc(100vh - 48px);
position: fixed;
top: 48px;
top: 50px;
right: 0;
align-items: flex-start;
justify-content: flex-start;
@ -29,8 +29,9 @@ const LoggedBarStyle = styled(FlexColumn)`
`;
const LoggedBar = (props) => {
if (props.visible) {
return (
return (
<TransBack transition='transform' translateX={props.visible}
onClick={props.loggedBarVisibleHandler} animTime='0.5s'>
<LoggedBarStyle>
<FlexRow alignmentX='flex-start' alignmentY='flex-end'
gap='16px' width='100%' padding='12px 16px'>
@ -47,7 +48,7 @@ const LoggedBar = (props) => {
Profile
</Body>
</FlexRow>
<FlexRow as='button' onClick={KeyCloakService.doLogout} gap='16px'>
<FlexRow as='button' onClick={props.visible === '0' ? KeyCloakService.doLogout : null} gap='16px'>
<Svg width='16px' height='16px' src={loginIco} rotate='180deg'/>
<Body as='li'>
Sign out
@ -55,8 +56,8 @@ const LoggedBar = (props) => {
</FlexRow>
</FlexColumn>
</LoggedBarStyle>
);
}
</TransBack>
);
};
export default LoggedBar;

4
src/utils/containers.js
View File

@ -62,9 +62,9 @@ const TransBack = styled(FlexRow)`
left: ${({left}) => left ? left : '0'};
width: 100%;
height: 100vh;
transition: ${({transition}) => transition ? transition : 'opacity'} 0.3s ease-in-out;
transition: ${({transition}) => transition ? transition : 'opacity'} ${({animTime}) => animTime ? animTime : '0.3s'} ease-in-out;
background-color: ${({backgroundColor}) => backgroundColor ? backgroundColor : 'transparent'};
z-index: 2;
z-index: 4;
`;
const ImageBackground = styled(FlexColumn)`