Side Navigation Panel Design Using AngularJS Material UI

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

Click here to see DEMO Download Code

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>

Click here to see DEMO

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>

Click here to see DEMO

20 comments:

Unknown11 March 2016 at 03:46
Please i nedd the source code
Unknown18 May 2016 at 09:16
ok
Unknown31 July 2016 at 15:08
Why don't you guys follow through with what you said. I signed up and didn't get any source code link. Liars.
Unknown18 October 2016 at 09:55
Thankyou, Cheers for the help
Unknown26 October 2016 at 19:10
If I need always keep the same z-order between the sidenav and the main content? How I do?
DongSeop Kim19 December 2016 at 06:28
Thank you
Developers Console4 February 2017 at 06:42
boss i need Side Navigation drawer for mobile app
Unknown18 August 2017 at 00:51
if i need to show ^ in place of cross inorder to open close the menu then?
Unknown10 February 2018 at 19:13
how can I subscribe?
Dextemade29 March 2019 at 09:03
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.
codeaze26 December 2019 at 03:24
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
Unknown27 April 2021 at 05:24
Hire Java Developers/Programmers in India from Keen Solution.
Casino-789betting26 August 2021 at 23:38
Your blog is very useful. I got very good information 789betting vip
George16 September 2021 at 22:26
Thank You Very Much. This Article Is Great In The Importance Of Free Forex Signals
Ban Yen30 September 2021 at 03:47
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.
Unknown2 November 2021 at 00:18
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
Oliver 8 January 2022 at 02:22
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.

→	Convert XML or JSON to Java Pojo Classes
→	Change Icon Color Online

SodhanaLibrary