From 77ac7a0f1600679a5768abbc55ccbf6831dd9f40 Mon Sep 17 00:00:00 2001
From: mattyl006 <mattyl@st.amu.edu.pl>
Date: Tue, 30 Aug 2022 14:48:08 +0200
Subject: [PATCH] LoggedBar component

---
 src/App.js                               | 12 ++++-
 src/assets/user_ico.svg                  |  3 ++
 src/components/elements/LoggedBar.js     | 62 ++++++++++++++++++++++++
 src/components/elements/NavBar/NavBar.js | 11 ++---
 4 files changed, 80 insertions(+), 8 deletions(-)
 create mode 100644 src/assets/user_ico.svg
 create mode 100644 src/components/elements/LoggedBar.js

diff --git a/src/App.js b/src/App.js
index d5a32e8..d8e5416 100644
--- a/src/App.js
+++ b/src/App.js
@@ -12,12 +12,22 @@ import Login from './pages/auth/Login';
 import LoginWithEmail from './pages/auth/LoginWithEmail';
 import RegisterWithEmail from './pages/auth/RegisterWithEmail';
 import KeyCloakService from './services/KeyCloakService';
+import React from 'react';
+import LoggedBar from './components/elements/LoggedBar';
 
 const App = () => {
+    const [loggedBarVisible, setLoggedBarVisible] = React.useState(false);
+
+    const loggedBarVisibleHandler = () => {
+        let newLoggedBarVisible = !loggedBarVisible;
+        setLoggedBarVisible(newLoggedBarVisible);
+    };
+
     return (
         <BrowserRouter>
             <ThemeProvider theme={theme}>
-                <NavBar/>
+                <NavBar loggedBarVisibleHandler={loggedBarVisibleHandler}/>
+                <LoggedBar visible={loggedBarVisible} username={KeyCloakService.getUsername()}/>
                 <Routes>
                     <Route path='/register-email' element={<RegisterWithEmail/>}/>
                     <Route path='/login-email' element={<LoginWithEmail/>}/>
diff --git a/src/assets/user_ico.svg b/src/assets/user_ico.svg
new file mode 100644
index 0000000..a784ff0
--- /dev/null
+++ b/src/assets/user_ico.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.28592 12.0007C4.23252 12.0007 5.98268 11.2819 7.23279 10.1412C8.30431 13.5164 11.8046 16.0009 16.005 16.0009C21.059 16.0009 25.0844 12.4226 25.0844 8.00047C25.0844 3.57833 20.9947 0 16.005 0C12.4061 0 9.31655 1.83636 7.8257 4.48464C6.57916 2.98455 4.57184 2.00012 2.28592 2.00012C2.28592 4.08586 3.50888 5.92222 5.36691 7.00041C3.5096 8.08172 2.28592 9.91308 2.28592 12.0007ZM12.5726 6.00035H19.366C20.6947 6.00035 21.7162 6.89415 21.7162 8.00047H10.2866C10.2866 6.89415 11.3082 6.00035 12.5726 6.00035ZM21.8448 19.1824L16.0014 26.0015L10.158 19.1824C4.38325 20.1012 0 24.5139 0 29.833C0 31.0293 1.10867 32 2.47594 32H29.5241C30.8913 32 32 31.0299 32 29.833C32.0029 24.5139 27.6167 20.1012 21.8448 19.1824Z" fill="#343434"/>
+</svg>
diff --git a/src/components/elements/LoggedBar.js b/src/components/elements/LoggedBar.js
new file mode 100644
index 0000000..2fcac1c
--- /dev/null
+++ b/src/components/elements/LoggedBar.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import {Container, FlexColumn, FlexRow, Svg} from '../../utils/containers';
+import {Body, H3} from '../../utils/fonts';
+import theme from '../../utils/theme';
+import userIco from '../../assets/user_ico.svg';
+import KeyCloakService from '../../services/KeyCloakService';
+import loginIco from '../../assets/login_ico.svg';
+import styled from 'styled-components';
+
+const LoggedBarStyle = styled(FlexColumn)`
+  width: 260px;
+  height: calc(100vh - 48px);
+  position: fixed;
+  top: 48px;
+  right: 0;
+  align-items: flex-start;
+  justify-content: flex-start;
+  background-color: ${({theme}) => theme.colors.white};
+  box-shadow: ${({theme}) => theme.shadow};
+  z-index: 3;
+
+  button {
+    cursor: pointer;
+
+    * {
+      cursor: pointer;
+    }
+  }
+`;
+
+const LoggedBar = (props) => {
+    if (props.visible) {
+        return (
+            <LoggedBarStyle>
+                <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'/>
+                    <H3>
+                        {props.username}
+                    </H3>
+                </FlexRow>
+                <Container width='90%' backgroundColor={theme.colors.dark05} height='1px'/>
+                <FlexColumn as='ul' gap='24px' padding='32px 24px' alignmentX='flex-start'>
+                    <FlexRow as='button' gap='16px'>
+                        <Svg width='16px' height='16px' src={userIco} size='cover'/>
+                        <Body as='li'>
+                            Profile
+                        </Body>
+                    </FlexRow>
+                    <FlexRow as='button' onClick={KeyCloakService.doLogout} gap='16px'>
+                        <Svg width='16px' height='16px' src={loginIco} rotate='180deg'/>
+                        <Body as='li'>
+                            Sign out
+                        </Body>
+                    </FlexRow>
+                </FlexColumn>
+            </LoggedBarStyle>
+        );
+    }
+};
+
+export default LoggedBar;
\ No newline at end of file
diff --git a/src/components/elements/NavBar/NavBar.js b/src/components/elements/NavBar/NavBar.js
index a6215eb..de7929d 100644
--- a/src/components/elements/NavBar/NavBar.js
+++ b/src/components/elements/NavBar/NavBar.js
@@ -6,6 +6,7 @@ import menuButtonIcon from '../../../assets/menu-button.svg';
 import MobileNavMenu from '../MobileNavMenu';
 import {Link} from 'react-router-dom';
 import loginIco from '../../../assets/login_ico.svg';
+import userIco from '../../../assets/user_ico.svg';
 import {Menu} from '../../../utils/fonts';
 import registerIco from '../../../assets/register_ico.svg';
 import {CHALLENGES_PAGE} from '../../../utils/globals';
@@ -28,7 +29,7 @@ const MenuButton = styled(Container)`
   }
 `;
 
-const NavBar = () => {
+const NavBar = (props) => {
     const [navMenuTranslateY, setNavMenuTranslateY] = React.useState('calc(-100vh - 42px)');
 
     const toggleNavMenu = () => {
@@ -58,12 +59,8 @@ const NavBar = () => {
                             </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> :
+                        <Svg as='button' onClick={props.loggedBarVisibleHandler}
+                             width='32px' height='32px' src={userIco} margin='0 16px 0 0'/> :
                         <FlexRow as='button' onClick={KeyCloakService.doLogin} gap='16px'>
                             <Svg width='16px' height='16px' src={loginIco}/>
                             <Menu as='li'>