156 lines
4.8 KiB
Vue
156 lines
4.8 KiB
Vue
<template lang="pug">
|
|
.navigator
|
|
.navigator-bar
|
|
.navigator-fab
|
|
.navigator-fab-button(@click='toggleMainMenu')
|
|
svg.icons.is-24(role='img')
|
|
title Navigation
|
|
use(xlink:href='#gg-apps-grid')
|
|
.navigator-title
|
|
h1 {{ siteTitle }}
|
|
.navigator-subtitle(:class='subtitleClass')
|
|
transition(name='navigator-subtitle-icon')
|
|
svg.icons.is-24.navigator-subtitle-icon(role='img', v-if='subtitleIcon')
|
|
title {{subtitleText}}
|
|
use(:xlink:href='subtitleIconClass')
|
|
h2 {{subtitleText}}
|
|
.navigator-action
|
|
.navigator-action-item(:class='{"is-active": userMenuShown}', @click='toggleUserMenu')
|
|
svg.icons.is-32(role='img')
|
|
title User
|
|
use(xlink:href='#nc-user-circle')
|
|
transition(name='navigator-action-item-dropdown')
|
|
ul.navigator-action-item-dropdown(v-show='userMenuShown', v-cloak)
|
|
li
|
|
label Account
|
|
svg.icons.is-24(role='img')
|
|
title Account
|
|
use(xlink:href='#nc-man-green')
|
|
li(@click='logout')
|
|
label Sign out
|
|
svg.icons.is-24(role='img')
|
|
title Sign Out
|
|
use(xlink:href='#nc-exit')
|
|
transition(name='navigator-sd')
|
|
.navigator-sd(v-show='sdShown', v-cloak)
|
|
.navigator-sd-actions
|
|
a.is-active(href='', title='Search')
|
|
svg.icons.is-24(role='img')
|
|
title Search
|
|
use(xlink:href='#gg-search')
|
|
a(href='', title='New Document')
|
|
svg.icons.is-24(role='img')
|
|
title New Document
|
|
use(xlink:href='#nc-plus-circle')
|
|
a(href='', title='Edit Document')
|
|
svg.icons.is-24(role='img')
|
|
title Edit Document
|
|
use(xlink:href='#nc-pen-red')
|
|
a(href='', title='History')
|
|
svg.icons.is-24(role='img')
|
|
title History
|
|
use(xlink:href='#nc-restore')
|
|
a(href='', title='View Source')
|
|
svg.icons.is-24(role='img')
|
|
title View Source
|
|
use(xlink:href='#nc-code-editor')
|
|
a(href='', title='Move Document')
|
|
svg.icons.is-24(role='img')
|
|
title Move Document
|
|
use(xlink:href='#nc-move')
|
|
a(href='', title='Delete Document')
|
|
svg.icons.is-24(role='img')
|
|
title Delete Document
|
|
use(xlink:href='#nc-trash')
|
|
.navigator-sd-search
|
|
input(type='text', ref='iptSearch', placeholder='Search')
|
|
.navigator-sd-results
|
|
.navigator-sd-footer
|
|
a(href='', title='Settings')
|
|
svg.icons.is-24(role='img')
|
|
title Settings
|
|
use(xlink:href='#nc-gear')
|
|
a(href='', title='Users')
|
|
svg.icons.is-24(role='img')
|
|
title Users
|
|
use(xlink:href='#nc-users')
|
|
a(href='', title='Assets')
|
|
svg.icons.is-24(role='img')
|
|
title Assets
|
|
use(xlink:href='#nc-image')
|
|
</template>
|
|
|
|
<script>
|
|
/* global siteConfig */
|
|
|
|
import { mapState } from 'vuex'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
sdShown: false,
|
|
userMenuShown: false
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState('navigator', [
|
|
'subtitleShown',
|
|
'subtitleStyle',
|
|
'subtitleText',
|
|
'subtitleIcon'
|
|
]),
|
|
siteTitle() {
|
|
return siteConfig.title
|
|
},
|
|
subtitleClass() {
|
|
return {
|
|
'is-active': this.subtitleShown,
|
|
'is-error': this.subtitleStyle === 'error',
|
|
'is-warning': this.subtitleStyle === 'warning',
|
|
'is-success': this.subtitleStyle === 'success',
|
|
'is-info': this.subtitleStyle === 'info'
|
|
}
|
|
},
|
|
subtitleIconClass() { return '#' + this.subtitleIcon }
|
|
},
|
|
methods: {
|
|
toggleMainMenu() {
|
|
this.sdShown = !this.sdShown
|
|
this.userMenuShown = false
|
|
if (this.sdShown) {
|
|
this.$nextTick(() => {
|
|
this.bindOutsideClick()
|
|
this.$refs.iptSearch.focus()
|
|
})
|
|
} else {
|
|
this.unbindOutsideClick()
|
|
}
|
|
},
|
|
toggleUserMenu() {
|
|
this.userMenuShown = !this.userMenuShown
|
|
this.sdShown = false
|
|
if (this.userMenuShown) {
|
|
this.bindOutsideClick()
|
|
} else {
|
|
this.unbindOutsideClick()
|
|
}
|
|
},
|
|
bindOutsideClick() {
|
|
document.addEventListener('mousedown', this.handleOutsideClick, false)
|
|
},
|
|
unbindOutsideClick() {
|
|
document.removeEventListener('mousedown', this.handleOutsideClick, false)
|
|
},
|
|
handleOutsideClick(ev) {
|
|
if (!this.$el.contains(ev.target)) {
|
|
this.sdShown = false
|
|
this.userMenuShown = false
|
|
}
|
|
},
|
|
logout() {
|
|
window.location.assign(this.$helpers.resolvePath('logout'))
|
|
}
|
|
}
|
|
}
|
|
</script>
|