Skip to content

Simple component that reproduce the Angular Material Style SideNav Menu from their own website

Notifications You must be signed in to change notification settings

leosprikryl/angular-material-sidenav

 
 

Repository files navigation

angular-material-sidenav

Simple component that reproduce the Angular Material Style SideNav Menu from their own website material.angularjs.org. Available Demo

1. Installation
bower install angular-material-sidenav --save
2. Configuration

add sasrio.angular-material-sidenav to your main module's list of dependencies

angular.module('myApp', ['sasrio.angular-material-sidenav'])

use the ssSideNavSectionsProvider as a provider to config your menu items

ssSideNavSectionsProvider.initWithSections([{
	id:		'toogle_1',
	name:	'Section Heading 1',
	type:	'heading',
	children: [{
		name:	'Toogle 1',
		type:	'toggle',
		pages:	[{
			id:		'toggle_item_1',
			name:	'item 1',
			state:	'common.toggle.item1'
		}, {
			id:		'toggle_item_2',
			name:	'item 2',
			state:	'common.toggle.item2'
		}]
	}]
}, {
	id:			'link_1',
	name:		'Simple link to Index state',
	state:		'common.index,
	type:		'link',
	visible:	true // show menu ('false' for hide menu)
}]);

Also, provide to module the $mdThemingProvider in order to get same colors

ssSideNavSectionsProvider.initWithTheme($mdThemingProvider);

You can check the demo source code of app.js to see more on how you can add items

3. Usage

In order to display your sidenav menu, use the factory ssSideNav to get all sections and send them into the directive , example :

// in your controller, add the factory ssSideNav
angular.module('app.controller', [
  	'ssSideNav',
  	function (ssSideNav) {
    	$scope.menu = ssSideNav;

		// Show or Hide menu
		ssSideNav.changeSectionVisible('link_1');
		ssSideNav.changeSectionVisible(['toggle_item_1', 'link_1']);
  	}
]);

and of course, in your html view:

<ss-sidenav menu="menu"></ss-sidenav>
4. Customization

Colors are handle using a directive from the gist dh94 mdStyleColor

All sidenav is builded using the primary color configured with `$mdThemingProvider.

If you look the source code, you can easily add new template item, new kind of items and so on...

About

Simple component that reproduce the Angular Material Style SideNav Menu from their own website

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • ApacheConf 40.3%
  • CSS 28.5%
  • JavaScript 19.7%
  • HTML 11.5%