Permalink
Browse files

style(sidebar): Highlight active page in sidebar (#420)

* Issue #331

* New line
  • Loading branch information...
1 parent d6f3dd8 commit 4b747a78cd24a31d469a6706bae14e20cff3a550 @gkovacs81 gkovacs81 committed with deviantony Dec 31, 2016
Showing with 18 additions and 11 deletions.
  1. +11 −11 app/components/sidebar/sidebar.html
  2. +7 −0 assets/css/app.css
@@ -17,41 +17,41 @@
</li>
<li class="sidebar-title"><span>Endpoint actions</span></li>
<li class="sidebar-list">
- <a ui-sref="dashboard">Dashboard <span class="menu-icon fa fa-tachometer"></span></a>
+ <a ui-sref="dashboard" ui-sref-active="active">Dashboard <span class="menu-icon fa fa-tachometer"></span></a>
</li>
<li class="sidebar-list">
- <a ui-sref="templates">App Templates <span class="menu-icon fa fa-rocket"></span></a>
+ <a ui-sref="templates" ui-sref-active="active">App Templates <span class="menu-icon fa fa-rocket"></span></a>
</li>
<li class="sidebar-list" ng-if="endpointMode.provider === 'DOCKER_SWARM_MODE'">
- <a ui-sref="services">Services <span class="menu-icon fa fa-list-alt"></span></a>
+ <a ui-sref="services" ui-sref-active="active">Services <span class="menu-icon fa fa-list-alt"></span></a>
</li>
<li class="sidebar-list">
- <a ui-sref="containers">Containers <span class="menu-icon fa fa-server"></span></a>
+ <a ui-sref="containers" ui-sref-active="active">Containers <span class="menu-icon fa fa-server"></span></a>
</li>
<li class="sidebar-list">
- <a ui-sref="images">Images <span class="menu-icon fa fa-clone"></span></a>
+ <a ui-sref="images" ui-sref-active="active">Images <span class="menu-icon fa fa-clone"></span></a>
</li>
<li class="sidebar-list">
- <a ui-sref="networks">Networks <span class="menu-icon fa fa-sitemap"></span></a>
+ <a ui-sref="networks" ui-sref-active="active">Networks <span class="menu-icon fa fa-sitemap"></span></a>
</li>
<li class="sidebar-list">
- <a ui-sref="volumes">Volumes <span class="menu-icon fa fa-cubes"></span></a>
+ <a ui-sref="volumes" ui-sref-active="active">Volumes <span class="menu-icon fa fa-cubes"></span></a>
</li>
<li class="sidebar-list" ng-if="endpointMode.provider === 'DOCKER_STANDALONE'">
- <a ui-sref="events">Events <span class="menu-icon fa fa-history"></span></a>
+ <a ui-sref="events" ui-sref-active="active">Events <span class="menu-icon fa fa-history"></span></a>
</li>
<li class="sidebar-list" ng-if="endpointMode.provider === 'DOCKER_SWARM' || (endpointMode.provider === 'DOCKER_SWARM_MODE' && endpointMode.role === 'MANAGER')">
- <a ui-sref="swarm">Swarm <span class="menu-icon fa fa-object-group"></span></a>
+ <a ui-sref="swarm" ui-sref-active="active">Swarm <span class="menu-icon fa fa-object-group"></span></a>
</li>
<li class="sidebar-list" ng-if="endpointMode.provider === 'DOCKER_STANDALONE'">
<a ui-sref="docker">Docker <span class="menu-icon fa fa-th"></span></a>
</li>
<li class="sidebar-title"><span>Portainer settings</span></li>
<li class="sidebar-list">
- <a ui-sref="settings">Password <span class="menu-icon fa fa-lock"></span></a>
+ <a ui-sref="settings" ui-sref-active="active">Password <span class="menu-icon fa fa-lock"></span></a>
</li>
<li class="sidebar-list">
- <a ui-sref="endpoints">Endpoints <span class="menu-icon fa fa-plug"></span></a>
+ <a ui-sref="endpoints" ui-sref-active="active">Endpoints <span class="menu-icon fa fa-plug"></span></a>
</li>
</ul>
<div class="sidebar-footer">
View
@@ -262,3 +262,10 @@ input[type="radio"] {
width: 80%;
margin: 0 auto;
}
+
+ul.sidebar .sidebar-list a.active {
+ color: #fff;
+ text-indent: 22px;
+ border-left: 3px solid #fff;
+ background: #2d3e63;
+}

0 comments on commit 4b747a7

Please sign in to comment.