xidedix
de7ebf32ff
- refactor: raw html to b-row, b-col, b-card, b-button components - fix: Cards.vue: change variant="accent- to class="card-accent- - refactor: Modal's ok-button variants - refactor: forms with validation feedback - update: bootstrap-vue to 1.1.0 - update: to vue: 2.5.6
61 lines
1.9 KiB
Vue
61 lines
1.9 KiB
Vue
<template>
|
|
<header class="app-header navbar">
|
|
<button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button" @click="mobileSidebarToggle">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<b-link class="navbar-brand" to="#"></b-link>
|
|
<button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" @click="sidebarToggle">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<b-navbar-nav class="d-md-down-none">
|
|
<b-nav-item class="px-3">Dashboard</b-nav-item>
|
|
<b-nav-item class="px-3">Users</b-nav-item>
|
|
<b-nav-item class="px-3">Settings</b-nav-item>
|
|
</b-navbar-nav>
|
|
<b-navbar-nav class="ml-auto">
|
|
<b-nav-item class="d-md-down-none">
|
|
<i class="icon-bell"></i>
|
|
<b-badge pill variant="danger">5</b-badge>
|
|
</b-nav-item>
|
|
<b-nav-item class="d-md-down-none">
|
|
<i class="icon-list"></i>
|
|
</b-nav-item>
|
|
<b-nav-item class="d-md-down-none">
|
|
<i class="icon-location-pin"></i>
|
|
</b-nav-item>
|
|
<HeaderDropdown/>
|
|
</b-navbar-nav>
|
|
<button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" @click="asideToggle">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
</header>
|
|
</template>
|
|
<script>
|
|
import HeaderDropdown from './HeaderDropdown.vue'
|
|
|
|
export default {
|
|
name: 'header',
|
|
components: {
|
|
HeaderDropdown
|
|
},
|
|
methods: {
|
|
sidebarToggle (e) {
|
|
e.preventDefault()
|
|
document.body.classList.toggle('sidebar-hidden')
|
|
},
|
|
sidebarMinimize (e) {
|
|
e.preventDefault()
|
|
document.body.classList.toggle('sidebar-minimized')
|
|
},
|
|
mobileSidebarToggle (e) {
|
|
e.preventDefault()
|
|
document.body.classList.toggle('sidebar-mobile-show')
|
|
},
|
|
asideToggle (e) {
|
|
e.preventDefault()
|
|
document.body.classList.toggle('aside-menu-hidden')
|
|
}
|
|
}
|
|
}
|
|
</script>
|