Skip to content

Commit a004f63

Browse files
mrholekmrholek
committed
Data driven sidebar component. Closed #220 
1 parent 6018ee5 commit a004f63

File tree

14 files changed

+403
-112
lines changed

14 files changed

+403
-112
lines changed

‎Vue_Full_Project/src/_nav.js

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
export default {
2+
items: [
3+
{
4+
name: 'Dashboard',
5+
url: '/dashboard',
6+
icon: 'icon-speedometer',
7+
badge: {
8+
variant: 'primary',
9+
text: 'NEW'
10+
}
11+
},
12+
{
13+
title: true,
14+
name: 'UI elements'
15+
},
16+
{
17+
name: 'Components',
18+
url: '/components',
19+
icon: 'icon-puzzle',
20+
children: [
21+
{
22+
name: 'Buttons',
23+
url: '/components/buttons',
24+
icon: 'icon-puzzle'
25+
},
26+
{
27+
name: 'Social Buttons',
28+
url: '/components/social-buttons',
29+
icon: 'icon-puzzle'
30+
},
31+
{
32+
name: 'Cards',
33+
url: '/components/cards',
34+
icon: 'icon-puzzle'
35+
},
36+
{
37+
name: 'Forms',
38+
url: '/components/forms',
39+
icon: 'icon-puzzle'
40+
},
41+
{
42+
name: 'Modals',
43+
url: '/components/modals',
44+
icon: 'icon-puzzle'
45+
},
46+
{
47+
name: 'Switches',
48+
url: '/components/switches',
49+
icon: 'icon-puzzle'
50+
},
51+
{
52+
name: 'Tables',
53+
url: '/components/tables',
54+
icon: 'icon-puzzle'
55+
}
56+
]
57+
},
58+
{
59+
name: 'Icons',
60+
url: '/icons',
61+
icon: 'icon-star',
62+
children: [
63+
{
64+
name: 'Font Awesome',
65+
url: '/icons/font-awesome',
66+
icon: 'icon-star'
67+
},
68+
{
69+
name: 'Simple Line Icons',
70+
url: '/icons/simple-line-icons',
71+
icon: 'icon-star'
72+
}
73+
]
74+
},
75+
{
76+
name: 'Widgets',
77+
url: '/widgets',
78+
icon: 'icon-calculator',
79+
badge: {
80+
variant: 'danger',
81+
text: 'NEW'
82+
}
83+
},
84+
{
85+
name: 'Charts',
86+
url: '/charts',
87+
icon: 'icon-pie-chart'
88+
},
89+
{
90+
divider: true
91+
},
92+
{
93+
title: true,
94+
name: 'Extras'
95+
},
96+
{
97+
name: 'Pages',
98+
url: '/pages',
99+
icon: 'icon-star',
100+
children: [
101+
{
102+
name: 'Login',
103+
url: '/pages/login',
104+
icon: 'icon-star'
105+
},
106+
{
107+
name: 'Register',
108+
url: '/pages/register',
109+
icon: 'icon-star'
110+
},
111+
{
112+
name: 'Error 404',
113+
url: '/pages/404',
114+
icon: 'icon-star'
115+
},
116+
{
117+
name: 'Error 500',
118+
url: '/pages/500',
119+
icon: 'icon-star'
120+
}
121+
]
122+
}
123+
]
124+
}

‎Vue_Full_Project/src/components/Navbar.vue

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎Vue_Full_Project/src/components/Sidebar.vue

