css and content fixes to sidebar toggle

styles/elements/_sidenav.scss

@@ -1,12 +1,17 @@
 @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-container {
+  position: relative;
+
+  .global-navigation.sidenav {
+    height: 100%;
+  }
+}
+
 .sidenav {
   @include hide;
 
@@ -20,12 +25,16 @@
 
   .sidenav__title {
     @include sidenav__header;
+    text-transform: uppercase;
     width: 50%;
+    color: $color-gray-dark;
+    opacity: 0.54;
   }
 
   .sidenav__toggle {
     @include sidenav__header;
     float: right;
+    color: $color-blue-darker;
   }
 
   ul {

templates/navigation/global_sidenav.html

@@ -2,15 +2,15 @@
 {% from "components/sidenav_item.html" import SidenavItem %}
 
 
-<div is="toggler">
+<div is="toggler" 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">
-          <<< Hide
+          << Hide
         </template>
         <template v-else>
-          Show >>>
+          Show >>
         </template>
       </a>
       <div v-if="props.isVisible">