From 6ece5c009cbe3261661307b313f4c8404da48242 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Fri, 27 Aug 2021 00:06:27 +0200 Subject: [PATCH] refactor: update theme components --- src/_nav.js | 31 ++++---- src/components/AppHeader.vue | 1 + src/components/AppSidebar.vue | 34 +++++---- src/components/AppSidebarNav.js | 130 ++++++++++++++++++-------------- src/router/index.js | 10 +-- src/store/index.js | 20 ++--- 6 files changed, 123 insertions(+), 103 deletions(-) diff --git a/src/_nav.js b/src/_nav.js index 438be945..97de52c1 100644 --- a/src/_nav.js +++ b/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", diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue index 092cbbee..8a5c8287 100644 --- a/src/components/AppHeader.vue +++ b/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 }} diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue index cdc8c3cd..1c72d896 100644 --- a/src/components/AppSidebar.vue +++ b/src/components/AppSidebar.vue @@ -1,35 +1,43 @@ diff --git a/src/components/AppSidebarNav.js b/src/components/AppSidebarNav.js index 3731f14b..6daae2e7 100644 --- a/src/components/AppSidebarNav.js +++ b/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 } diff --git a/src/router/index.js b/src/router/index.js index 0403bf0d..c9d1fdec 100644 --- a/src/router/index.js +++ b/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", diff --git a/src/store/index.js b/src/store/index.js index 395ddcd1..9cc23807 100644 --- a/src/store/index.js +++ b/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 = '' - } - } + toggleSidebar(state) { + state.sidebarVisible = !state.sidebarVisible + }, + toggleUnfoldable(state) { + state.sidebarUnfoldable = !state.sidebarUnfoldable + }, }, actions: {}, modules: {}, -}); +})