snippet list scaffolded

src/directives/side-nav.js

@@ -1,8 +1,9 @@
+
 angular.module('codexen.directives')
   .directive('sideNav', function(){
     return {
-      templateUrl:'directives/side-nav.tpl.html',
-      controller:'SideNavController as vm'
+      templateUrl: 'directives/side-nav.tpl.html',
+      controller: 'SideNavController as vm'
     }
   })
   .controller('SideNavController', function($auth, User, $rootScope, $scope){

src/directives/side-nav.scss

@@ -0,0 +1,19 @@
+@import "../variables";
+
+$side-view-link-hover-color: $gray-dark;
+$side-view-link-active-color: $link-color;
+$side-view-link-active-bg: $body-bg;
+
+#side-view ul.nav.nav-pills{
+  li a{
+    color: white;
+    &:hover{
+      color: $side-view-link-hover-color;
+    }
+  }
+
+  li.active a{
+    color:$side-view-link-active-color;
+    background-color: $side-view-link-active-bg;
+  }
+}

src/directives/side-nav.tpl.html

@@ -1,4 +1,3 @@
-
 <div class="current-user">
   <div ng-if="vm.currentUser">
     <img width="30" ng-src="http://www.gravatar.com/avatar/{{ vm.currentUser.email | gravatar }}">
@@ -20,6 +19,9 @@
 
 <p>Side Nav</p>
 <ul class="nav nav-pills nav-stacked">
+  <li ui-sref-active="active">
+    <a ui-sref="home"><i class="fa fa-home"></i> Home</a>
+  </li>
   <li>
     <a href="">My Page</a>
   </li>