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>

18 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. Thankyou, Cheers for the help

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

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

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

    ReplyDelete
  7. Codeaze is the reliable and the trustworthy name in the world of web development and have helped a number of brands in designing and developing their websites.
    Address: Asia Pacific Trade Center, Rashid Minhas Rd, Karachi
    Email: info@codeaze.org
    Phone: 0316 2586964 Codeaze

    ReplyDelete
  8. Your blog is very useful. I got very good information 789betting vip

    ReplyDelete
  9. Your current site offered people using manga important info to function in. You've accomplished a formidable employment along with each of our entire area are going to be thankful to you personally.

    ReplyDelete
  10. The design of a side navigation panel is essential for making your website accessible and functional. Most of the AngularJS developers are built for Angular Material projects when should be focused of user interactive or responsive logo design company in New Mexico websites

    ReplyDelete
  11. Online Stock Broker is a free service that aims to provide consumers the best online forex broker reviews. It includes unbiased comparisons of a large range of leading brokers and trading platforms, highlighting their strengths and weaknesses.

    ReplyDelete
  12. the substance or substances of which a thing is made or composed: Stone is a durable material. anything that serves as crude or raw matter to be used red leather slim fit jacket mens or pulp is the raw material from which paper is made. any constituent element. a textile fabric: material for a dress.

    ReplyDelete

Blogroll

Popular Posts