Update navbar component

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 = {
+const Navbar = () => {
-  withSidebar: boolean;
-};
-
-const Navbar = ({ withSidebar }: NavbarProps) => {
   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={
+        items={[
-          role !== 'admin'
+          {
-            ? [
+            icon: <Settings />,
-                {
+            label: 'Settings',
-                  icon: <Settings />,
+            action: () => history.push('/settings'),
-                  label: 'Settings',
+          },
-                  action: () => history.push('/settings'),
+          {
-                },
+            icon: <Logout />,
-                {
+            label: 'Logout',
-                  icon: <Logout />,
+            action: () => {
-                  label: 'Logout',
+              tokenVar(undefined);
-                  action: () => {
+              localStorage.removeItem('token');
-                    tokenVar(undefined);
+              history.push('/login');
-                    localStorage.removeItem('token');
+            },
-                    history.push('/login');
+            avoid: true,
-                  },
+          },
-                  avoid: true,
+        ]}
-                },
-              ]
-            : [
-                {
-                  icon: <Logout />,
-                  label: 'Logout',
-                  action: () => {
-                    tokenVar(undefined);
-                    history.push('/login');
-                  },
-                  avoid: true,
-                },
-              ]
-        }
       />
     </Wrapper>
   );

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 }) =>
+  padding: 15px 45px 15px 120px;
-    withSidebar ? '15px 45px 15px 120px' : '15px 45px'};
   user-select: none;
   position: sticky;
   top: 0;