From 2e767da17d6c70eccbdfb3ce5e92cec7f01b75e8 Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Mon, 14 Jun 2021 02:20:46 +0100
Subject: [PATCH] Update sidebar component

---
 src/components/Sidebar/index.tsx | 44 +++++++++++++++++---------------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
index ceda1ff..7b83a6e 100644
--- a/src/components/Sidebar/index.tsx
+++ b/src/components/Sidebar/index.tsx
@@ -105,78 +105,82 @@ const Sidebar = () => {
         <>
           <Box display='flex' flexDirection='column'>
             {projects &&
-              projects.map((project) => (
+              projects.map((project, index) => (
                 <Box marginBottom='20px' key={project.id}>
                   <div id={`project-${project.id}`}>
                     <SidebarItem
                       color={role}
-                      selected={new RegExp(project.id, 'i').test(
-                        location.pathname
-                      )}
+                      selected={
+                        new RegExp(project.id, 'i').test(location.pathname) ||
+                        (index === 0 && location.pathname === '/project')
+                      }
                       text={project.name[0]}
                       onClick={() => history.push(`/project/${project.id}`)}
                     />
                   </div>
                   <ContextMenu
                     component={`project-${project.id}`}
-                    items={[{ action: () => {}, label: project.name }]}
+                    items={[{ label: project.name }]}
                   />
                 </Box>
               ))}
             {templates &&
-              templates.map((template) => (
+              templates.map((template, index) => (
                 <Box marginBottom='20px' key={template.id}>
                   <div id={`template-${template.id}`}>
                     <SidebarItem
                       color={role}
-                      selected={new RegExp(template.id, 'i').test(
-                        location.pathname
-                      )}
+                      selected={
+                        new RegExp(template.id, 'i').test(location.pathname) ||
+                        (index === 0 && location.pathname === '/template')
+                      }
                       text={template.name[0]}
                       onClick={() => history.push(`/template/${template.id}`)}
                     />
                   </div>
                   <ContextMenu
                     component={`template-${template.id}`}
-                    items={[{ action: () => {}, label: template.name }]}
+                    items={[{ label: template.name }]}
                   />
                 </Box>
               ))}
             {features &&
-              features.map((feature) => (
+              features.map((feature, index) => (
                 <Box marginBottom='20px' key={feature.id}>
                   <div id={`feature-${feature.id}`}>
                     <SidebarItem
                       color={role}
-                      selected={new RegExp(feature.id, 'i').test(
-                        location.pathname
-                      )}
+                      selected={
+                        new RegExp(feature.id, 'i').test(location.pathname) ||
+                        (index === 0 && location.pathname === '/feature')
+                      }
                       text={feature.name[0]}
                       onClick={() => history.push(`/feature/${feature.id}`)}
                     />
                   </div>
                   <ContextMenu
                     component={`feature-${feature.id}`}
-                    items={[{ action: () => {}, label: feature.name }]}
+                    items={[{ label: feature.name }]}
                   />
                 </Box>
               ))}
             {categories &&
-              categories.map((category) => (
+              categories.map((category, index) => (
                 <Box marginBottom='20px' key={category.id}>
                   <div id={`category-${category.id}`}>
                     <SidebarItem
                       color={role}
-                      selected={new RegExp(category.id, 'i').test(
-                        location.pathname
-                      )}
+                      selected={
+                        new RegExp(category.id, 'i').test(location.pathname) ||
+                        (index === 0 && location.pathname === '/category')
+                      }
                       text={category.name[0]}
                       onClick={() => history.push(`/category/${category.id}`)}
                     />
                   </div>
                   <ContextMenu
                     component={`category-${category.id}`}
-                    items={[{ action: () => {}, label: category.name }]}
+                    items={[{ label: category.name }]}
                   />
                 </Box>
               ))}