From aca15584d4b51e5d2e1c2c9fce75624ee54fc0e6 Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Wed, 12 May 2021 01:40:47 +0100
Subject: [PATCH] Update navbar component

---
 src/components/Navbar/index.tsx | 54 +++++++++++++++++++++++++++++++++
 src/components/Navbar/styles.ts |  2 +-
 2 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 51cd78d..076674e 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -44,6 +44,60 @@ const Navbar = () => {
             </Link>
           </>
         )}
+        {role === 'developer' && (
+          <>
+            <Link
+              href='/project'
+              color={location.pathname === '/project' ? 'developer' : 'black'}
+              selected={location.pathname === '/project'}
+            >
+              Projects
+            </Link>
+            <Link
+              href='/template'
+              color={location.pathname === '/template' ? 'developer' : 'black'}
+              selected={location.pathname === '/template'}
+            >
+              Templates
+            </Link>
+            <Link
+              href='/feature'
+              color={location.pathname === '/feature' ? 'developer' : 'black'}
+              selected={location.pathname === '/feature'}
+            >
+              Features
+            </Link>
+            <Link
+              href='/category'
+              color={location.pathname === '/category' ? 'developer' : 'black'}
+              selected={location.pathname === '/category'}
+            >
+              Categories
+            </Link>
+          </>
+        )}
+        {role === 'productOwner' && (
+          <>
+            <Link
+              href='/project'
+              color={
+                location.pathname === '/project' ? 'productOwner' : 'black'
+              }
+              selected={location.pathname === '/project'}
+            >
+              Projects
+            </Link>
+            <Link
+              href='/template'
+              color={
+                location.pathname === '/template' ? 'productOwner' : 'black'
+              }
+              selected={location.pathname === '/template'}
+            >
+              Templates
+            </Link>
+          </>
+        )}
       </nav>
       <div className='menu'></div>
       <div className='user' id='user'>
diff --git a/src/components/Navbar/styles.ts b/src/components/Navbar/styles.ts
index 45ad407..a2d1530 100644
--- a/src/components/Navbar/styles.ts
+++ b/src/components/Navbar/styles.ts
@@ -30,7 +30,7 @@ export const Wrapper = styled.div<WrapperProps>`
     flex-grow: 1;
     margin-left: 60px;
     display: grid;
-    grid-template-columns: repeat(3, auto);
+    grid-template-columns: repeat(4, auto);
     column-gap: 20px;
     justify-content: flex-start;
   }