Add navbar component

src/components/Navbar/index.tsx

@@ -0,0 +1,62 @@
+import { useReactiveVar } from '@apollo/client';
+import { useHistory } from 'react-router';
+import { roleVar, tokenVar, userVar } from '../../graphql/state';
+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 user = useReactiveVar(userVar);
+  const role = useReactiveVar(roleVar);
+  const history = useHistory();
+
+  return (
+    <Wrapper color={role} withSidebar={withSidebar}>
+      <Link href='/client'>
+        <Logo />
+      </Link>
+      <div className='menu'></div>
+      <div className='user' id='user'>
+        <Avatar text='H' color={role} />
+        <Text variant='body' weight='bold'>
+          {user?.firstName} {user?.lastName}
+        </Text>
+      </div>
+      <Menu
+        component='user'
+        items={
+          role !== 'admin'
+            ? [
+                { icon: <Settings />, label: 'Settings', action: () => {} },
+                {
+                  icon: <Logout />,
+                  label: 'Logout',
+                  action: () => {
+                    tokenVar(undefined);
+                    history.push('/login');
+                  },
+                  avoid: true,
+                },
+              ]
+            : [
+                {
+                  icon: <Logout />,
+                  label: 'Logout',
+                  action: () => {
+                    tokenVar(undefined);
+                    history.push('/login');
+                  },
+                  avoid: true,
+                },
+              ]
+        }
+      />
+    </Wrapper>
+  );
+};
+
+export default Navbar;

src/components/Navbar/styles.ts

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+
+type WrapperProps = {
+  color?: 'client' | 'productOwner' | 'developer' | 'admin';
+  withSidebar: boolean;
+};
+
+export const Wrapper = styled.div<WrapperProps>`
+  background: ${({ theme }) => theme.colors.white.main};
+  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.25);
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  padding: ${({ withSidebar }) =>
+    withSidebar ? '15px 45px 15px 120px' : '15px 45px'};
+  user-select: none;
+  position: sticky;
+  top: 0;
+
+  svg {
+    display: flex;
+    align-items: center;
+  }
+
+  .logo-icon {
+    fill: ${({ theme, color }) =>
+      color ? theme.colors[color].main : theme.colors.client.main};
+  }
+
+  .user {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    p {
+      margin-left: 5px;
+    }
+  }
+`;