Mobile app Beautiful Side Menus

Mobile app Beautiful Side Menus

for creator.ionic.io

Beautiful Side Menus

SUGGEST EDITS

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!

11:11

1:16

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

• theme.scss
 
• directives.js

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

• theme.scss
 
• directives.js

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

}]);

IT Consultant inCOREporation.com