Update navbar component

src/components/Navbar/index.tsx

@@ -5,32 +5,33 @@ 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'
-            ? [
+        items={[
           {
             icon: <Settings />,
             label: 'Settings',
@@ -46,19 +47,7 @@ const Navbar = ({ withSidebar }: NavbarProps) => {
             },
             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 }) =>
-    withSidebar ? '15px 45px 15px 120px' : '15px 45px'};
+  padding: 15px 45px 15px 120px;
   user-select: none;
   position: sticky;
   top: 0;