Update breadcrumbs in portfolio header nav

atst/routes/portfolios/__init__.py

@@ -13,6 +13,16 @@ from atst.domain.authz import Authorization
 from atst.models.permissions import Permissions
 
 
+def get_breadcrumb_from_request(request):
+    if request.url_rule.rule.startswith("/portfolios/<portfolio_id>/task_order"):
+        return "Funding"
+    if request.url_rule.endpoint == "portfolios.portfolio":
+        return "Admin"
+    if request.url_rule.endpoint == "portfolios.portfolio_reports":
+        return "Reports"
+    return None
+
+
 @portfolios_bp.context_processor
 def portfolio():
     portfolio = None
@@ -31,4 +41,9 @@ def portfolio():
             )
         return False
 
-    return {"portfolio": portfolio, "permissions": Permissions, "user_can": user_can}
+    return {
+        "portfolio": portfolio,
+        "permissions": Permissions,
+        "user_can": user_can,
+        "secondary_breadcrumb": get_breadcrumb_from_request(http_request),
+    }

styles/components/_portfolio_layout.scss

@@ -15,9 +15,30 @@
   margin-bottom: $gap * 2;
   color: $color-gray-medium;
   font-size: $h5-font-size;
+
+  .icon-link {
+    color: $color-gray-medium;
+    font-weight: normal;
+  }
+
+  .icon--tiny {
+    padding: $gap 0;
+  }
+
   .icon {
     @include icon-color($color-gray-medium);
   }
+
+  .portfolio-breadcrumbs__crumb {
+    .icon {
+      @include icon-color($color-blue);
+    }
+
+    .icon-link {
+      color: $color-blue;
+      pointer-events: none;
+    }
+  }
 }
 
 .portfolio-header {

templates/portfolios/breadcrumbs.html

@@ -1,13 +1,19 @@
 {% from "components/icon.html" import Icon %}
 
 <div class="row portfolio-breadcrumbs">
-  <div class="portfolio-breadcrumbs__home">
+  <a class="icon-link portfolio-breadcrumbs__home" href="{{ url_for("portfolios.portfolio_applications", portfolio_id=portfolio.id) }}">
     {{ Icon("briefcase") }}
     <span>
       {{ portfolio.name }} Portfolio
     </span>
-  </div>
+  </a>
   <div class="portfolio-breadcrumbs__crumb">
+    {% if secondary_breadcrumb %}
+      {{ Icon("caret_right", classes="icon--tiny") }}
+      <div class="icon-link">
+        {{ secondary_breadcrumb }}
+      </div>
+    {% endif %}
   </div>
 </div
 >