set cookie for sidebar preference

js/components/sidenav_toggler.js

@@ -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=/'
+    },
+  },
+}

js/components/toggler.js

@@ -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
-    },
-  },
 }

js/index.js

@@ -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() {

js/mixins/toggle.js

@@ -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
+    },
+  },
+}

templates/navigation/global_sidenav.html

@@ -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">