From 11418aeb39c4b21a687c989c99e2f96227191f20 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Fri, 30 Aug 2019 14:13:20 -0400
Subject: [PATCH] Scroll list of portfolios in sidenav

---
 styles/elements/_sidenav.scss            | 37 ++++++++++++------------
 templates/navigation/global_sidenav.html | 30 ++++++++++---------
 2 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/styles/elements/_sidenav.scss b/styles/elements/_sidenav.scss
index 5bc1a8f3..f154c11e 100644
--- a/styles/elements/_sidenav.scss
+++ b/styles/elements/_sidenav.scss
@@ -8,24 +8,19 @@
   overflow: hidden;
   position: relative;
   top: 68px;
+  width: 25rem;
 
-  &__toggler {
-    width: 25rem;
-
-    &--minimized {
-      @extend .sidenav-container__toggler;
-      width: 10rem;
-    }
+  &--minimized {
+    @extend .sidenav-container;
+    width: 10rem;
   }
 
   &__fixed {
     position: fixed;
-    overflow: scroll;
   }
 
   .sidenav {
     width: 25rem;
-    overflow: scroll;
 
     @include media($large-screen) {
       margin: 0px;
@@ -54,17 +49,23 @@
       }
     }
 
-    ul {
-      &.sidenav__list--padded {
-        margin: (4 * $gap) 0;
-      }
+    .sidenav__list--padded {
+      margin: (4 * $gap) 0;
+      position: fixed;
+      overflow-y: scroll;
+      top: 98px;
+      bottom: 35px;
+      left: 0;
+      width: 25rem;
 
-      list-style: none;
-      padding: 0;
+      ul {
+        list-style: none;
+        padding: 0;
 
-      li {
-        margin: 0;
-        display: block;
+        li {
+          margin: 0;
+          display: block;
+        }
       }
     }
 
diff --git a/templates/navigation/global_sidenav.html b/templates/navigation/global_sidenav.html
index e34f6843..041d937d 100644
--- a/templates/navigation/global_sidenav.html
+++ b/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,18 +19,20 @@
           </a>
           <div v-if="props.isVisible">
             <div class="sidenav__title">Portfolios</div>
-            <ul class="sidenav__list--padded">
-              {% if portfolios %}
-                {% for other_portfolio in portfolios|sort(attribute='name') %}
-                  {{ SidenavItem(other_portfolio.name,
-                    href=url_for("applications.portfolio_applications", portfolio_id=other_portfolio.id),
-                    active=(other_portfolio.id | string) == request.view_args.get('portfolio_id')
-                    ) }}
-                {% endfor %}
-              {% else %}
-                <li><span class="sidenav__text">You have no portfolios yet</span></li>
-              {% endif %}
-            </ul>
+            <div class="sidenav__list--padded">
+              <ul>
+                {% if portfolios %}
+                  {% for other_portfolio in portfolios|sort(attribute='name') %}
+                    {{ SidenavItem(other_portfolio.name,
+                      href=url_for("applications.portfolio_applications", portfolio_id=other_portfolio.id),
+                      active=(other_portfolio.id | string) == request.view_args.get('portfolio_id')
+                      ) }}
+                  {% endfor %}
+                {% else %}
+                  <li><span class="sidenav__text">You have no portfolios yet</span></li>
+                {% endif %}
+              </ul>
+            </div>
           </div>
         </div>
       </div>