diff --git a/src/App.js b/src/App.js index d8e5416..8bccc50 100644 --- a/src/App.js +++ b/src/App.js @@ -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 ( - + }/> }/> diff --git a/src/components/elements/LoggedBar.js b/src/components/elements/LoggedBar.js index 2fcac1c..2103ceb 100644 --- a/src/components/elements/LoggedBar.js +++ b/src/components/elements/LoggedBar.js @@ -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 ( + @@ -47,7 +48,7 @@ const LoggedBar = (props) => { Profile - + Sign out @@ -55,8 +56,8 @@ const LoggedBar = (props) => { - ); - } + + ); }; export default LoggedBar; \ No newline at end of file diff --git a/src/utils/containers.js b/src/utils/containers.js index 966c0e7..ee5d478 100644 --- a/src/utils/containers.js +++ b/src/utils/containers.js @@ -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)`