From 25a6a8060e44fc87790af83174ecfd03011bff36 Mon Sep 17 00:00:00 2001
From: mattyl006 <mattyl@st.amu.edu.pl>
Date: Wed, 31 Aug 2022 11:46:17 +0200
Subject: [PATCH] Mobile menu when login and LoggedBar items hover

---
 src/components/elements/LoggedBar.js     | 18 ++++++++++++++++++
 src/components/elements/MobileNavMenu.js | 21 +++++++++++++++------
 src/components/elements/NavBar/NavBar.js |  9 ++++++++-
 3 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/src/components/elements/LoggedBar.js b/src/components/elements/LoggedBar.js
index 2103ceb..b6c7987 100644
--- a/src/components/elements/LoggedBar.js
+++ b/src/components/elements/LoggedBar.js
@@ -22,6 +22,24 @@ const LoggedBarStyle = styled(FlexColumn)`
   button {
     cursor: pointer;
 
+    li {
+      transition: color 0.3s ease-in-out;
+    }
+
+    div {
+      transition: background-color 0.3s ease-in-out;
+    }
+
+    &:hover {
+      li {
+        color: ${({theme}) => theme.colors.green};
+      }
+
+      div {
+        background-color: ${({theme}) => theme.colors.green};
+      }
+    }
+
     * {
       cursor: pointer;
     }
diff --git a/src/components/elements/MobileNavMenu.js b/src/components/elements/MobileNavMenu.js
index 389761a..27ebb24 100644
--- a/src/components/elements/MobileNavMenu.js
+++ b/src/components/elements/MobileNavMenu.js
@@ -2,6 +2,7 @@ import React from 'react';
 import {FlexColumn, FlexRow, Svg, TransBack} from '../../utils/containers';
 import {Menu} from '../../utils/fonts';
 import loginIco from '../../assets/login_ico.svg';
+import userIco from '../../assets/user_ico.svg';
 import registerIco from '../../assets/register_ico.svg';
 import cupIco from '../../assets/cup_ico.svg';
 import styled from 'styled-components';
@@ -66,12 +67,20 @@ const MobileNavMenu = (props) => {
                         </Menu>
                     </FlexRow> : ''}
                 {KeyCloakService.isLoggedIn() ?
-                    <FlexRow as='button' onClick={KeyCloakService.doLogout} gap='16px'>
-                        <Svg width='16px' height='16px' src={loginIco} rotate='180deg'/>
-                        <Menu as='li'>
-                            Sign out
-                        </Menu>
-                    </FlexRow> :
+                    <>
+                        <FlexRow as='button' gap='16px'>
+                            <Svg width='16px' height='16px' src={userIco} size='cover'/>
+                            <Menu as='li'>
+                                Profile
+                            </Menu>
+                        </FlexRow>
+                        <FlexRow as='button' onClick={KeyCloakService.doLogout} gap='16px'>
+                            <Svg width='16px' height='16px' src={loginIco} rotate='180deg'/>
+                            <Menu as='li'>
+                                Sign out
+                            </Menu>
+                        </FlexRow>
+                    </> :
                     <FlexRow as='button' onClick={KeyCloakService.doLogin} gap='16px'>
                         <Svg width='16px' height='16px' src={loginIco}/>
                         <Menu as='li'>
diff --git a/src/components/elements/NavBar/NavBar.js b/src/components/elements/NavBar/NavBar.js
index de7929d..1214f34 100644
--- a/src/components/elements/NavBar/NavBar.js
+++ b/src/components/elements/NavBar/NavBar.js
@@ -13,6 +13,8 @@ import {CHALLENGES_PAGE} from '../../../utils/globals';
 import cupIco from '../../../assets/cup_ico.svg';
 import NavBarStyle from './NavBarStyle';
 import KeyCloakService from '../../../services/KeyCloakService';
+import Media from 'react-media';
+import theme from '../../../utils/theme';
 
 const MenuButton = styled(Container)`
   width: 20px;
@@ -43,7 +45,12 @@ const NavBar = (props) => {
         <NavBarStyle as='header'>
             <FlexRow height='100%' alignmentX='space-between' as='nav'>
                 <Logo/>
-                <MenuButton as='button' onClick={toggleNavMenu}/>
+                {KeyCloakService.isLoggedIn() ?
+                    <Media query={theme.mobile}>
+                        <Svg as='button' width='20px' onClick={toggleNavMenu}
+                             height='20px' src={userIco} size='cover' cursor='pointer'/>
+                    </Media> :
+                    <MenuButton as='button' onClick={toggleNavMenu}/>}
                 <FlexRow as='ul' className='ul-desktop' gap='32px'>
                     <FlexRow as={Link} to={CHALLENGES_PAGE} gap='16px'>
                         <Svg width='16px' height='16px' src={cupIco}/>