correct init and LoggedBar animation
This commit is contained in:
parent
77ac7a0f16
commit
42d958a753
10
src/App.js
10
src/App.js
@ -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/>}/>
|
||||||
|
@ -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;
|
@ -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)`
|
||||||
|
Loading…
Reference in New Issue
Block a user