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

* Issue #331

* New line

app/components/sidebar/sidebar.html

@@ -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">

assets/css/app.css

@@ -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;
+}