From 760dc7ba79114727987e6917097e045c0f122b7b Mon Sep 17 00:00:00 2001
From: woothu <32914662+woothu@users.noreply.github.com>
Date: Thu, 14 Nov 2019 13:55:00 +0100
Subject: [PATCH] refactor: change sidebar nav generation to flat structure

---
 src/containers/TheSidebar.vue |   8 +-
 src/containers/_nav.js        | 666 ++++++++++++----------------------
 2 files changed, 236 insertions(+), 438 deletions(-)

diff --git a/src/containers/TheSidebar.vue b/src/containers/TheSidebar.vue
index 3bb08659..fe862662 100644
--- a/src/containers/TheSidebar.vue
+++ b/src/containers/TheSidebar.vue
@@ -9,11 +9,8 @@
       :imgMinimized="{ width: 118, height: 46, alt: 'Logo', src: 'img/brand/coreui-signet-white.svg'}"
       :wrappedInLink="{ href: 'https://coreui.io/', target: '_blank'}"
     />
-    <!-- <CSidebarHeader/> -->
-    <!-- <CSidebarForm/> -->
-    <CRenderFunction :contentToRender="nav"/>
-    <!-- <CSidebarFooter/> -->
-    <CSidebarMinimizer 
+    <CRenderFunction flat :content-to-render="nav"/>
+    <CSidebarMinimizer
       class="d-md-down-none"
       @click.native="minimize = !minimize"
     />
@@ -22,6 +19,7 @@
 
 <script>
 import nav from './_nav'
