From 86d01e3e27f95d1a668cebc54efee9d222691d39 Mon Sep 17 00:00:00 2001
From: Matthew Kremer <mkremer90@gmail.com>
Date: Tue, 6 Sep 2016 12:47:00 -0500
Subject: [PATCH] Beautiful Side Menus

---
 02-beautiful-side-menus/README.md     |  2 ++
 02-beautiful-side-menus/directives.js | 22 +++++++++++++++
 02-beautiful-side-menus/theme.scss    | 39 +++++++++++++++++++++++++++
 README.md                             |  8 ++----
 4 files changed, 65 insertions(+), 6 deletions(-)
 create mode 100644 02-beautiful-side-menus/README.md
 create mode 100644 02-beautiful-side-menus/directives.js
 create mode 100644 02-beautiful-side-menus/theme.scss

diff --git a/02-beautiful-side-menus/README.md b/02-beautiful-side-menus/README.md
new file mode 100644
index 0000000..01c493f
--- /dev/null
+++ b/02-beautiful-side-menus/README.md
@@ -0,0 +1,2 @@
+# Beautiful Side Menus
+
diff --git a/02-beautiful-side-menus/directives.js b/02-beautiful-side-menus/directives.js
new file mode 100644
index 0000000..677f85f
--- /dev/null
+++ b/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();
+     })
+   };
+
+}]);
\ No newline at end of file
diff --git a/02-beautiful-side-menus/theme.scss b/02-beautiful-side-menus/theme.scss
new file mode 100644
index 0000000..929eb29
--- /dev/null
+++ b/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);
+    }
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 339d964..18b4c9c 100644
--- a/README.md
+++ b/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)
\ No newline at end of file
+## 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.
\ No newline at end of file