Update navbar component

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

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;