menu hiding correction

src/App.js

@@ -17,18 +17,28 @@ import LoggedBar from './components/elements/LoggedBar';
 
 const App = () => {
     const [loggedBarVisible, setLoggedBarVisible] = React.useState('100vw');
+    const [loggedBarHover, setLoggedBarHover] = React.useState(false);
 
     const loggedBarVisibleHandler = () => {
-        if (loggedBarVisible === '0')
+        if (loggedBarVisible === '0' && !loggedBarHover)
             setLoggedBarVisible('100vw');
         else setLoggedBarVisible('0');
     };
 
+    const loggedBarHoverTrue = () => {
+        setLoggedBarHover(true);
+    };
+
+    const loggedBarHoverFalse = () => {
+        setLoggedBarHover(false);
+    };
+
     return (
         <BrowserRouter>
             <ThemeProvider theme={theme}>
                 <NavBar loggedBarVisibleHandler={loggedBarVisibleHandler}/>
                 <LoggedBar visible={loggedBarVisible} loggedBarVisibleHandler={loggedBarVisibleHandler}
+                           loggedBarHoverTrue={loggedBarHoverTrue} loggedBarHoverFalse={loggedBarHoverFalse}
                            username={KeyCloakService.getUsername()}/>
                 <Routes>
                     <Route path='/register-email' element={<RegisterWithEmail/>}/>

src/components/elements/LoggedBar.js

@@ -50,7 +50,8 @@ const LoggedBar = (props) => {
     return (
         <TransBack transition='transform' translateX={props.visible}
                    onClick={props.loggedBarVisibleHandler} animTime='0.2s'>
-            <LoggedBarStyle>
+            <LoggedBarStyle onMouseEnter={props.loggedBarHoverTrue}
+                            onMouseLeave={props.loggedBarHoverFalse}>
                 <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'/>

src/components/elements/MobileNavMenu.js

@@ -52,7 +52,8 @@ const MobileNavMenu = (props) => {
     return (
         <TransBack transition='transform' alignmentX='flex-start' top='42px'
                    translateY={props.translateY} onClick={props.toggleNavMenu}>
-            <MobileNavMenuStyle as='ul'>
+            <MobileNavMenuStyle as='ul' onMouseEnter={props.mobileMenuHoverTrue}
+                                onMouseLeave={props.mobileMenuHoverFalse}>
                 <FlexRow as={Link} to={CHALLENGES_PAGE} gap='16px'>
                     <Svg width='16px' height='16px' src={cupIco}/>
                     <Menu as='li'>

src/components/elements/NavBar/NavBar.js

@@ -33,11 +33,20 @@ const MenuButton = styled(Container)`
 
 const NavBar = (props) => {
     const [navMenuTranslateY, setNavMenuTranslateY] = React.useState('calc(-100vh - 42px)');
+    const [mobileMenuHover, setMobileMenuHover] = React.useState(false);
+
+    const mobileMenuHoverTrue = () => {
+        setMobileMenuHover(true);
+    };
+
+    const mobileMenuHoverFalse = () => {
+        setMobileMenuHover(false);
+    };
 
     const toggleNavMenu = () => {
-        if (navMenuTranslateY === 'calc(-100vh - 42px)')
+        if ((navMenuTranslateY === 'calc(-100vh - 42px)'))
             setNavMenuTranslateY('0');
-        else
+        else if (!mobileMenuHover)
             setNavMenuTranslateY('calc(-100vh - 42px)');
     };
 
@@ -76,7 +85,8 @@ const NavBar = (props) => {
                         </FlexRow>}
                 </FlexRow>
             </FlexRow>
-            <MobileNavMenu translateY={navMenuTranslateY} toggleNavMenu={toggleNavMenu}/>
+            <MobileNavMenu mobileMenuHoverTrue={mobileMenuHoverTrue} mobileMenuHoverFalse={mobileMenuHoverFalse}
+                           translateY={navMenuTranslateY} toggleNavMenu={toggleNavMenu}/>
         </NavBarStyle>
     );
 };

src/services/KeyCloakService.js

@@ -1,17 +1,17 @@
 import Keycloak from 'keycloak-js';
 
-// const _kc = new Keycloak({
-//     url: 'https://auth-dev.csi.wmi.amu.edu.pl/',
-//     realm: 'gonito-dev',
-//     clientId: 'gonito-dev-localhost'
-// });
-
 const _kc = new Keycloak({
     url: 'https://auth-dev.csi.wmi.amu.edu.pl/',
     realm: 'gonito-dev',
-    clientId: 'gonito-dev-heroku'
+    clientId: 'gonito-dev-localhost'
 });
 
+// const _kc = new Keycloak({
+//     url: 'https://auth-dev.csi.wmi.amu.edu.pl/',
+//     realm: 'gonito-dev',
+//     clientId: 'gonito-dev-heroku'
+// });
+
 // const _kc = new Keycloak({
 //     url: 'http://0.0.0.0:8080',
 //     realm: 'test',