refactor: update theme components

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(),
                   },
-                  [
-                    item.icon &&
-                      h(resolveComponent("CIcon"), {
-                        customClassName: "nav-icon",
-                        name: item.icon,
-                      }),
-                    item.name,
-                    item.badge &&
-                    h(resolveComponent("CBadge"), {
-                      class: 'ms-auto',
-                      color: item.badge.color,
-                    }, item.badge.text),
-                  ]
+                  {
+                    default: () => [
+                      item.icon &&
+                        h(resolveComponent('CIcon'), {
+                          customClassName: 'nav-icon',
+                          name: item.icon,
+                        }),
+                      item.name,
+                      item.badge &&
+                        h(
+                          resolveComponent('CBadge'),
+                          {
+                            class: 'ms-auto',
+                            color: item.badge.color,
+                          },
+                          {
+                            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 }