refactor: update theme components

src/_nav.js

@@ -60,11 +60,6 @@ export default [
         name: "Collapses",
         to: "/base/collapses",
       },
-      {
-        _name: "CNavItem",
-        name: "Forms",
-        to: "/base/forms",
-      },
       /*
       {
         _name: 'CNavItem',
@@ -79,14 +74,14 @@ export default [
       },
       {
         _name: "CNavItem",
-        name: "Navs",
+        name: "Navs & Tabs",
         to: "/base/navs",
       },
-      {
-        _name: "CNavItem",
-        name: "Navbars",
-        to: "/base/navbars",
-      },
+      // {
+      //   _name: "CNavItem",
+      //   name: "Navbars",
+      //   to: "/base/navbars",
+      // },
       {
         _name: "CNavItem",
         name: "Paginations",
@@ -104,19 +99,19 @@ export default [
       },
       {
         _name: "CNavItem",
-        name: "Switches",
-        to: "/base/switches",
+        name: "Spinners",
+        to: "/base/spinners",
       },
       {
         _name: "CNavItem",
         name: "Tables",
         to: "/base/tables",
       },
-      {
-        _name: "CNavItem",
-        name: "Tabs",
-        to: "/base/tabs",
-      },
+      // {
+      //   _name: "CNavItem",
+      //   name: "Tabs",
+      //   to: "/base/tabs",
+      // },
       {
         _name: "CNavItem",
         name: "Tooltips",

src/components/AppHeader.vue

@@ -44,6 +44,7 @@
           v-for="item in currentRoute"
           :href="item.to"
           :active="item.to === '' ? true : false"
+          :key="item"
         >
           {{ item.name }}
         </CBreadcrumbItem>

src/components/AppSidebar.vue

@@ -1,35 +1,43 @@
 <template>
-  <CSidebar position="fixed" selfHiding="md" :class="sidebarClass">
+  <CSidebar position="fixed" selfHiding="md" :unfoldable="sidebarUnfoldable" :visible="sidebarVisible">
     <CSidebarBrand>
       <CIcon
-        customClasses="sidebar-brand-full"
+        customClassName="sidebar-brand-full"
         name="logo"
         size="custom-size"
         :height="35"
-        viewBox="0 0 556 134" />
+        viewBox="0 0 556 134"
+      />
       <CIcon
-        customClasses="sidebar-brand-narrow"
+        customClassName="sidebar-brand-narrow"
         name="logo"
         size="custom-size"
         :height="35"
         viewBox="0 0 110 134"
-    /></CSidebarBrand>
-
+      />
+    </CSidebarBrand>
     <AppSidebarNav />
+    <CSidebarToggler
+      class="d-none d-lg-flex"
+      @click="$store.commit('toggleUnfoldable')"
+    />
   </CSidebar>
 </template>
 
 <script>
-import { AppSidebarNav } from "./AppSidebarNav";
+import { AppSidebarNav } from './AppSidebarNav'
 export default {
-  name: "AppSidebar",
+  name: 'AppSidebar',
   components: {
     AppSidebarNav,
   },
   computed: {
-    sidebarClass () {
-      return this.$store.state.sidebarClass
+    sidebarUnfoldable() {
+      return this.$store.state.sidebarUnfoldable
+    },
+    sidebarVisible() {
+      return this.$store.state.sidebarVisible
+    },
+  },
 }
-  }
-};
 </script>

src/components/AppSidebarNav.js

@@ -1,19 +1,49 @@
-import { defineComponent, h, resolveComponent } from "vue";
-import { RouterLink } from "vue-router";
+import { defineComponent, h, resolveComponent } from 'vue'
+import { RouterLink } from 'vue-router'
 
-import { CSidebarNav, CNavItem, CNavGroup, CNavTitle } from "@coreui/vue";
-import nav from "@/_nav.js";
+import { CSidebarNav, CNavItem, CNavGroup, CNavTitle } from '@coreui/vue'
+import nav from '@/_nav.js'
 
 const AppSidebarNav = defineComponent({
-  name: "AppSidebarNav",
+  name: 'AppSidebarNav',
   components: {
     CNavItem,
     CNavGroup,
     CNavTitle,
   },
   setup() {
-    const singleItem = (item) =>
-      item.to
+    const renderItem = (item) => {
+      if (item.children) {
+        return h(
+          RouterLink,
+          {
+            to: item.route,
+            custom: true,
+          },
+          {
+            default: (props) =>
+              h(
+                resolveComponent('CNavGroup'),
+                {
+                  visible: props.isActive,
+                },
+                {
+                  togglerContent: () => [
+                    h(resolveComponent('CIcon'), {
+                      customClassName: 'nav-icon',
+                      name: item.icon,
+                    }),
+                    item.name,
+                  ],
+                  default: () =>
+                    item.children.map((child) => renderItem(child)),
+                },
+              ),
+          },
+        )
+      }
+
+      return item.to
         ? h(
             RouterLink,
             {
@@ -27,63 +57,49 @@ const AppSidebarNav = defineComponent({
                   {
                     active: props.isActive,
                     href: props.href,
-                    icon: "cil-speedometer",
                     onClick: () => props.navigate(),
                   },
-                  [
+                  {
+                    default: () => [
                       item.icon &&
-                      h(resolveComponent("CIcon"), {
-                        customClassName: "nav-icon",
+                        h(resolveComponent('CIcon'), {
+                          customClassName: 'nav-icon',
                           name: item.icon,
                         }),
                       item.name,
                       item.badge &&
-                    h(resolveComponent("CBadge"), {
+                        h(
+                          resolveComponent('CBadge'),
+                          {
                             class: 'ms-auto',
                             color: item.badge.color,
-                    }, item.badge.text),
-                  ]
-                ),
+                          },
+                          {
+                            default: () => item.badge.text,
                           }
-          )
-        : h(resolveComponent(item._name), {}, item.name);
-
-    const group = (item) =>
-      h(
-        RouterLink,
-        {
-          to: item.route,
-          custom: true,
-        },
-        {
-          default: (props) =>
-            h(
-              resolveComponent("CNavGroup"),
-              {
-                visible: props.isActive
-              },
-              {
-                togglerContent: () => [
-                  h(resolveComponent("CIcon"), {
-                    customClassName: "nav-icon",
-                    name: item.icon,
-                  }),
-                  item.name,
+                        ),
                     ],
-                default: () => item.children.map((child) => singleItem(child)),
-              }
+                  },
                 ),
+            },
+          )
+        : h(
+            resolveComponent(item._name),
+            {},
+            {
+              default: () => item.name,
+            },
+          )
     }
-      );
 
     return () =>
       h(
         CSidebarNav,
         {},
-        nav.map((item) =>
-          typeof item.children === "undefined" ? singleItem(item) : group(item)
-        )
-      );
+        {
+          default: () => nav.map((item) => renderItem(item)),
         },
-});
-export { AppSidebarNav };
+      )
+  },
+})
+export { AppSidebarNav }

src/router/index.js

@@ -121,9 +121,9 @@ const routes = [
             component: () => import("@/views/base/Progress.vue"),
           },
           {
-            path: "/base/switches",
-            name: "Switches",
-            component: () => import("@/views/base/Switches.vue"),
+            path: "/base/spinners",
+            name: "Spinners",
+            component: () => import("@/views/base/Spinners.vue"),
           },
           {
             path: "/base/tables",
@@ -159,8 +159,8 @@ const routes = [
           },
           {
             path: "/buttons/dropdowns",
-            name: "Button Dropdowns",
-            component: () => import("@/views/buttons/ButtonDropdowns.vue"),
+            name: "Dropdowns",
+            component: () => import("@/views/buttons/Dropdowns.vue"),
           },
           {
             path: "/buttons/button-groups",

src/store/index.js

@@ -1,18 +1,18 @@
-import { createStore } from "vuex";
+import { createStore } from 'vuex'
 
 export default createStore({
   state: {
-    sidebarClass: '',
+    sidebarVisible: '',
+    sidebarUnfoldable: false,
   },
   mutations: {
     toggleSidebar(state) {
-      if(state.sidebarClass === ''){
-        state.sidebarClass = 'sidebar-self-hiding-xxl'
-      }else{
-        state.sidebarClass = ''
-      }
-    }
+      state.sidebarVisible = !state.sidebarVisible
+    },
+    toggleUnfoldable(state) {
+      state.sidebarUnfoldable = !state.sidebarUnfoldable
+    },
   },
   actions: {},
   modules: {},
-});
+})