diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss
index 40efda84..fa02d16f 100644
--- a/styles/components/_portfolio_layout.scss
+++ b/styles/components/_portfolio_layout.scss
@@ -45,13 +45,23 @@
.links {
font-size: $small-font-size;
- .link--icon {
- text-align: center;
+ .icon-link {
+ &.active {
+ color: $color-gray;
+ .icon {
+ @include icon-color($color-gray);
+ }
+ }
+
+ .icon-link--icon {
+ text-align: center;
+ }
+
+ .icon {
+ @include icon-size(20);
+ }
}
- .icon {
- @include icon-size(20);
- }
}
}
diff --git a/templates/portfolios/header.html b/templates/portfolios/header.html
index f5d8d2bf..e59a9f23 100644
--- a/templates/portfolios/header.html
+++ b/templates/portfolios/header.html
@@ -1,10 +1,10 @@
{% from "components/icon.html" import Icon %}
{% macro Link(icon, text, url, active=False) %}
-
+
-
{{ Icon(icon) }}
-
{{ text }}
+
{{ Icon(icon) }}
+
{{ text }}
{% endmacro %}
@@ -28,17 +28,20 @@
{{ Link(
icon='chart',
text='Reports',
- url=url_for("portfolios.portfolio_reports", portfolio_id=portfolio.id))
- }}
+ url=url_for("portfolios.portfolio_reports", portfolio_id=portfolio.id),
+ active=request.url_rule.endpoint == "portfolios.portfolio_reports",
+ ) }}
{{ Link(
icon='dollar-sign',
text='Funding',
- url=url_for("portfolios.portfolio_funding", portfolio_id=portfolio.id))
- }}
+ url=url_for("portfolios.portfolio_funding", portfolio_id=portfolio.id),
+ active=request.url_rule.endpoint == "portfolios.portfolio_funding",
+ ) }}
{{ Link(
icon='time',
text='Admin',
- url=url_for("portfolios.portfolio", portfolio_id=portfolio.id))
- }}
+ url=url_for("portfolios.portfolio", portfolio_id=portfolio.id),
+ active=request.url_rule.endpoint == "portfolios.portfolio",
+ ) }}