feat: add subitems at sidebar

src/assets/styles/theme.js

@@ -70,7 +70,11 @@ export default {
     sidebar: {
       width: '70px',
       icons: {
-        color: '#888da8'
+        color: {
+          light: lighten(0.1, '#888da8'),
+          base: '#888da8',
+          dark: darken(0.1, '#888da8')
+        }
       }
     },
     headerbar: {

src/components/Navigation/Headerbar/Headerbar.jsx

@@ -6,14 +6,22 @@ import PropTypes from 'prop-types'
 
 import * as S from './styles'
 
-const Headerbar = ({ navItems, isSidebarExpanded, setIsSidebarExpanded }) => {
+const Headerbar = ({
+  navItems,
+  isSidebarExpanded,
+  setIsSidebarExpanded,
+  setCurrentExpandedItem
+}) => {
   console.log('navItems', navItems)
+
+  const handleClick = (event) => {
+    event.preventDefault()
+    setIsSidebarExpanded((prev) => !prev)
+    setCurrentExpandedItem(null)
+  }
   return (
     <S.Container>
-      <S.Toggle
-        isSidebarExpanded={isSidebarExpanded}
-        onClick={() => setIsSidebarExpanded((prev) => !prev)}
-      >
+      <S.Toggle isSidebarExpanded={isSidebarExpanded} onClick={handleClick}>
         {isSidebarExpanded ? <GrClose /> : <GiHamburgerMenu />}
       </S.Toggle>
     </S.Container>
@@ -23,7 +31,8 @@ const Headerbar = ({ navItems, isSidebarExpanded, setIsSidebarExpanded }) => {
 Headerbar.propTypes = {
   navItems: PropTypes.array.isRequired,
   isSidebarExpanded: PropTypes.bool.isRequired,
-  setIsSidebarExpanded: PropTypes.func.isRequired
+  setIsSidebarExpanded: PropTypes.func.isRequired,
+  setCurrentExpandedItem: PropTypes.func.isRequired
 }
 
 export default Headerbar

src/components/Navigation/Navigation.jsx

@@ -3,26 +3,33 @@ import React, { useState } from 'react'
 import { useAuthContext } from 'contexts/AuthProvider/AuthProvider'
 
 import Headerbar from './Headerbar/Headerbar'
-import { sidebarData, headerbarData } from './NavigationData'
+import * as NavigationData from './NavigationData'
 import Sidebar from './Sidebar/Sidebar'
 import * as S from './styles'
 
 const Navigation = () => {
   const { isSignedIn } = useAuthContext()
   const [isSidebarExpanded, setIsSidebarExpanded] = useState(false)
+  const [currentExpandedItem, setCurrentExpandedItem] = useState(null)
 
-  if (!isSignedIn) return null
   return (
     <S.Container>
       <Sidebar
-        navItems={sidebarData}
+        navItems={
+          isSignedIn
+            ? NavigationData.sidebarLoggedIn
+            : NavigationData.sidebarNotLoggedIn
+        }
         isSidebarExpanded={isSidebarExpanded}
         setIsSidebarExpanded={setIsSidebarExpanded}
+        currentExpandedItem={currentExpandedItem}
+        setCurrentExpandedItem={setCurrentExpandedItem}
       />
       <Headerbar
-        navItems={headerbarData}
+        navItems={NavigationData.headerbar}
         isSidebarExpanded={isSidebarExpanded}
         setIsSidebarExpanded={setIsSidebarExpanded}
+        setCurrentExpandedItem={setCurrentExpandedItem}
       />
     </S.Container>
   )

src/components/Navigation/NavigationData.js

@@ -4,108 +4,140 @@ import * as FaIcons from 'react-icons/fa'
 import * as FiIcons from 'react-icons/fi'
 import * as IoIcons from 'react-icons/io'
 
-export const sidebarData = [
+import { v4 as uuid_v4 } from 'uuid'
+
+export const sidebarNotLoggedIn = [
+  {
+    title: 'Login',
+    path: '/login',
+    icon: <BiIcons.BiLogIn />,
+    id: uuid_v4()
+  }
+]
+
+export const sidebarLoggedIn = [
   {
     title: 'Global',
     path: '/global',
-    icon: <BiIcons.BiWorld />
+    icon: <BiIcons.BiWorld />,
+    id: uuid_v4()
   },
   {
     title: 'Blueprint Manager',
-    path: '/blueprint_manager',
     icon: <IoIcons.IoIosPaper />,
+    id: uuid_v4(),
 
-    subNav: [
+    subItems: [
       {
         title: 'Node Manager',
-        path: '/blueprint_manager/node'
+        path: '/blueprint_manager/node',
+        id: uuid_v4()
       },
       {
         title: 'Lanes Manager',
-        path: '/blueprint_manager/lanes'
+        path: '/blueprint_manager/lanes',
+        id: uuid_v4()
       },
       {
         title: 'Builder',
-        path: '/blueprint_manager/builder'
+        path: '/blueprint_manager/builder',
+        id: uuid_v4()
       }
     ]
   },
   {
     title: 'Monitoring',
-    path: '/monitoring',
     icon: <FiIcons.FiMonitor />,
+    id: uuid_v4(),
 
-    subNav: [
+    subItems: [
       {
         title: 'General Stats',
-        path: '/monitoring/general_stats'
+        path: '/monitoring/general_stats',
+        id: uuid_v4()
       },
       {
         title: 'Process Monitoring',
-        path: '/monitoring/process'
+        path: '/monitoring/process',
+        id: uuid_v4()
       },
       {
         title: 'Edit Process',
-        path: '/monitoring/edit_process'
+        path: '/monitoring/edit_process',
+        id: uuid_v4()
       },
       {
         title: 'Auditing',
-        path: '/monitoring/auditing'
+        path: '/monitoring/auditing',
+        id: uuid_v4()
       }
     ]
   },
   {
     title: 'Insights',
-    path: '/insights',
     icon: <CgIcons.CgInsights />,
+    id: uuid_v4(),
 
-    subNav: [
+    subItems: [
       {
         title: 'Task Performance',
-        path: '/insights/task_performance'
+        path: '/insights/task_performance',
+        id: uuid_v4()
       },
       {
         title: 'Process Performance',
-        path: '/insights/process_performance'
+        path: '/insights/process_performance',
+        id: uuid_v4()
       },
       {
         title: 'Process Network',
-        path: '/insights/process_network'
+        path: '/insights/process_network',
+        id: uuid_v4()
       }
     ]
   },
   {
     title: 'Toolbox',
-    path: '/toolbox',
     icon: <FaIcons.FaToolbox />,
+    id: uuid_v4(),
 
-    subNav: [
+    subItems: [
       {
         title: 'Notifications',
-        path: '/toolbox/notifications'
+        path: '/toolbox/notifications',
+        id: uuid_v4()
       },
       {
         title: 'Permissions',
-        path: '/toolbox/permissions'
+        path: '/toolbox/permissions',
+        id: uuid_v4()
       }
     ]
   },
   {
     title: 'Settings',
-    path: '/settings',
     icon: <IoIcons.IoMdSettings />,
+    id: uuid_v4(),
 
-    subNav: [
+    subItems: [
       {
         title: 'Manage Clusters',
-        path: '/settings/manage_clusters'
+        path: '/settings/manage_clusters',
+        id: uuid_v4()
       },
       {
         title: 'Manage Users',
-        path: '/settings/manage_users'
+        path: '/settings/manage_users',
+        id: uuid_v4()
       }
     ]
+  },
+  {
+    title: 'Logout',
+    path: '/logout',
+    icon: <BiIcons.BiLogOut />,
+    id: uuid_v4()
   }
 ]
 
-export const headerbarData = []
+export const headerbar = []

src/components/Navigation/Sidebar/Logo/index.jsx

@@ -1,10 +1,12 @@
 import React from 'react'
 
+import PropTypes from 'prop-types'
+
 import * as S from './styles'
 
-const Logo = () => {
+const Logo = ({ isSidebarExpanded }) => {
   return (
-    <S.Container>
+    <S.Container isSidebarExpanded={isSidebarExpanded}>
       <S.Image
         viewBox="0 0 50 50"
         fill="none"
@@ -29,9 +31,13 @@ const Logo = () => {
           strokeWidth="6"
         />
       </S.Image>
-      <S.Text>Logo</S.Text>
+      {isSidebarExpanded && <S.Text>Logo</S.Text>}
     </S.Container>
   )
 }
 
+Logo.propTypes = {
+  isSidebarExpanded: PropTypes.bool.isRequired
+}
+
 export default Logo

src/components/Navigation/Sidebar/Logo/styles.js

@@ -1,9 +1,17 @@
 import styled, { css } from 'styled-components'
 
 export const Container = styled.div`
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
+  ${({ theme, isSidebarExpanded }) => css`
+    align-items: center;
+    border-bottom: ${isSidebarExpanded
+      ? `1px solid ${theme.border.color}`
+      : 'none'};
+    display: flex;
+    height: var(--headerbar-height);
+    justify-content: flex-start;
+    padding: 0 0 0 23px;
+    width: 100%;
+  `}
 `
 
 export const Image = styled.svg`
@@ -16,6 +24,6 @@ export const Text = styled.span`
     color: ${theme.colors.black};
     font-size: ${theme.font.sizes.medium};
     font-weight: ${theme.font.weight.bold};
-    margin-left: ${theme.spacings.xxsmall};
+    padding: 0 0 0 20px;
   `}
 `

src/components/Navigation/Sidebar/NavItem/NavItem.jsx

@@ -1,27 +1,60 @@
 import React from 'react'
 
+import * as C from 'components'
 import PropTypes from 'prop-types'
 
 import * as S from './styles'
+import SubItems from './SubItems/SubItems'
 
-const NavItem = ({ navItem, isSidebarExpanded, setIsSidebarExpanded }) => {
+const NavItem = ({
+  navItem,
+  isSidebarExpanded,
+  setIsSidebarExpanded,
+  currentExpandedItem,
+  setCurrentExpandedItem
+}) => {
   const handleClick = (event) => {
     event.preventDefault()
     setIsSidebarExpanded(true)
+    setCurrentExpandedItem(
+      currentExpandedItem === navItem?.id ? null : navItem.id
+    )
   }
 
   return (
-    <S.Container onClick={handleClick}>
-      <S.Icon>{navItem?.icon}</S.Icon>
-      {isSidebarExpanded && <S.Title>{navItem?.title || ''}</S.Title>}
+    <S.Container>
+      {navItem?.path ? (
+        <C.UI.Link url={navItem.path}>
+          <S.LinkContent>
+            <S.Icon>{navItem?.icon}</S.Icon>
+            {isSidebarExpanded && <S.Title>{navItem?.title || ''}</S.Title>}
+          </S.LinkContent>
+        </C.UI.Link>
+      ) : (
+        <>
+          <S.LinkContent onClick={handleClick}>
+            <S.Icon>{navItem?.icon}</S.Icon>
+            {isSidebarExpanded && <S.Title>{navItem?.title || ''}</S.Title>}
+          </S.LinkContent>
+
+          {isSidebarExpanded && currentExpandedItem === navItem?.id && (
+            <SubItems
+              subItems={navItem?.subItems}
+              key={`${isSidebarExpanded}-${currentExpandedItem}-${navItem?.id}`}
+            />
+          )}
+        </>
+      )}
     </S.Container>
   )
 }
 
 NavItem.propTypes = {
   navItem: PropTypes.object,
   isSidebarExpanded: PropTypes.bool.isRequired,
-  setIsSidebarExpanded: PropTypes.func.isRequired
+  setIsSidebarExpanded: PropTypes.func.isRequired,
+  currentExpandedItem: PropTypes.bool.isRequired,
+  setCurrentExpandedItem: PropTypes.func.isRequired
 }
 
 export default NavItem