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

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

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

4
src/utils/containers.js
View File

@ -62,9 +62,9 @@ const TransBack = styled(FlexRow)`
left: ${({left}) => left ? left : '0'}; left: ${({left}) => left ? left : '0'};
width: 100%; width: 100%;
height: 100vh; 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'}; background-color: ${({backgroundColor}) => backgroundColor ? backgroundColor : 'transparent'};
z-index: 2; z-index: 4;
`; `;
const ImageBackground = styled(FlexColumn)` const ImageBackground = styled(FlexColumn)`