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>

23 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. Great Article Image Processing Projects Deep Learning Projects for Final Year JavaScript Training in Chennai JavaScript Training in Chennai The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training Project Centers in Chennai

      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. We at Dextemade beamed many diversified brands. And we are also honored to provide you Development, Digital Marketing, 2D / 3D Animation, Graphics Design, and 3D Designing Services to beam your brand / aim too. With our complete preparation. We have a team with very high leading expert professionals.

    ReplyDelete
  8. 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
  9. Your blog is very useful. I got very good information 789betting vip

    ReplyDelete
  10. Thank You Very Much. This Article Is Great In The Importance Of Free Forex Signals

    ReplyDelete
  11. 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
  12. 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
  13. 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
  14. 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
  15. AFM Logistics Pvt Ltd is an international freight forwarding and customs clearing company established in Delhi. The company was constituted in 2012 and is indulged in providing complete logistics solution. The company has its own setup and wide network of agents throughout the world. Best Custom Clearing Company in Delhi . They are the best air cargo and ocean freight forwarding company in Delhi, India. AFM Logistics Pvt Ltd has been working as Import and Export Agent in India since 2012. They have been providing personal baggage shipping services in India for a very long time.

    ReplyDelete

Blogroll

Popular Posts