Merge pull request #624 from dod-ccpo/toggle-sidenav

Toggle sidenav

atst/routes/__init__.py

@@ -1,5 +1,14 @@
 import urllib.parse as url
-from flask import Blueprint, render_template, g, redirect, session, url_for, request
+from flask import (
+    Blueprint,
+    render_template,
+    g,
+    redirect,
+    session,
+    url_for,
+    request,
+    make_response,
+)
 
 from flask import current_app as app
 from jinja2.exceptions import TemplateNotFound
@@ -131,7 +140,9 @@ def login_redirect():
 @bp.route("/logout")
 def logout():
     _logout()
-    return redirect(url_for(".root"))
+    response = make_response(redirect(url_for(".root")))
+    response.set_cookie("expandSidenav", "", expires=0)
+    return response
 
 
 @bp.route("/activity-history")

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

static/icons/angle-double-left-solid.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-double-left" class="svg-inline--fa fa-angle-double-left fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"></path></svg>

static/icons/angle-double-right-solid.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-double-right" class="svg-inline--fa fa-angle-double-right fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"></path></svg>

styles/elements/_icons.scss

@@ -67,6 +67,10 @@
     @include icon-color($color-gray);
   }
 
+  &.icon--blue {
+    @include icon-color($color-blue-darker);
+  }
+
   &.icon--medium {
     @include icon-size(12);
   }

styles/elements/_sidenav.scss

@@ -1,8 +1,18 @@
-.sidenav {
+@mixin sidenav__header {
-  @include hide;
+  padding: $gap ($gap * 2);
+  font-size: $small-font-size;
+  font-weight: bold;
+}
 
+.sidenav-container {
+  position: relative;
+
+  .global-navigation.sidenav {
+    height: 100%;
+  }
+
+  .sidenav {
     @include media($large-screen) {
-    @include unhide;
       width: 25rem;
       margin: 0px;
     }
@@ -10,12 +20,21 @@
     box-shadow: 0 6px 18px 0 rgba(48,58,65,0.15);
 
     .sidenav__title {
-    color: $color-gray-dark;
+      @include sidenav__header;
-    padding: $gap ($gap * 2);
       text-transform: uppercase;
+      width: 50%;
+      color: $color-gray-dark;
       opacity: 0.54;
-    font-size: $small-font-size;
+    }
-    font-weight: bold;
+
+    .sidenav__toggle {
+      @include sidenav__header;
+      float: right;
+      color: $color-blue-darker;
+
+      .toggle-arrows {
+        vertical-align: middle;
+      }
     }
 
     ul {
@@ -151,10 +170,7 @@
   .sidenav--minimized {
     @extend .sidenav;
 
-  @include unhide;
+    width: auto;
     margin: 0px;
-
-  @include media($large-screen) {
-    @include hide;
   }
 }

templates/navigation/global_sidenav.html

@@ -2,7 +2,20 @@
 {% from "components/sidenav_item.html" import SidenavItem %}
 
 
-<div class="global-navigation sidenav">
+<div v-cloak 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">
+        <template v-if="props.isVisible">
+          {{ Icon('angle-double-left-solid', classes="toggle-arrows icon--blue") }}
+          Hide
+        </template>
+        <template v-else>
+          Show
+          {{ Icon('angle-double-right-solid', classes="toggle-arrows icon--blue") }}
+        </template>
+      </a>
+      <div v-if="props.isVisible">
         <div class="sidenav__title">Portfolios</div>
         <ul class="sidenav__list--padded">
           {% for other_portfolio in portfolios|sort(attribute='name') %}
@@ -18,7 +31,6 @@
           {{ Icon("plus", classes="sidenav__link-icon") }}
         </a>
       </div>
-
+    </div>
-<div class="global-navigation sidenav--minimized">
+  </template>
-  <div class="sidenav__title">Show >>></div>
 </div>