set cookie for sidebar preference

This commit is contained in:
dandds 2019-02-11 13:52:18 -05:00
parent cfd871716b
commit 35b87ff091
5 changed files with 60 additions and 23 deletions

View File

@ -0,0 +1,30 @@
import ToggleMixin from '../mixins/toggle'
const cookieName = 'expandSidenav'
export default {
name: 'sidenav-toggler',
mixins: [ToggleMixin],
props: {
defaultVisible: {
type: Boolean,
default: function() {
if (document.cookie.match(cookieName)) {
return !!document.cookie.match(cookieName + ' *= *true')
} else {
return true
}
},
},
},
methods: {
toggle: function(e) {
e.preventDefault()
this.isVisible = !this.isVisible
document.cookie = cookieName + '=' + this.isVisible + '; path=/'
},
},
}

View File

@ -1,32 +1,14 @@
import ToggleMixin from '../mixins/toggle'
export default {
name: 'toggler',
mixins: [ToggleMixin],
props: {
defaultVisible: {
type: Boolean,
default: () => false,
},
},
data: function() {
return {
isVisible: this.defaultVisible,
}
},
render: function(createElement) {
return createElement(this.$vnode.data.tag, [
this.$scopedSlots.default({
isVisible: this.isVisible,
toggle: this.toggle,
}),
])
},
methods: {
toggle: function(e) {
e.preventDefault()
this.isVisible = !this.isVisible
},
},
}

View File

@ -33,6 +33,7 @@ import RequestsList from './components/requests_list'
import ConfirmationPopover from './components/confirmation_popover'
import { isNotInVerticalViewport } from './lib/viewport'
import DateSelector from './components/date_selector'
import SidenavToggler from './components/sidenav_toggler'
Vue.config.productionTip = false
@ -68,6 +69,7 @@ const app = new Vue({
uploadinput,
DateSelector,
EditOfficerForm,
SidenavToggler,
},
mounted: function() {

23
js/mixins/toggle.js Normal file
View File

@ -0,0 +1,23 @@
export default {
data: function() {
return {
isVisible: this.defaultVisible,
}
},
render: function(createElement) {
return createElement(this.$vnode.data.tag, [
this.$scopedSlots.default({
isVisible: this.isVisible,
toggle: this.toggle,
}),
])
},
methods: {
toggle: function(e) {
e.preventDefault()
this.isVisible = !this.isVisible
},
},
}

View File

@ -2,7 +2,7 @@
{% from "components/sidenav_item.html" import SidenavItem %}
<div is="toggler" class="sidenav-container">
<div is="SidenavToggler" class="sidenav-container">
<template slot-scope='props'>
<div v-bind:class="{'global-navigation': true, 'sidenav': props.isVisible, 'sidenav--minimized': !props.isVisible}">
<a href="#" v-on:click="props.toggle" class="sidenav__toggle">