Beautiful Side Menus

In this Weekly Workshop, we dive in and create an awesome looking Side Menu with a little custom Styling & SCSS love. ❤️

You'll be able to take the styling concepts you learn in this video, and apply them throughout all of your Creator projects!

Here's the final code from the end of the video:

$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);
    }
}

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();
     })
   };

}]);