fifi97
61 lines
1.6 KiB
Vue
61 lines
1.6 KiB
Vue
<template>
|
|
<div>
|
|
<ol class="list-reset flex text-grey-dark mb-4 rounded">
|
|
<li class="bg-gray-500 py-2 px-4 rounded text-white">
|
|
<a :href="redirectHome()"><i class="far fa-folder mr-2"></i>Home</a>
|
|
</li>
|
|
<li class="mt-2"><span class="mx-2"><i class="fas fa-angle-double-right"></i></span></li>
|
|
<template v-for="(item,i) in items">
|
|
<template v-if="(items.length-1) == i">
|
|
<li class="bg-yellow-600 py-2 px-4 rounded text-white" :key="'last' + i">
|
|
<a href="#">
|
|
<i class="mr-2" :class="item.icon"></i>
|
|
{{ item.title }}</a>
|
|
</li>
|
|
</template>
|
|
<template v-else>
|
|
<li class="bg-gray-500 py-2 px-4 rounded text-white" :key="i">
|
|
<a :href="redirectUrl(item.url)"><i class="mr-2" :class="item.icon"></i> {{ item.title }}</a>
|
|
</li>
|
|
<li class="mt-2" :key="'A' + i">
|
|
<span class="mx-2"><i class="fas fa-angle-double-right"></i></span>
|
|
</li>
|
|
</template>
|
|
|
|
</template>
|
|
</ol>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default{
|
|
props:{
|
|
items: {
|
|
type: Array,
|
|
default: () => [
|
|
{
|
|
title: "Library",
|
|
icon:"far fa-folder",
|
|
url:document.location.origin
|
|
},
|
|
{
|
|
title: "Dashboard",
|
|
icon:"fas fa-columns",
|
|
url:document.location.origin
|
|
}
|
|
]
|
|
}
|
|
},
|
|
methods:{
|
|
redirectHome: function(){
|
|
return '/';
|
|
},
|
|
redirectUrl: function(url){
|
|
return url;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|