This is continuation of previous article. In previous article, I have explained header design. Now I will explain side navigation panel. I am going to use previous article code so please read the previous article first.Whenever user clicks on left most menu icon, side navigation panel has to be displayed.

Add Menu Button To Header

Add this below menu button
<md-button class="md-icon-button" aria-label="Side Panel" ng-click="openSideNavPanel()">
     <md-tooltip>Side Panel</md-tooltip>
     <md-icon class="md-default-theme" class="material-icons">&#xE5D2;</md-icon>
</md-button>
Now this header looks like below screenshot

Side Navigation Code

Here you can find md-component-id="left" in below code.  This id will be used for opening and closing side panels. Here md-sidenav-left is the class which keeps panel left side.
<md-sidenav class="md-sidenav-left md-whiteframe-z2"
        md-component-id="left">
    <md-toolbar layout="row">
     <div class="md-toolbar-tools">
        <h2>
          <span>Side Panel</span>
        </h2>
        <span flex></span>
        <md-button class="md-icon-button" aria-label="Close Side Panel" ng-click="closeSideNavPanel()">
          <md-tooltip>Close Side Panel</md-tooltip>
          <md-icon class="md-default-theme" class="material-icons">&#xE5CD;</md-icon>
        </md-button>
       </div>
    </md-toolbar> 
    <md-content layout-padding="">
      Side navigation Panel
    </md-content> 
</md-sidenav>

JS Code for Side Navigation Panel

Add below side navigation code to controller
angular.module('MyApp')
.controller('AppCtrl', function($scope, $mdSidenav) {
    $scope.showMobileMainHeader = true;
    $scope.openSideNavPanel = function() {
        $mdSidenav('left').open();
    };
    $scope.closeSideNavPanel = function() {
        $mdSidenav('left').close();
    };
})


Add List Items To Left Side Navigation Panel

Add list items to side panel.  Observe the below code. The yellow highlighted code was headings and the dividers were highlighted with orange color.
<md-list>
      <md-subheader class="md-no-sticky">Favorites</md-subheader>
      <md-list-item>
        <md-icon class="md-default-theme" class="material-icons">&#xE0C9;</md-icon>
        <p>Messages</p>
        <div class="md-secondary">2</div>
      </md-list-item>
      <md-list-item>
        <md-icon class="md-default-theme" class="material-icons">&#xE878;</md-icon>
        <p>Events</p>
        <md-icon class="md-secondary">2</md-icon>
      </md-list-item>
      <md-list-item>
        <md-icon class="md-default-theme" class="material-icons">&#xE251;</md-icon>
        <p>Photos</p>
        <md-icon class="md-secondary">2</md-icon>
      </md-list-item>
      <md-divider></md-divider>
      <md-subheader class="md-no-sticky">Pages</md-subheader>
      <md-list-item>
        <md-icon class="md-default-theme" class="material-icons">&#xE7F9;</md-icon>
        <p>Pages Feed</p>
        <div class="md-secondary">2</div>
      </md-list-item>
      <md-list-item>
        <md-icon class="md-default-theme" class="material-icons">&#xE1BC;</md-icon>
        <p>Like Pages</p>
        <div class="md-secondary">20+</div>
      </md-list-item>
 </md-list>

Add this Panel to Right Side

Instead of using md-sidenav-left, use md-sidenav-right class. md-sidenav-right will keeps the panel right side  
<md-sidenav class="md-sidenav-right md-whiteframe-z2"
        md-component-id="left">
    <md-toolbar layout="row">
     <div class="md-toolbar-tools">
        <h2>
          <span>Side Panel</span>
        </h2>
        <span flex></span>
        <md-button class="md-icon-button" aria-label="Close Side Panel" ng-click="closeSideNavPanel()">
          <md-tooltip>Close Side Panel</md-tooltip>
          <md-icon class="md-default-theme" class="material-icons">&#xE5CD;</md-icon>
        </md-button>
       </div>
    </md-toolbar> 
    <md-content layout-padding="">
      Side navigation Panel
    </md-content> 
</md-sidenav>

11 comments:

  1. Please i nedd the source code

    ReplyDelete
    Replies
    1. download link was shared in above article, you need to subscribe and download

      Delete
  2. Why don't you guys follow through with what you said. I signed up and didn't get any source code link. Liars.

    ReplyDelete
    Replies
    1. Please have some patience..it will take 30 minutes to activate. Try now

      Delete
  3. If I need always keep the same z-order between the sidenav and the main content? How I do?

    ReplyDelete
  4. boss i need Side Navigation drawer for mobile app

    ReplyDelete
  5. if i need to show ^ in place of cross inorder to open close the menu then?

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts