refactor: improve syntax

Author: mrholek

src/_nav.js

@@ -12,10 +12,11 @@ import {
   cilSpeedometer,
   cilStar,
 } from '@coreui/icons'
+import { CNavGroup, CNavItem, CNavTitle } from '@coreui/react'
 
 const _nav = [
   {
-    component: 'CNavItem',
+    component: CNavItem,
     name: 'Dashboard',
     to: '/dashboard',
     icon: <CIcon icon={cilSpeedometer} customClassName="nav-icon" />,
@@ -25,204 +26,181 @@ const _nav = [
     },
   },
   {
-    component: 'CNavTitle',
+    component: CNavTitle,
     name: 'Theme',
   },
   {
-    component: 'CNavItem',
+    component: CNavItem,
     name: 'Colors',
     to: '/theme/colors',
     icon: <CIcon icon={cilDrop} customClassName="nav-icon" />,
   },
   {
-    component: 'CNavItem',
+    component: CNavItem,
     name: 'Typography',
     to: '/theme/typography',
     icon: <CIcon icon={cilPencil} customClassName="nav-icon" />,
   },
   {
-    component: 'CNavTitle',
+    component: CNavTitle,
     name: 'Components',
   },
   {
-    component: 'CNavGroup',
+    component: CNavGroup,
     name: 'Base',
     to: '/base',
     icon: <CIcon icon={cilPuzzle} customClassName="nav-icon" />,
     items: [
       {
-        component: 'CNavItem',
+        component: CNavItem,
         name: 'Accordion',
         to: '/base/accordion',
       },
       {
-        component: 'CNavItem',
+        component: CNavItem,
         name: 'Breadcrumb',
         to: '/base/breadcrumbs',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Cards',
         to: '/base/cards',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Carousel',
         to: '/base/carousels',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Collapse',
         to: '/base/collapses',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'List group',
         to: '/base/list-groups',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Navs & Tabs',
         to: '/base/navs',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Pagination',
         to: '/base/paginations',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Popovers',
         to: '/base/popovers',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Progress',
         to: '/base/progress',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Spinners',
         to: '/base/spinners',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Tables',
         to: '/base/tables',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Tooltips',
         to: '/base/tooltips',
       },
     ],
   },
   {
-    component: 'CNavGroup',
+    component: CNavGroup,
     name: 'Buttons',
     to: '/buttons',
     icon: <CIcon icon={cilCursor} customClassName="nav-icon" />,
     items: [
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Buttons',
         to: '/buttons/buttons',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Buttons groups',
         to: '/buttons/button-groups',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Dropdowns',
         to: '/buttons/dropdowns',
       },
     ],
   },
   {
-    component: 'CNavGroup',
+    component: CNavGroup,
     name: 'Forms',
     icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
     items: [
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Form Control',
         to: '/forms/form-control',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Select',
         to: '/forms/select',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Checks & Radios',
         to: '/forms/checks-radios',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Range',
         to: '/forms/range',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Input Group',
         to: '/forms/input-group',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Floating Labels',
         to: '/forms/floating-labels',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Layout',
         to: '/forms/layout',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Validation',
         to: '/forms/validation',
       },
     ],
   },
   {
-    component: 'CNavItem',
+    component: CNavItem,
     name: 'Charts',
     to: '/charts',
     icon: <CIcon icon={cilChartPie} customClassName="nav-icon" />,
   },
   {
-    component: 'CNavGroup',
+    component: CNavGroup,
     name: 'Icons',
     icon: <CIcon icon={cilStar} customClassName="nav-icon" />,
     items: [
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'CoreUI Free',
         to: '/icons/coreui-icons',
         badge: {
@@ -231,52 +209,46 @@ const _nav = [
         },
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'CoreUI Flags',
         to: '/icons/flags',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'CoreUI Brands',
         to: '/icons/brands',
       },
     ],
   },
   {
-    component: 'CNavGroup',
+    component: CNavGroup,
     name: 'Notifications',
     icon: <CIcon icon={cilBell} customClassName="nav-icon" />,
     items: [
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Alerts',
         to: '/notifications/alerts',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Badges',
         to: '/notifications/badges',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Modal',
         to: '/notifications/modals',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Toasts',
         to: '/notifications/toasts',
       },
     ],
   },
   {
-    component: 'CNavItem',
+    component: CNavItem,
     name: 'Widgets',
     to: '/widgets',
     icon: <CIcon icon={cilCalculator} customClassName="nav-icon" />,
@@ -286,35 +258,31 @@ const _nav = [
     },
   },
   {
-    component: 'CNavTitle',
+    component: CNavTitle,
     name: 'Extras',
   },
   {
-    component: 'CNavGroup',
+    component: CNavGroup,
     name: 'Pages',
     icon: <CIcon icon={cilStar} customClassName="nav-icon" />,
     items: [
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Login',
         to: '/login',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Register',
         to: '/register',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Error 404',
         to: '/404',
       },
       {
-        component: 'CNavItem',
-
+        component: CNavItem,
         name: 'Error 500',
         to: '/500',
       },