Mobile menu when login and LoggedBar items hover

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;
     }

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' 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>
+                    </> :
                     <FlexRow as='button' onClick={KeyCloakService.doLogin} gap='16px'>
                         <Svg width='16px' height='16px' src={loginIco}/>
                         <Menu as='li'>

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}/>