Scroll list of portfolios in sidenav

styles/elements/_sidenav.scss

@@ -8,24 +8,19 @@
   overflow: hidden;
   position: relative;
   top: 68px;
-
-  &__toggler {
   width: 25rem;
 
   &--minimized {
-      @extend .sidenav-container__toggler;
+    @extend .sidenav-container;
     width: 10rem;
   }
-  }
 
   &__fixed {
     position: fixed;
-    overflow: scroll;
   }
 
   .sidenav {
     width: 25rem;
-    overflow: scroll;
 
     @include media($large-screen) {
       margin: 0px;
@@ -54,11 +49,16 @@
       }
     }
 
-    ul {
-      &.sidenav__list--padded {
+    .sidenav__list--padded {
       margin: (4 * $gap) 0;
-      }
+      position: fixed;
+      overflow-y: scroll;
+      top: 98px;
+      bottom: 35px;
+      left: 0;
+      width: 25rem;
 
+      ul {
         list-style: none;
         padding: 0;
 
@@ -67,6 +67,7 @@
           display: block;
         }
       }
+    }
 
     &__divider--small {
       display: block;

templates/navigation/global_sidenav.html

@@ -2,9 +2,9 @@
 {% from "components/sidenav_item.html" import SidenavItem %}
 
 
-<div v-cloak is="SidenavToggler" class="sidenav-container">
+<div v-cloak is="SidenavToggler">
   <template slot-scope='props'>
-    <div v-bind:class="{'sidenav-container__toggler': props.isVisible, 'sidenav-container__toggler--minimized': !props.isVisible}">
+    <div v-bind:class="{'sidenav-container': props.isVisible, 'sidenav-container--minimized': !props.isVisible}">
       <div class="sidenav-container__fixed">
         <div v-bind:class="{'global-navigation': true, 'sidenav': props.isVisible, 'sidenav--minimized': !props.isVisible}">
           <a href="#" v-on:click="props.toggle" class="sidenav__toggle">
@@ -19,7 +19,8 @@
           </a>
           <div v-if="props.isVisible">
             <div class="sidenav__title">Portfolios</div>
-            <ul class="sidenav__list--padded">
+            <div class="sidenav__list--padded">
+              <ul>
                 {% if portfolios %}
                   {% for other_portfolio in portfolios|sort(attribute='name') %}
                     {{ SidenavItem(other_portfolio.name,
@@ -35,5 +36,6 @@
           </div>
         </div>
       </div>
+    </div>
   </template>
 </div>