Nominally Patriotic Meathead

    angular-material-sidenav

    0.1.1 • Public • Published

    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',
    	hidden:	true // show menu ('true' for hide menu)
    }]);
    

    by default, if hidden property is not set, item will be displayed. So to hide one, just pass property to true.

    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 :

    note: update the components to the lastest as some of the implementations have changed (e.g method changeSectionVisible no more exist))

    // in your controller, add the factory ssSideNav
    angular.module('app.controller', [
    	'$timeout',
      	'ssSideNav',
      	function ($timeout, ssSideNav) {
        	$scope.menu = ssSideNav;
    
    		// Show or Hide menu
    		ssSideNav.setVisible('link_1');
    		ssSideNav.setVisibleFor([{
    		  id: 'toggle_item_1',
    		  value: true
    		}, {
    		  id: 'link_1',
    		  value: false
    		}]);
    
    		$timeout(function () {
    		  ssSideNav.setVisible('toogle_2', false);
    		});
    
    		$timeout(function () {
    			// force selection on child dropdown menu item and select its state too.
    			ssSideNav.forceSelectionWithId('toogle_1_link_2');
    		}, 1000 * 3);
      }
    ]);
    

    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...

    Install

    npm i angular-material-sidenav

    DownloadsWeekly Downloads

    117

    Version

    0.1.1

    License

    MIT

    Last publish

    Collaborators

    • askdaddy