Complete and flexible topbar by metronic.
Install
npm i --save @allinmkt/vue-topbar
How to
Props
- user: User informations
- menu: Topbar items
- list: Notification items
In any of your vue files:
JS:
import KTHeader from '@allinmkt/vue-topbar'
export default {
name: 'MyPage',
components: {
KTHeader
},
data() {
return {
user: {
message: "Hello",
name: "James Bond",
profession: "Application Developer",
email: "jb@gmail.com"
},
menu: [
{
name: "Dashboard",
href: "/dashboard"
},
{
name: "Builder",
href: "/builder"
},
{
name: "Test",
href: "#",
submenu: [
{
name: "Test",
icon: "menu-icon flaticon2-list-2",
href: "/test"
},
{
name: "Test2",
icon: "menu-icon flaticon2-list-2",
href: "/test"
}
]
}
],
list: [
{
title: "5 new user generated report",
desc: "Reports based on sales",
icon: "flaticon-bell text-success"
},
{
title: "2 new items submited",
desc: "by Grog John",
icon: "flaticon2-box text-danger"
},
{
title: "79 PSD files generated",
desc: "Reports based on sales",
icon: "flaticon-psd text-primary"
},
{
title: "$2900 worth producucts sold",
desc: "Total 234 items",
icon: "flaticon2-supermarket text-warning"
}
]
};
}
}
Template:
<template>
<div>
<KTHeader :user="user" :menu="menu" :list="list"></KTHeader>
</div>
</template>