Skip to content

Commit 6ece5c0

Browse files
mrholekmrholek
committed
refactor: update theme components
1 parent e086d28 commit 6ece5c0

File tree

6 files changed

+123
-103
lines changed

6 files changed

+123
-103
lines changed

‎src/_nav.js‎

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -60,11 +60,6 @@ export default [
6060
name: "Collapses",
6161
to: "/base/collapses",
6262
},
63-
{
64-
_name: "CNavItem",
65-
name: "Forms",
66-
to: "/base/forms",
67-
},
6863
/*
6964
{
7065
_name: 'CNavItem',
@@ -79,14 +74,14 @@ export default [
7974
},
8075
{
8176
_name: "CNavItem",
82-
name: "Navs",
77+
name: "Navs & Tabs",
8378
to: "/base/navs",
8479
},
85-
{
86-
_name: "CNavItem",
87-
name: "Navbars",
88-
to: "/base/navbars",
89-
},
80+
// {
81+
// _name: "CNavItem",
82+
// name: "Navbars",
83+
// to: "/base/navbars",
84+
// },
9085
{
9186
_name: "CNavItem",
9287
name: "Paginations",
@@ -104,19 +99,19 @@ export default [
10499
},
105100
{
106101
_name: "CNavItem",
107-
name: "Switches",
108-
to: "/base/switches",
102+
name: "Spinners",
103+
to: "/base/spinners",
109104
},
110105
{
111106
_name: "CNavItem",
112107
name: "Tables",
113108
to: "/base/tables",
114109
},
115-
{
116-
_name: "CNavItem",
117-
name: "Tabs",
118-
to: "/base/tabs",
119-
},
110+
// {
111+
// _name: "CNavItem",
112+
// name: "Tabs",
113+
// to: "/base/tabs",
114+
// },
120115
{
121116
_name: "CNavItem",
122117
name: "Tooltips",

‎src/components/AppHeader.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
v-for="item in currentRoute"
4545
:href="item.to"
4646
:active="item.to === '' ? true : false"
47+
:key="item"
4748
>
4849
{{ item.name }}
4950
</CBreadcrumbItem>

‎src/components/AppSidebar.vue‎

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,43 @@
11
<template>
2-
<CSidebar position="fixed" selfHiding="md" :class="sidebarClass">
2+
<CSidebar position="fixed" selfHiding="md" :unfoldable="sidebarUnfoldable" :visible="sidebarVisible">
33
<CSidebarBrand>
44
<CIcon
5-
customClasses="sidebar-brand-full"
5+
customClassName="sidebar-brand-full"
66
name="logo"
77
size="custom-size"
88
:height="35"
9-
viewBox="0 0 556 134" />
9+
viewBox="0 0 556 134"
10+
/>
1011
<CIcon
11-
customClasses="sidebar-brand-narrow"
12+
customClassName="sidebar-brand-narrow"
1213
name="logo"
1314
size="custom-size"
1415
:height="35"
1516
viewBox="0 0 110 134"
16-
/></CSidebarBrand>
17-
17+
/>
18+
</CSidebarBrand>
1819
<AppSidebarNav />
20+
<CSidebarToggler
21+
class="d-none d-lg-flex"
22+
@click="$store.commit('toggleUnfoldable')"
23+
/>
1924
</CSidebar>
2025
</template>
2126

2227
<script>
23-
import { AppSidebarNav } from "./AppSidebarNav";
28+
import { AppSidebarNav } from './AppSidebarNav'
2429
export default {
25-
name: "AppSidebar",
30+
name: 'AppSidebar',
2631
components: {
2732
AppSidebarNav,
2833
},
2934
computed: {
30-
sidebarClass () {
31-
return this.$store.state.sidebarClass
32-
}
33-
}
34-
};
35+
sidebarUnfoldable() {
36+
return this.$store.state.sidebarUnfoldable
37+
},
38+
sidebarVisible() {
39+
return this.$store.state.sidebarVisible
40+
},
41+
},
42+
}
3543
</script>

‎src/components/AppSidebarNav.js‎

Lines changed: 73 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,49 @@
1-
import { defineComponent, h, resolveComponent } from "vue";
2-
import { RouterLink } from "vue-router";
1+
import { defineComponent, h, resolveComponent } from 'vue'
2+
import { RouterLink } from 'vue-router'
33

4-
import { CSidebarNav, CNavItem, CNavGroup, CNavTitle } from "@coreui/vue";
5-
import nav from "@/_nav.js";
4+
import { CSidebarNav, CNavItem, CNavGroup, CNavTitle } from '@coreui/vue'
5+
import nav from '@/_nav.js'
66

77
const AppSidebarNav = defineComponent({
8-
name: "AppSidebarNav",
8+
name: 'AppSidebarNav',
99
components: {
1010
CNavItem,
1111
CNavGroup,
1212
CNavTitle,
1313
},
1414
setup() {
15-
const singleItem = (item) =>
16-
item.to
15+
const renderItem = (item) => {
16+
if (item.children) {
17+
return h(
18+
RouterLink,
19+
{
20+
to: item.route,
21+
custom: true,
22+
},
23+
{
24+
default: (props) =>
25+
h(
26+
resolveComponent('CNavGroup'),
27+
{
28+
visible: props.isActive,
29+
},
30+
{
31+
togglerContent: () => [
32+
h(resolveComponent('CIcon'), {
33+
customClassName: 'nav-icon',
34+
name: item.icon,
35+
}),
36+
item.name,
37+
],
38+
default: () =>
39+
item.children.map((child) => renderItem(child)),
40+
},
41+
),
42+
},
43+
)
44+
}
45+
46+
return item.to
1747
? h(
1848
RouterLink,
1949
{
@@ -27,63 +57,49 @@ const AppSidebarNav = defineComponent({
2757
{
2858
active: props.isActive,
2959
href: props.href,
30-
icon: "cil-speedometer",
3160
onClick: () => props.navigate(),
3261
},
33-
[
34-
item.icon &&
35-
h(resolveComponent("CIcon"), {
36-
customClassName: "nav-icon",
37-
name: item.icon,
38-
}),
39-
item.name,
40-
item.badge &&
41-
h(resolveComponent("CBadge"), {
42-
class: 'ms-auto',
43-
color: item.badge.color,
44-
}, item.badge.text),
45-
]
62+
{
63+
default: () => [
64+
item.icon &&
65+
h(resolveComponent('CIcon'), {
66+
customClassName: 'nav-icon',
67+
name: item.icon,
68+
}),
69+
item.name,
70+
item.badge &&
71+
h(
72+
resolveComponent('CBadge'),
73+
{
74+
class: 'ms-auto',
75+
color: item.badge.color,
76+
},
77+
{
78+
default: () => item.badge.text,
79+
}
80+
),
81+
],
82+
},
4683
),
47-
}
84+
},
4885
)
49-
: h(resolveComponent(item._name), {}, item.name);
50-
51-
const group = (item) =>
52-
h(
53-
RouterLink,
54-
{
55-
to: item.route,
56-
custom: true,
57-
},
58-
{
59-
default: (props) =>
60-
h(
61-
resolveComponent("CNavGroup"),
62-
{
63-
visible: props.isActive
64-
},
65-
{
66-
togglerContent: () => [
67-
h(resolveComponent("CIcon"), {
68-
customClassName: "nav-icon",
69-
name: item.icon,
70-
}),
71-
item.name,
72-
],
73-
default: () => item.children.map((child) => singleItem(child)),
74-
}
75-
),
76-
}
77-
);
86+
: h(
87+
resolveComponent(item._name),
88+
{},
89+
{
90+
default: () => item.name,
91+
},
92+
)
93+
}
7894

7995
return () =>
8096
h(
8197
CSidebarNav,
8298
{},
83-
nav.map((item) =>
84-
typeof item.children === "undefined" ? singleItem(item) : group(item)
85-
)
86-
);
99+
{
100+
default: () => nav.map((item) => renderItem(item)),
101+
},
102+
)
87103
},
88-
});
89-
export { AppSidebarNav };
104+
})
105+
export { AppSidebarNav }

‎src/router/index.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -121,9 +121,9 @@ const routes = [
121121
component: () => import("@/views/base/Progress.vue"),
122122
},
123123
{
124-
path: "/base/switches",
125-
name: "Switches",
126-
component: () => import("@/views/base/Switches.vue"),
124+
path: "/base/spinners",
125+
name: "Spinners",
126+
component: () => import("@/views/base/Spinners.vue"),
127127
},
128128
{
129129
path: "/base/tables",
@@ -159,8 +159,8 @@ const routes = [
159159
},
160160
{
161161
path: "/buttons/dropdowns",
162-
name: "Button Dropdowns",
163-
component: () => import("@/views/buttons/ButtonDropdowns.vue"),
162+
name: "Dropdowns",
163+
component: () => import("@/views/buttons/Dropdowns.vue"),
164164
},
165165
{
166166
path: "/buttons/button-groups",

‎src/store/index.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
import { createStore } from "vuex";
1+
import { createStore } from 'vuex'
22

33
export default createStore({
44
state: {
5-
sidebarClass: '',
5+
sidebarVisible: '',
6+
sidebarUnfoldable: false,
67
},
78
mutations: {
8-
toggleSidebar (state) {
9-
if(state.sidebarClass === ''){
10-
state.sidebarClass = 'sidebar-self-hiding-xxl'
11-
}else{
12-
state.sidebarClass = ''
13-
}
14-
}
9+
toggleSidebar(state) {
10+
state.sidebarVisible = !state.sidebarVisible
11+
},
12+
toggleUnfoldable(state) {
13+
state.sidebarUnfoldable = !state.sidebarUnfoldable
14+
},
1515
},
1616
actions: {},
1717
modules: {},
18-
});
18+
})

0 commit comments

Comments
 (0)