Add VSP to sidebar

Author: robinmalik

src/_nav.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import CIcon from '@coreui/icons-react'
-import {
+import
+{
   cilBell,
   cilCalculator,
   cilChartPie,
@@ -20,7 +21,7 @@ const _nav = [
     component: CNavItem,
     name: 'Dashboard',
     to: '/dashboard',
-    icon: <CIcon icon={cilSpeedometer} customClassName="nav-icon" />,
+    icon: <CIcon icon={ cilSpeedometer } customClassName="nav-icon" />,
     badge: {
       color: 'info',
       text: 'NEW',
@@ -34,13 +35,40 @@ const _nav = [
     component: CNavItem,
     name: 'Colors',
     to: '/theme/colors',
-    icon: <CIcon icon={cilDrop} customClassName="nav-icon" />,
+    icon: <CIcon icon={ cilDrop } customClassName="nav-icon" />,
   },
   {
     component: CNavItem,
     name: 'Typography',
     to: '/theme/typography',
-    icon: <CIcon icon={cilPencil} customClassName="nav-icon" />,
+    icon: <CIcon icon={ cilPencil } customClassName="nav-icon" />,
+  },
+  {
+    component: CNavTitle,
+    name: 'Services',
+  },
+  {
+    component: CNavGroup,
+    name: 'Virtual Server Platform',
+    to: '/services/virtual-server-platform',
+    icon: <CIcon icon={ cilPuzzle } customClassName="nav-icon" />,
+    items: [
+      {
+        component: CNavItem,
+        name: 'Admin Tasks',
+        to: '/services/virtual-server-platform/admin-tasks',
+      },
+      {
+        component: CNavItem,
+        name: 'Reports',
+        to: '/services/virtual-server-platform/reports',
+      },
+      {
+        component: CNavItem,
+        name: 'Snapshots',
+        to: '/services/virtual-server-platform/snapshots',
+      }
+    ],
   },
   {
     component: CNavTitle,
@@ -50,7 +78,7 @@ const _nav = [
     component: CNavGroup,
     name: 'Base',
     to: '/base',
-    icon: <CIcon icon={cilPuzzle} customClassName="nav-icon" />,
+    icon: <CIcon icon={ cilPuzzle } customClassName="nav-icon" />,
     items: [
       {
         component: CNavItem,
@@ -133,7 +161,7 @@ const _nav = [
     component: CNavGroup,
     name: 'Buttons',
     to: '/buttons',
-    icon: <CIcon icon={cilCursor} customClassName="nav-icon" />,
+    icon: <CIcon icon={ cilCursor } customClassName="nav-icon" />,
     items: [
       {
         component: CNavItem,
@@ -155,7 +183,7 @@ const _nav = [
   {
     component: CNavGroup,
     name: 'Forms',
-    icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
+    icon: <CIcon icon={ cilNotes } customClassName="nav-icon" />,
     items: [
       {
         component: CNavItem,
@@ -203,12 +231,12 @@ const _nav = [
     component: CNavItem,
     name: 'Charts',
     to: '/charts',
-    icon: <CIcon icon={cilChartPie} customClassName="nav-icon" />,
+    icon: <CIcon icon={ cilChartPie } customClassName="nav-icon" />,
   },
   {
     component: CNavGroup,
     name: 'Icons',
-    icon: <CIcon icon={cilStar} customClassName="nav-icon" />,
+    icon: <CIcon icon={ cilStar } customClassName="nav-icon" />,
     items: [
       {
         component: CNavItem,
@@ -234,7 +262,7 @@ const _nav = [
   {
     component: CNavGroup,
     name: 'Notifications',
-    icon: <CIcon icon={cilBell} customClassName="nav-icon" />,
+    icon: <CIcon icon={ cilBell } customClassName="nav-icon" />,
     items: [
       {
         component: CNavItem,
@@ -262,7 +290,7 @@ const _nav = [
     component: CNavItem,
     name: 'Widgets',
     to: '/widgets',
-    icon: <CIcon icon={cilCalculator} customClassName="nav-icon" />,
+    icon: <CIcon icon={ cilCalculator } customClassName="nav-icon" />,
     badge: {
       color: 'info',
       text: 'NEW',
@@ -275,7 +303,7 @@ const _nav = [
   {
     component: CNavGroup,
     name: 'Pages',
-    icon: <CIcon icon={cilStar} customClassName="nav-icon" />,
+    icon: <CIcon icon={ cilStar } customClassName="nav-icon" />,
     items: [
       {
         component: CNavItem,
@@ -303,7 +331,7 @@ const _nav = [
     component: CNavItem,
     name: 'Docs',
     href: 'https://coreui.io/react/docs/templates/installation/',
-    icon: <CIcon icon={cilDescription} customClassName="nav-icon" />,
+    icon: <CIcon icon={ cilDescription } customClassName="nav-icon" />,
   },
 ]
 

src/components/AppSidebar.js

@@ -1,7 +1,8 @@
 import React from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 
-import {
+import
+{
   CCloseButton,
   CSidebar,
   CSidebarBrand,
@@ -19,7 +20,8 @@ import { sygnet } from 'src/assets/brand/sygnet'
 // sidebar nav config
 import navigation from '../_nav'
 
-const AppSidebar = () => {
+const AppSidebar = () =>
+{
   const dispatch = useDispatch()
   const unfoldable = useSelector((state) => state.sidebarUnfoldable)
   const sidebarShow = useSelector((state) => state.sidebarShow)
@@ -29,27 +31,30 @@ const AppSidebar = () => {
       className="border-end"
       colorScheme="dark"
       position="fixed"
-      unfoldable={unfoldable}
-      visible={sidebarShow}
-      onVisibleChange={(visible) => {
+      unfoldable={ unfoldable }
+      visible={ sidebarShow }
+      onVisibleChange={ (visible) =>
+      {
         dispatch({ type: 'set', sidebarShow: visible })
-      }}
+      } }
     >
       <CSidebarHeader className="border-bottom">
         <CSidebarBrand to="/">
-          <CIcon customClassName="sidebar-brand-full" icon={logo} height={32} />
-          <CIcon customClassName="sidebar-brand-narrow" icon={sygnet} height={32} />
+          <CIcon customClassName="sidebar-brand-full" icon={ logo } height={ 32 } />
+          <CIcon customClassName="sidebar-brand-narrow" icon={ sygnet } height={ 32 } />
         </CSidebarBrand>
         <CCloseButton
           className="d-lg-none"
           dark
-          onClick={() => dispatch({ type: 'set', sidebarShow: false })}
+          onClick={ () => dispatch({ type: 'set', sidebarShow: false }) }
         />
       </CSidebarHeader>
-      <AppSidebarNav items={navigation} />
+
+      <AppSidebarNav items={ navigation } />
+
       <CSidebarFooter className="border-top d-none d-lg-flex">
         <CSidebarToggler
-          onClick={() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}
+          onClick={ () => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable }) }
         />
       </CSidebarFooter>
     </CSidebar>