Side Navigation Panel Design Using AngularJS Material UI

Sunday, 26 July 2015 | Posted by Sample

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

Labels:AngularJS

22 comments:

Unknown11 March 2016 at 03:46
Please i nedd the source code
ReplyDelete
Replies
Unknown18 May 2016 at 09:16
ok
ReplyDelete
Replies
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.
ReplyDelete
Replies
Unknown18 October 2016 at 09:55
Thankyou, Cheers for the help
ReplyDelete
Replies
Cyberdine26 October 2016 at 19:10
If I need always keep the same z-order between the sidenav and the main content? How I do?
ReplyDelete
Replies
DongSeop Kim19 December 2016 at 06:28
Thank you
ReplyDelete
Replies
Developers Console4 February 2017 at 06:42
boss i need Side Navigation drawer for mobile app
ReplyDelete
Replies
Unknown18 August 2017 at 00:51
if i need to show ^ in place of cross inorder to open close the menu then?
ReplyDelete
Replies
Unknown10 February 2018 at 19:13
how can I subscribe?
ReplyDelete
Replies
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
ReplyDelete
Replies
Keen Solution27 April 2021 at 05:24
Hire Java Developers/Programmers in India from Keen Solution.
ReplyDelete
Replies
Casino-789betting26 August 2021 at 23:38
Your blog is very useful. I got very good information 789betting vip
ReplyDelete
Replies
George16 September 2021 at 22:26
Thank You Very Much. This Article Is Great In The Importance Of Free Forex Signals
ReplyDelete
Replies
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.
ReplyDelete
Replies
Juan Mark2 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
ReplyDelete
Replies
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.
ReplyDelete
Replies
RHB11 March 2022 at 12:10
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
Replies
AFM Logistics19 April 2022 at 06:07
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
Replies