Beautiful Side Menus

02-beautiful-side-menus/README.md

@@ -0,0 +1,2 @@
+# Beautiful Side Menus
+

02-beautiful-side-menus/directives.js

@@ -0,0 +1,22 @@
+angular.module('app.directives', [])
+
+.directive('activePageHighlight', ['$rootScope', '$state', function($rootScope, $state){
+
+   return function ($scope, $element, $attr) {
+
+     function checkUISref(){
+       if ($state.is($attr['uiSref'])){
+             $element.addClass('active-page-highlight');
+         } else {
+             $element.removeClass('active-page-highlight');
+         }
+     }
+
+     checkUISref();
+
+     $rootScope.$on('$stateChangeSuccess', function(){
+         checkUISref();
+     })
+   };
+
+}]);

02-beautiful-side-menus/theme.scss

@@ -0,0 +1,39 @@
+$SIDEMENU_TOP: #ff4b1f;
+$SIDEMENU_BOTTOM: #ff9068;
+$SIDEMENU_TRANSPARENCY: rgba(255,255,255,0.4);
+
+.side-menu-item{
+    background:none;
+    color:white;
+    font-weight:300;
+    border:0px;
+    .item-content{
+        background:none;
+        &.activated{
+            background: $SIDEMENU_TRANSPARENCY;
+        }
+    }
+    &.active-page-highlight{
+        .item-content{
+            background: $SIDEMENU_TRANSPARENCY;
+        }
+    }
+}
+
+.side-menu-gradient{
+    background: -webkit-linear-gradient(left top, $SIDEMENU_TOP, $SIDEMENU_BOTTOM);
+    background: -o-linear-gradient(bottom right, $SIDEMENU_TOP, $SIDEMENU_BOTTOM);
+    background: -moz-linear-gradient(bottom right, $SIDEMENU_TOP, $SIDEMENU_BOTTOM);
+    background: linear-gradient(to bottom right, $SIDEMENU_TOP, $SIDEMENU_BOTTOM);
+}
+
+.profile-image{
+    img{
+        border-radius:50%;
+        margin:10px;
+        border: 4px solid $SIDEMENU_TRANSPARENCY;
+        -webkit-box-shadow: 0px 0px 142px -37px rgba(0,0,0,0.75);
+        -moz-box-shadow: 0px 0px 142px -37px rgba(0,0,0,0.75);
+        box-shadow: 0px 0px 142px -37px rgba(0,0,0,0.75);
+    }
+}

README.md

@@ -4,9 +4,5 @@ Here you can find any code that we use in the Creator Demo Videos.
 ## Code Editor Tutorial ([YouTube](https://www.youtube.com/watch?v=IrwrZBBOiP8), [Code](01-code-editor-tutorial))
 In this walkthrough we create a Firebase backed ToDo application.
 
-## Beautiful Side Menus
-Here we use the SCSS feature along with a custom directive to make a great looking Side-Menu.
-
-[YouTube Video]()
-
-[Code Used in Video](02-beautiful-side-menus)
+## Beautiful Side Menus ([YouTube](), [Code](02-beautiful-side-menus))
+Here we use the SCSS feature along with a custom directive to make a great looking Side-Menu.