Add sidenav with list of portfolios

atst/routes/portfolios/__init__.py

@@ -22,7 +22,6 @@ def portfolio():
             portfolio = Portfolios.get(
                 g.current_user, http_request.view_args["portfolio_id"]
             )
-            portfolios = [ws for ws in portfolios if not ws.id == portfolio.id]
         except UnauthorizedError:
             pass
 

styles/elements/_sidenav.scss

@@ -1,23 +1,39 @@
 .sidenav {
+  width: 25rem;
+  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;
+  }
+
   ul {
+    &.sidenav__list--padded {
+      margin: 4 * $gap 0;
+    }
+
     list-style: none;
-    margin: 0;
     padding: 0;
 
-     li {
+    li {
       margin: 0;
       display: block;
     }
+
   }
 
   .sidenav__link {
     display: block;
-    border-top: 1px solid $color-black;
     padding: $gap ($gap * 2);
     color: $color-black;
     text-decoration: none;
     white-space: nowrap;
 
+
     .sidenav__link-icon {
       margin-left: - ($gap * .5);
     }
@@ -27,10 +43,28 @@
       pointer-events: none;
     }
 
+    &.sidenav__link--add {
+      color: $color-blue;
+      font-size: $small-font-size;
+      .icon {
+        @include icon-color($color-blue);
+        @include icon-size(14);
+      }
+
+      &:before {
+        content: "";
+        display: block;
+        width: 4 * $gap;
+        border: 1px solid #D6D7D9;
+        margin-left: $gap;
+        margin-bottom: $gap;
+      }
+    }
+
     &.sidenav__link--active {
       @include h4;
       color: $color-primary;
-      background-color: $color-white;
+      background-color: $color-aqua-lightest;
       box-shadow: inset ($gap / 2) 0 0 0 $color-primary;
 
       .sidenav__link-icon {
@@ -89,6 +123,7 @@
 
     &:hover {
       color: $color-primary;
+      background-color: $color-aqua-lightest;
 
       .sidenav__link-icon {
         @include icon-style-active;

templates/base.html

@@ -21,6 +21,8 @@
     {% include 'navigation/topbar.html' %}
 
     <div class='global-layout'>
+      {% block global_sidenav %}{% endblock %}
+
       <div class='global-panel-container'>
         {% block sidenav %}{% endblock %}
 

templates/portfolios/base.html

@@ -1,5 +1,25 @@
+{% from "components/sidenav_item.html" import SidenavItem %}
+
 {% extends "base.html" %}
 
+{% block global_sidenav %}
+  <div class="global-navigation sidenav">
+    <div class="sidenav__title">Portfolios</div>
+    <ul class="sidenav__list--padded">
+      {% for other_portfolio in portfolios %}
+        {{ SidenavItem(other_portfolio.name,
+          href=url_for("portfolios.show_portfolio", portfolio_id=other_portfolio.id),
+          active=other_portfolio == portfolio
+          ) }}
+      {% endfor %}
+    </ul>
+    <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>
+{% endblock %}
+
 {% block content %}
 
   <div class='portfolio-panel-container'>