How to leave fixed sidenav and Toolbar with angular material

Asked

Viewed 810 times

0

I want to fix the sidenav and the Toolbar of Angular Material, and the content of the application stay on the rest of the page. In my index.html I am using the ng-view directive to render. I have a.html menu page that is sidenav and tollbar, and other pages like home.html. How do I fix my sidenav and Toolbar on every page?

angularjs angular-material

1 answer

0

I use this template to have the side menu and a fixed Toolbar.. changing only the routes in Angularjs to view.

<body ng-app="deluxApp" layout="row">
	<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')" >
	  <md-toolbar class="md-theme-indigo">
		<h1 class="md-toolbar-tools">toolbar fixo</h1>
	  </md-toolbar>
	  <md-content>
		<!--  meu menu -->     
	  </md-content>
	</md-sidenav>
	<section layout="column" flex>
		<md-toolbar>
			<div layout="row" layout-padding layout-margin layout-fill layout-align="end center">
				<md-button href="/logout" class="md-icon-button">
					<md-icon class="md-36" layout-align="right">power_settings_new</md-icon>
				</md-button>
			</div>
		</md-toolbar>
		<md-content layout="column" flex>  
			<div class="container" ng-view="" layout="column" flex>		      		
			</div>
		</md-content>
	</section>
</body>

I hope it helps you.

Browser other questions tagged angularjs angular-material

You are not signed in. Login or sign up in order to post.