From e428255bd452b29222e2df9850f59d7a96f81857 Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Thu, 6 May 2021 01:44:02 +0100
Subject: [PATCH] Update navbar component

---
 src/components/Navbar/index.tsx | 32 +++++++++++++++++++++++++++++++-
 src/components/Navbar/styles.ts | 13 +++++++++++--
 2 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 5a40ea7..51cd78d 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -1,5 +1,5 @@
 import { useReactiveVar } from '@apollo/client';
-import { useHistory } from 'react-router';
+import { useHistory, useLocation } from 'react-router';
 import { roleVar, tokenVar, userVar } from '../../graphql/state';
 import { Wrapper } from './styles';
 import { Avatar, Link, Menu, Text } from '..';
@@ -9,12 +9,42 @@ const Navbar = () => {
   const user = useReactiveVar(userVar);
   const role = useReactiveVar(roleVar);
   const history = useHistory();
+  const location = useLocation();
 
   return (
     <Wrapper color={role}>
       <Link href='/'>
         <Logo />
       </Link>
+      <nav>
+        {role === 'admin' && (
+          <>
+            <Link
+              href='/clients'
+              color={location.pathname === '/clients' ? 'admin' : 'black'}
+              selected={location.pathname === '/clients'}
+            >
+              Clients
+            </Link>
+            <Link
+              href='/product-owners'
+              color={
+                location.pathname === '/product-owners' ? 'admin' : 'black'
+              }
+              selected={location.pathname === '/product-owners'}
+            >
+              Product Owners
+            </Link>
+            <Link
+              href='/developers'
+              color={location.pathname === '/developers' ? 'admin' : 'black'}
+              selected={location.pathname === '/developers'}
+            >
+              Developers
+            </Link>
+          </>
+        )}
+      </nav>
       <div className='menu'></div>
       <div className='user' id='user'>
         <Avatar
diff --git a/src/components/Navbar/styles.ts b/src/components/Navbar/styles.ts
index 4a868f1..45ad407 100644
--- a/src/components/Navbar/styles.ts
+++ b/src/components/Navbar/styles.ts
@@ -7,8 +7,8 @@ type WrapperProps = {
 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;
+  display: flex;
+  flex-direction: row;
   align-items: center;
   padding: 15px 45px 15px 120px;
   user-select: none;
@@ -26,6 +26,15 @@ export const Wrapper = styled.div<WrapperProps>`
       color ? theme.colors[color].main : theme.colors.client.main};
   }
 
+  nav {
+    flex-grow: 1;
+    margin-left: 60px;
+    display: grid;
+    grid-template-columns: repeat(3, auto);
+    column-gap: 20px;
+    justify-content: flex-start;
+  }
+
   .user {
     display: flex;
     flex-direction: row;