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) %} - +
- - + +
{% 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", + ) }}