Lines changed: 48 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,63 @@
11
<template>
22
<div class="sidebar">
33
<nav class="sidebar-nav">
4+
<div slot="header"></div>
45
<ul class="nav">
5-
<li class="nav-item">
6-
<router-link :to="'/dashboard'" class="nav-link"><i class="icon-speedometer"></i> Dashboard <span class="badge badge-info">NEW</span></router-link>
7-
</li>
8-
<li class="nav-title">
9-
UI Elements
10-
</li>
11-
<router-link tag="li" class="nav-item nav-dropdown" :to="{ path: '/components'}" disabled>
12-
<div class="nav-link nav-dropdown-toggle" @click="handleClick"><i class="icon-puzzle"></i> Components</div>
13-
<ul class="nav-dropdown-items">
14-
<li class="nav-item">
15-
<router-link :to="'/components/buttons'" class="nav-link" exact><i class="icon-puzzle"></i> Buttons</router-link>
16-
</li>
17-
<li class="nav-item">
18-
<router-link :to="'/components/social-buttons'" class="nav-link" exact><i class="icon-puzzle"></i> Social Buttons</router-link>
19-
</li>
20-
<li class="nav-item">
21-
<router-link :to="'/components/cards'" class="nav-link" exact><i class="icon-puzzle"></i> Cards</router-link>
22-
</li>
23-
<li class="nav-item">
24-
<router-link :to="'/components/forms'" class="nav-link" exact><i class="icon-puzzle"></i> Forms</router-link>
25-
</li>
26-
<li class="nav-item">
27-
<router-link :to="'/components/modals'" class="nav-link" exact><i class="icon-puzzle"></i> Modals</router-link>
28-
</li>
29-
<li class="nav-item">
30-
<router-link :to="'/components/switches'" class="nav-link" exact><i class="icon-puzzle"></i> Switches</router-link>
31-
</li>
32-
<li class="nav-item">
33-
<router-link :to="'/components/tables'" class="nav-link" exact><i class="icon-puzzle"></i> Tables</router-link>
34-
</li>
35-
</ul>
36-
</router-link>
37-
<router-link tag="li" class="nav-item nav-dropdown" :to="{ path: '/icons'}" disabled>
38-
<div class="nav-link nav-dropdown-toggle" @click="handleClick"><i class="icon-star"></i> Icons</div>
39-
<ul class="nav-dropdown-items">
40-
<li class="nav-item">
41-
<router-link :to="'/icons/font-awesome'" class="nav-link" exact><i class="icon-star"></i> Font Awesome</router-link>
42-
</li>
43-
<li class="nav-item">
44-
<router-link :to="'/icons/simple-line-icons'" class="nav-link" exact><i class="icon-star"></i> Simple Line Icons</router-link>
45-
</li>
46-
</ul>
47-
</router-link>
48-
<li class="nav-item">
49-
<router-link :to="'/widgets'" class="nav-link" exact><i class="icon-calculator"></i> Widgets <span class="badge badge-info">NEW</span></router-link>
50-
</li>
51-
<li class="nav-item">
52-
<router-link :to="'/charts'" class="nav-link" exact><i class="icon-pie-chart"></i> Charts</router-link>
53-
</li>
54-
<li class="divider"></li>
55-
<li class="nav-title">
56-
Extras
57-
</li>
58-
<li class="nav-item nav-dropdown">
59-
<a class="nav-link nav-dropdown-toggle" href="#" @click="handleClick"><i class="icon-star"></i> Pages</a>
60-
<ul class="nav-dropdown-items">
61-
<li class="nav-item">
62-
<router-link :to="'/pages/login'" class="nav-link" exact><i class="icon-star"></i> Login</router-link>
63-
</li>
64-
<li class="nav-item">
65-
<router-link :to="'/pages/register'" class="nav-link" exact><i class="icon-star"></i> Register</router-link>
66-
</li>
67-
<li class="nav-item">
68-
<router-link :to="'/pages/404'" class="nav-link" exact><i class="icon-star"></i> Error 404</router-link>
69-
</li>
70-
<li class="nav-item">
71-
<router-link :to="'/pages/500'" class="nav-link" exact><i class="icon-star"></i> Error 500</router-link>
72-
</li>
73-
</ul>
6+
<li class="nav-item" v-for="(item, index) in navItems">
7+
<template v-if="item.title">
8+
<SidebarNavTitle :name="item.name"/>
9+
</template>
10+
<template v-else-if="item.divider">
11+
<li class="divider"></li>
12+
</template>
13+
<template v-else>
14+
<template v-if="item.children">
15+
<SidebarNavDropdown :name="item.name" :url="item.url" :icon="item.icon">
16+
<template v-for="(child, index) in item.children">
17+
<template v-if="child.children">
18+
<SidebarNavDropdown :name="child.name" :url="child.url" :icon="child.icon">
19+
<li class="nav-item" v-for="(child, index) in item.children">
20+
<SidebarNavLink :name="child.name" :url="child.url" :icon="child.icon" :badge="child.badge"/>
21+
</li>
22+
</SidebarNavDropdown>
23+
</template>
24+
<template v-else>
25+
<li class="nav-item">
26+
<SidebarNavLink :name="child.name" :url="child.url" :icon="child.icon" :badge="child.badge"/>
27+
</li>
28+
</template>
29+
</template>
30+
</SidebarNavDropdown>
31+
</template>
32+
<template v-else>
33+
<SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge"/>
34+
</template>
35+
</template>
7436
</li>
7537
</ul>
38+
<slot></slot>
39+
<div slot="footer"></div>
7640
</nav>
7741
</div>
7842
</template>
7943
<script>
80-
44+
import SidebarNavDropdown from './SidebarNavDropdown'
45+
import SidebarNavLink from './SidebarNavLink'
46+
import SidebarNavTitle from './SidebarNavTitle'
8147
export default {
8248
name: 'sidebar',
49+
props: {
50+
navItems: {
51+
type: Array,
52+
required: true,
53+
default: () => []
54+
}
55+
},
56+
components: {
57+
SidebarNavDropdown,
58+
SidebarNavLink,
59+
SidebarNavTitle
60+
},
8361
methods: {
8462
handleClick (e) {
8563
e.preventDefault()

‎Vue_Full_Project/src/components/SidebarNavDropdown.vue

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<template>
2+
<router-link tag="li" class="nav-item nav-dropdown" :to="url" disabled>
3+
<div class="nav-link nav-dropdown-toggle" @click="handleClick"><i :class="icon"></i> {{name}}</div>
4+
<ul class="nav-dropdown-items">
5+
<slot></slot>
6+
</ul>
7+
</router-link>
8+
</template>
9+
10+
<script>
11+
export default {
12+
props: {
13+
name: {
14+
type: String,
15+
default: ''
16+
},
17+
url: {
18+
type: String,
19+
default: ''
20+
},
21+
icon: {
22+
type: String,
23+
default: ''
24+
}
25+
},
26+
methods: {
27+
handleClick (e) {
28+
e.preventDefault()
29+
e.target.parentElement.classList.toggle('open')
30+
}
31+
}
32+
}
33+
</script>

‎Vue_Full_Project/src/components/SidebarNavLink.vue

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<router-link :to="url" class="nav-link">
3+
<i :class="icon"></i> {{name}}
4+
<b-badge :variant="badge.variant">{{badge.text}}</b-badge>
5+
</router-link>
6+
</template>
7+
8+
<script>
9+
export default {
10+
name: 'sidebar-nav-link',
11+
props: {
12+
name: {
13+
type: String,
14+
default: ''
15+
},
16+
url: {
17+
type: String,
18+
default: ''
19+
},
20+
icon: {
21+
type: String,
22+
default: ''
23+
},
24+
badge: {
25+
default: ''
26+
}
27+
}
28+
}
29+
</script>

‎Vue_Full_Project/src/components/SidebarNavTitle.vue

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<li class="nav-title">
3+
{{name}}
4+
</li>
5+
</template>
6+
7+
<script>
8+
export default {
9+
props: {
10+
name: {
11+
type: String,
12+
default: ''
13+
}
14+
}
15+
}
16+
</script>

‎Vue_Full_Project/src/containers/Full.vue

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="app">
33
<AppHeader/>
44
<div class="app-body">
5-
<Sidebar/>
5+
<Sidebar :navItems="nav"/>
66
<main class="main">
77
<breadcrumb :list="list"/>
88
<div class="container-fluid">
@@ -16,11 +16,8 @@
1616
</template>
1717

1818
<script>
19-
import AppHeader from '../components/Header'
20-
import Sidebar from '../components/Sidebar'
21-
import AppAside from '../components/Aside'
22-
import AppFooter from '../components/Footer'
23-
import Breadcrumb from '../components/Breadcrumb'
19+
import nav from '../_nav'
20+
import { Header as AppHeader, Sidebar, Aside as AppAside, Footer as AppFooter, Breadcrumb } from '../components/'
2421
2522
export default {
2623
name: 'full',
@@ -31,11 +28,15 @@ export default {
3128
AppFooter,
3229
Breadcrumb
3330
},
31+
data () {
32+
return {
33+
nav: nav.items
34+
}
35+
},
3436
computed: {
3537
name () {
3638
return this.$route.name
3739
},
38-
3940
list () {
4041
return this.$route.matched
4142
}

0 commit comments

Comments
 (0)