diff --git a/styles/elements/_sidenav.scss b/styles/elements/_sidenav.scss
index dcfcfe10..02d5ec2e 100644
--- a/styles/elements/_sidenav.scss
+++ b/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;
-  }
 }
diff --git a/templates/navigation/global_sidenav.html b/templates/navigation/global_sidenav.html
index 00783943..e784b22e 100644
--- a/templates/navigation/global_sidenav.html
+++ b/templates/navigation/global_sidenav.html
@@ -2,23 +2,33 @@
 {% from "components/sidenav_item.html" import SidenavItem %}
 
 
-<div class="global-navigation sidenav">
-  <div class="sidenav__title">Portfolios</div>
-  <ul class="sidenav__list--padded">
-    {% for other_portfolio in portfolios|sort(attribute='name') %}
-      {{ SidenavItem(other_portfolio.name,
-        href=url_for("portfolios.show_portfolio", portfolio_id=other_portfolio.id),
-        active=(other_portfolio.id | string) == request.view_args.get('portfolio_id')
-        ) }}
-    {% endfor %}
-  </ul>
-  <div class="sidenav__divider--small"></div>
-  <a class="sidenav__link sidenav__link--add" href="{{ url_for("task_orders.get_started") }}" title="Fund a New Portfolio">
-    <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 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') %}
+            {{ SidenavItem(other_portfolio.name,
+              href=url_for("portfolios.show_portfolio", portfolio_id=other_portfolio.id),
+              active=(other_portfolio.id | string) == request.view_args.get('portfolio_id')
+              ) }}
+          {% endfor %}
+        </ul>
+        <div class="sidenav__divider--small"></div>
+        <a class="sidenav__link sidenav__link--add" href="{{ url_for("task_orders.get_started") }}" title="Fund a New Portfolio">
+          <span class="sidenav__link-label">Fund a New Portfolio</span>
+          {{ Icon("plus", classes="sidenav__link-icon") }}
+        </a>
+      </div>
+    </div>
+  </template>
 </div>