You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
2.1 KiB
90 lines
2.1 KiB
6 years ago
|
<template>
|
||
|
<div class="sidebar"
|
||
|
:style="sidebarStyle"
|
||
|
:data-color="backgroundColor"
|
||
|
:data-image="backgroundImage">
|
||
|
<div class="sidebar-wrapper">
|
||
|
<div class="logo">
|
||
|
<a href="#" class="simple-text">
|
||
|
<img src="static/img/logo.png" alt="">
|
||
|
{{title}}
|
||
|
</a>
|
||
|
</div>
|
||
|
|
||
|
<slot name="content"></slot>
|
||
|
<ul class="nav">
|
||
|
<!--By default vue-router adds an active class to each route link. This way the links are colored when clicked-->
|
||
|
<slot>
|
||
|
<sidebar-link v-for="(link,index) in sidebarLinks"
|
||
|
:key="link.name + index"
|
||
|
:to="link.path"
|
||
|
@click="closeNavbar"
|
||
|
:link="link">
|
||
|
<i :class="link.icon"></i>
|
||
|
<p>{{link.name}}</p>
|
||
|
</sidebar-link>
|
||
|
</slot>
|
||
|
</ul>
|
||
|
</div>
|
||
|
</div>
|
||
|
</template>
|
||
|
<script>
|
||
|
import SidebarLink from './SidebarLink.vue'
|
||
|
|
||
|
export default {
|
||
|
components: {
|
||
|
SidebarLink
|
||
|
},
|
||
|
props: {
|
||
|
title: {
|
||
|
type: String,
|
||
|
default: 'ReCast'
|
||
|
},
|
||
|
backgroundColor: {
|
||
|
type: String,
|
||
|
default: 'purple',
|
||
|
validator: (value) => {
|
||
|
let acceptedValues = ['', 'blue', 'azure', 'green', 'orange', 'red', 'purple', 'black']
|
||
|
return acceptedValues.indexOf(value) !== -1
|
||
|
}
|
||
|
},
|
||
|
backgroundImage: {
|
||
|
type: String,
|
||
|
default: 'static/img/sidebar-5.jpg'
|
||
|
},
|
||
|
activeColor: {
|
||
|
type: String,
|
||
|
default: 'success',
|
||
|
validator: (value) => {
|
||
|
let acceptedValues = ['primary', 'info', 'success', 'warning', 'danger']
|
||
|
return acceptedValues.indexOf(value) !== -1
|
||
|
}
|
||
|
},
|
||
|
sidebarLinks: {
|
||
|
type: Array,
|
||
|
default: () => []
|
||
|
},
|
||
|
autoClose: {
|
||
|
type: Boolean,
|
||
|
default: true
|
||
|
}
|
||
|
},
|
||
|
provide () {
|
||
|
return {
|
||
|
autoClose: this.autoClose
|
||
|
}
|
||
|
},
|
||
|
computed: {
|
||
|
sidebarStyle () {
|
||
|
return {
|
||
|
backgroundImage: `url(${this.backgroundImage})`
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
</script>
|
||
|
<style>
|
||
|
|
||
|
</style>
|