basic working sidenav

styles/elements/_sidenav.scss

@@ -1,3 +1,12 @@
+@mixin sidenav__header {
+  color: $color-gray-dark;
+  padding: $gap ($gap * 2);
+  text-transform: uppercase;
+  opacity: 0.54;
+  font-size: $small-font-size;
+  font-weight: bold;
+}
+
 .sidenav {
   @include hide;
 
@@ -10,12 +19,13 @@
   box-shadow: 0 6px 18px 0 rgba(48,58,65,0.15);
 
   .sidenav__title {
-    color: $color-gray-dark;
-    padding: $gap ($gap * 2);
-    text-transform: uppercase;
-    opacity: 0.54;
-    font-size: $small-font-size;
-    font-weight: bold;
+    @include sidenav__header;
+    width: 50%;
+  }
+
+  .sidenav__toggle {
+    @include sidenav__header;
+    float: right;
   }
 
   ul {
@@ -153,8 +163,4 @@
 
   @include unhide;
   margin: 0px;
-
-  @include media($large-screen) {
-    @include hide;
-  }
 }

templates/navigation/global_sidenav.html

@@ -2,7 +2,18 @@
 {% from "components/sidenav_item.html" import SidenavItem %}
 
 
-<div class="global-navigation sidenav">
+<div is="toggler">
+  <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">
+          <<< Hide
+        </template>
+        <template v-else>
+          Show >>>
+        </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') %}
@@ -17,8 +28,7 @@
           <span class="sidenav__link-label">Fund a New Portfolio</span>
           {{ Icon("plus", classes="sidenav__link-icon") }}
         </a>
-</div>
-
-<div class="global-navigation sidenav--minimized">
-  <div class="sidenav__title">Show >>></div>
+      </div>
+    </div>
+  </template>
 </div>