+
 export default {
   name: 'TheSidebar',
   data () {
diff --git a/src/containers/_nav.js b/src/containers/_nav.js
index a819b114..3e9b71a0 100644
--- a/src/containers/_nav.js
+++ b/src/containers/_nav.js
@@ -1,471 +1,271 @@
 export default [
-  'CSidebarNav',
-  [
-    [
-      'CSidebarNavLink',
+  {
+    _name: 'CSidebarNav',
+    _children: [
       {
-        props: {
-          name: 'Dashboard',
-          to: '/dashboard',
-          icon: 'speedometer',
-          badge: {
-            color: 'primary',
-            text: 'NEW'
-          }
-        }
-      }
-    ],
-    [
-      'CSidebarNavTitle',
-      ['Theme']
-    ],
-    [
-      'CSidebarNavLink',
-      {
-        props: {
-          name: 'Colors',
-          to: '/theme/colors',
-          icon: 'drop'
-        }
-      }
-    ],
-    [
-      'CSidebarNavLink',
-      {
-        props: {
-          name: 'Typography',
-          to: '/theme/typography',
-          icon: 'pencil'
-        }
-      }
-    ],
-    [
-      'CSidebarNavTitle',
-      ['Components']
-    ],
-    [
-      'CSidebarNavDropdown',
-      {
-        props: {
-          name: 'Base',
-          route: '/base',
-          icon: 'puzzle',
+        _name: 'CSidebarNavItem',
+        name: 'Dashboard',
+        to: '/dashboard',
+        icon: 'speedometer',
+        badge: {
+          color: 'primary',
+          text: 'NEW'
         }
       },
-      [
-        [
-          'CSidebarNavLink',
+      {
+        _name: 'CSidebarNavTitle',
+        _children: ['Theme']
+      },
+      {
+        _name: 'CSidebarNavItem',
+        name: 'Colors',
+        to: '/theme/colors',
+        icon: 'drop'
+      },
+      {
+        _name: 'CSidebarNavItem',
+        name: 'Typography',
+        to: '/theme/typography',
+        icon: 'pencil'
+      },
+      {
+        _name: 'CSidebarNavTitle',
+        _children: ['Components']
+      },
+      {
+        _name: 'CSidebarNavDropdown',
+        name: 'Base',
+        route: '/base',
+        icon: 'puzzle',
+        items: [
           {
-            props: {
-              name: 'Breadcrumbs',
-              to: '/base/breadcrumbs',
-              icon: 'puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'Breadcrumbs',
+            to: '/base/breadcrumbs',
+            icon: 'puzzle'
+          },
           {
-            props: {
-              name: 'Cards',
-              to: '/base/cards',
-              icon: 'puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'Cards',
+            to: '/base/cards',
+            icon: 'puzzle'
+          },
           {
-            props: {
-              name: 'Carousels',
-              to: '/base/carousels',
-              icon: 'puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'Carousels',
+            to: '/base/carousels',
+            icon: 'puzzle'
+          }, 
           {
-            props: {
-              name: 'Collapses',
-              to: '/base/collapses',
-              icon: 'puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'Collapses',
+            to: '/base/collapses',
+            icon: 'puzzle'
+          },
           {
-            props: {
-              name: 'Forms',
-              to: '/base/forms',
-              icon: 'puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'Forms',
+            to: '/base/forms',
+            icon: 'puzzle'
+          },
           {
-            props: {
-              name: 'Jumbotrons',
-              to: '/base/jumbotrons',
-              icon: 'puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'Jumbotrons',
+            to: '/base/jumbotrons',
+            icon: 'puzzle'
+          },
           {
-            props: {
-              name: 'List Groups',
-              to: '/base/list-groups',
-              icon: 'puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'List Groups',
+            to: '/base/list-groups',
+            icon: 'puzzle'
+          },
           {
-            props: {
-              name: 'Navs',
-              to: '/base/navs',
-              icon: 'puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'Navs',
+            to: '/base/navs',
+            icon: 'puzzle'
+          },
           {
-            props: {
-              name: 'Navbars',
-              to: '/base/navbars',
-              icon: 'puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'Navbars',
+            to: '/base/navbars',
+            icon: 'puzzle'
+          },
           {
-            props: {
-              name: 'Paginations',
-              to: '/base/paginations',
-              icon: 'puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'Paginations',
+            to: '/base/paginations',
+            icon: 'puzzle'
+          },
           {
-            props: {
-              name: 'Popovers',
-              to: '/base/popovers',
-              icon: 'puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'Popovers',
+            to: '/base/popovers',
+            icon: 'puzzle'
+          },
           {
-            props: {
-              name: 'Progress Bars',
-              to: '/base/progress-bars',
-              icon: 'puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'Progress Bars',
+            to: '/base/progress-bars',
+            icon: 'puzzle'
+          },
           {
-            props: {
-              name: 'Switches',
-              to: '/base/switches',
-              icon: 'puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'Switches',
+            to: '/base/switches',
+            icon: 'puzzle'
+          },
           {
-            props: {
-              name: 'Tables',
-              to: '/base/tables',
-              icon: 'puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'Tables',
+            to: '/base/tables',
+            icon: 'puzzle'
+          },
           {
-            props: {
-              name: 'Tabs',
-              to: '/base/tabs',
-              icon: 'puzzle'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'Tabs',
+            to: '/base/tabs',
+            icon: 'puzzle'
+          },
           {
-            props: {
-              name: 'Tooltips',
-              to: '/base/tooltips',
-              icon: 'puzzle'
-            }
+            name: 'Tooltips',
+            to: '/base/tooltips',
+            icon: 'puzzle'
           }
         ]
-      ]
-    ],
-    [
-      'CSidebarNavDropdown',
+      },
       {
-        props: {
-          name: 'Buttons',
-          route: '/buttons',
-          icon: 'cursor',
+        _name: 'CSidebarNavDropdown',
+        name: 'Buttons',
+        route: '/buttons',
+        icon: 'cursor',
+        items: [
+          {
+            name: 'Buttons',
+            to: '/buttons/standard-buttons',
+            icon: 'cursor'
+          },
+          {
+            name: 'Button Dropdowns',
+            to: '/buttons/dropdowns',
+            icon: 'cursor'
+          },
+          {
+            name: 'Button Groups',
+            to: '/buttons/button-groups',
+            icon: 'cursor'
+          },
+          {
+            name: 'Brand Buttons',
+            to: '/buttons/brand-buttons',
+            icon: 'cursor'
+          }
+        ]
+      },
+      {
+        _name: 'CSidebarNavItem',
+        name: 'Charts',
+        to: '/charts',
+        icon: 'chart-pie'
+      },
+      {
+        _name: 'CSidebarNavDropdown',
+        name: 'Icons',
+        route: '/icons',
+        icon: 'star',
+        items: [
+          {
+            name: 'CoreUI Icons',
+            to: '/icons/coreui-icons',
+            icon: 'star',
+            badge: {
+              color: 'info',
+              text: 'NEW'
+            }
+          },
+          {
+            name: 'Brands',
+            to: '/icons/brands',
+            icon: 'star'
+          },
+          {
+            name: 'Flags',
+            to: '/icons/flags',
+            icon: 'star'
+          }
+        ]
+      },
+      {
+        _name: 'CSidebarNavDropdown',
+        name: 'Notifications',
+        route: '/notifications',
+        icon: 'bell',
+        items: [
+          {
+            name: 'Alerts',
+            to: '/notifications/alerts',
+            icon: 'bell'
+          },
+          {
+            name: 'Badges',
+            to: '/notifications/badges',
+            icon: 'bell'
+          },
+          {
+            name: 'Modals',
+            to: '/notifications/modals',
+            icon: 'bell'
+          }
+        ]
+      },
+      {
+        _name: 'CSidebarNavItem',
+        name: 'Widgets',
+        to: '/widgets',
+        icon: 'calculator',
+        badge: {
+          color: 'primary',
+          text: 'NEW',
+          shape: 'pill'
         }
       },
-      [
-        [
-          'CSidebarNavLink',
-          {
-            props: {
-              name: 'Buttons',
-              to: '/buttons/standard-buttons',
-              icon: 'cursor'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
-          {
-            props: {
-              name: 'Button Dropdowns',
-              to: '/buttons/dropdowns',
-              icon: 'cursor'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
-          {
-            props: {
-              name: 'Button Groups',
-              to: '/buttons/button-groups',
-              icon: 'cursor'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
-          {
-            props: {
-              name: 'Brand Buttons',
-              to: '/buttons/brand-buttons',
-              icon: 'cursor'
-            }
-          }
-        ]
-      ]
-    ],
-    [
-      'CSidebarNavLink',
       {
-        props: {
-          name: 'Charts',
-          to: '/charts',
-          icon: 'chart-pie'
-        }
-      }
-    ],
-    [
-      'CSidebarNavDropdown',
-      {
-        props: {
-          name: 'Icons',
-          route: '/icons',
-          icon: 'star',
-        }
+        _name: 'CSidebarNavDivider'
       },
-      [
-        [
-          'CSidebarNavLink',
-          {
-            props: {
-              name: 'CoreUI Icons',
-              to: '/icons/coreui-icons',
-              icon: 'star',
-              badge: {
-                color: 'info',
-                text: 'NEW'
-              }
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
-          {
-            props: {
-              name: 'Brands',
-              to: '/icons/brands',
-              icon: 'star'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
-          {
-            props: {
-              name: 'Flags',
-              to: '/icons/flags',
-              icon: 'star'
-            }
-          }
-        ]
-      ]
-    ],
-    [
-      'CSidebarNavDropdown',
       {
-        props: {
-          name: 'Notifications',
-          route: '/notifications',
-          icon: 'bell',
-        }
+        _name: 'CSidebarNavTitle',
+        _children: ['Extras']
       },
-      [
-        [
-          'CSidebarNavLink',
+      {
+        _name: 'CSidebarNavDropdown',
+        name: 'Pages',
+        route: '/pages',
+        icon: 'star',
+        items: [
           {
-            props: {
-              name: 'Alerts',
-              to: '/notifications/alerts',
-              icon: 'bell'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'Login',
+            to: '/pages/login',
+            icon: 'star'
+          },
           {
-            props: {
-              name: 'Badges',
-              to: '/notifications/badges',
-              icon: 'bell'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
+            name: 'Register',
+            to: '/pages/register',
+            icon: 'star'
+          },
           {
-            props: {
-              name: 'Modals',
-              to: '/notifications/modals',
-              icon: 'bell'
-            }
+            name: 'Error 404',
+            to: '/pages/404',
+            icon: 'star'
+          },
+          {
+            name: 'Error 500',
+            to: '/pages/500',
+            icon: 'star'
           }
         ]
-      ]
-    ],
-    [
-      'CSidebarNavLink',
-      {
-        props: {
-          name: 'Widgets',
-          to: '/widgets',
-          icon: 'calculator',
-          badge: {
-            color: 'primary',
-            text: 'NEW',
-            shape: 'pill'
-          }
-        }
-      }
-    ],
-    [
-      'CSidebarNavDivider',
-    ],
-    [
-      'CSidebarNavTitle',
-      ['Extras']
-    ],
-    [
-      'CSidebarNavDropdown',
-      {
-        props: {
-          name: 'Pages',
-          route: '/pages',
-          icon: 'star',
-        }
       },
-      [
-        [
-          'CSidebarNavLink',
-          {
-            props: {
-              name: 'Login',
-              to: '/pages/login',
-              icon: 'star'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
-          {
-            props: {
-              name: 'Register',
-              to: '/pages/register',
-              icon: 'star'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
-          {
-            props: {
-              name: 'Error 404',
-              to: '/pages/404',
-              icon: 'star'
-            }
-          }
-        ],
-        [
-          'CSidebarNavLink',
-          {
-            props: {
-              name: 'Error 500',
-              to: '/pages/500',
-              icon: 'star'
-            }
-          }
-        ]
-      ]
-    ],
-    [
-      'CSidebarNavLink',
       {
-        props: {
-          name: 'Download CoreUI',
-          href: 'http://coreui.io/vue/',
-          icon: 'cloud-download',
-          addLinkClasses: 'c-nav-link-success',
-          target: '_blank'
-        },
-        attrs: {
-          class: 'mt-auto',
-        }
-      }
-    ],
-    [
-      'CSidebarNavLink',
-      {          
-        props: {
-          name: 'Try CoreUI PRO',
-          href: 'http://coreui.io/pro/vue/',
-          icon: 'layers',
-          addLinkClasses: 'c-nav-link-danger',
-          target: '_blank'
-        }
+        _name: 'CSidebarNavItem',
+        name: 'Download CoreUI',
+        href: 'http://coreui.io/vue/',
+        icon: { name: 'cloud-download', class: 'text-warning' },
+        _class: 'bg-success text-white',
+        target: '_blank'
+      },
+      {
+        _name: 'CSidebarNavItem',
+        name: 'Try CoreUI PRO',
+        href: 'http://coreui.io/pro/vue/',
+        icon: 'layers',
+        _class: 'bg-danger text-white',
+        target: '_blank'
       }
     ]
-  ]
-]
-
+  }
+]
\ No newline at end of file