Update sidebar component

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(
+                      selected={
-                        location.pathname
+                        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(
+                      selected={
-                        location.pathname
+                        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(
+                      selected={
-                        location.pathname
+                        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(
+                      selected={
-                        location.pathname
+                        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>
               ))}