From 8739df0bd7420cd41936f6c1a909e8ed30712c8f Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Sun, 2 May 2021 03:58:47 +0100
Subject: [PATCH] Update navbar component

---
 src/components/Navbar/index.tsx | 65 ++++++++++++++-------------------
 src/components/Navbar/styles.ts |  4 +-
 2 files changed, 28 insertions(+), 41 deletions(-)

diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 8fd9bec..5a40ea7 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -5,60 +5,49 @@ import { Wrapper } from './styles';
 import { Avatar, Link, Menu, Text } from '..';
 import { Settings, Logout, Logo } from '../../assets';
 
-type NavbarProps = {
-  withSidebar: boolean;
-};
-
-const Navbar = ({ withSidebar }: NavbarProps) => {
+const Navbar = () => {
   const user = useReactiveVar(userVar);
   const role = useReactiveVar(roleVar);
   const history = useHistory();
 
   return (
-    <Wrapper color={role} withSidebar={withSidebar}>
+    <Wrapper color={role}>
       <Link href='/'>
         <Logo />
       </Link>
       <div className='menu'></div>
       <div className='user' id='user'>
-        <Avatar text='H' color={role} />
+        <Avatar
+          text={
+            (user?.firstName && user?.firstName[0].toLocaleUpperCase()) ||
+            (role && role[0].toLocaleUpperCase()) ||
+            'C'
+          }
+          color={role}
+        />
         <Text variant='body' weight='bold'>
           {user?.firstName} {user?.lastName}
         </Text>
       </div>
       <Menu
         component='user'
-        items={
-          role !== 'admin'
-            ? [
-                {
-                  icon: <Settings />,
-                  label: 'Settings',
-                  action: () => history.push('/settings'),
-                },
-                {
-                  icon: <Logout />,
-                  label: 'Logout',
-                  action: () => {
-                    tokenVar(undefined);
-                    localStorage.removeItem('token');
-                    history.push('/login');
-                  },
-                  avoid: true,
-                },
-              ]
-            : [
-                {
-                  icon: <Logout />,
-                  label: 'Logout',
-                  action: () => {
-                    tokenVar(undefined);
-                    history.push('/login');
-                  },
-                  avoid: true,
-                },
-              ]
-        }
+        items={[
+          {
+            icon: <Settings />,
+            label: 'Settings',
+            action: () => history.push('/settings'),
+          },
+          {
+            icon: <Logout />,
+            label: 'Logout',
+            action: () => {
+              tokenVar(undefined);
+              localStorage.removeItem('token');
+              history.push('/login');
+            },
+            avoid: true,
+          },
+        ]}
       />
     </Wrapper>
   );
diff --git a/src/components/Navbar/styles.ts b/src/components/Navbar/styles.ts
index d7903f5..4a868f1 100644
--- a/src/components/Navbar/styles.ts
+++ b/src/components/Navbar/styles.ts
@@ -2,7 +2,6 @@ import styled from 'styled-components';
 
 type WrapperProps = {
   color?: 'client' | 'productOwner' | 'developer' | 'admin';
-  withSidebar: boolean;
 };
 
 export const Wrapper = styled.div<WrapperProps>`
@@ -11,8 +10,7 @@ export const Wrapper = styled.div<WrapperProps>`
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
-  padding: ${({ withSidebar }) =>
-    withSidebar ? '15px 45px 15px 120px' : '15px 45px'};
+  padding: 15px 45px 15px 120px;
   user-select: none;
   position: sticky;
   top: 0;