Using Angular 4 I am trying to have a toolbar on the top of the page that has the following behaviour:
Big Screens
Show the "Main"-Logo/Link on the left, the other top-nav links on the right.
Small screens
Show the "Main"-Logo Link centered and a menu button on the left for showing the sidenav (containing the links that were visible on the right if the screen is big).
Note:
The sidenav should not go over the toolbar if visible.
Note 2:
The centering of the "Main"-Logo/Link should be centered regarding the overall screen width. It should not be pushed to the right by the menu button.
What I have
<div fxLayout="column" fxFlex>
<md-toolbar color="primary">
<button md-icon-button (click)="sidenav.toggle()" fxHide="false" fxHide.gt-sm>
<md-icon>menu</md-icon>
</button>
<button md-button routerLink="/">
<md-icon>code</md-icon>
<span>{{title}}</span>
</button>
<div fxFlex fxShow="false" fxShow.gt-sm></div>
<div fxLayout="row" fxShow="false" fxShow.gt-sm>
<button md-button routerLink="/about">About</button>
<button md-button routerLink="/legal">Legal Notice</button>
</div>
</md-toolbar>
<md-sidenav-container fxFlex>
<md-sidenav #sidenav fxHide="false" fxHide.gt-sm>
<md-nav-list>
<a md-list-item href="">Main</a>
<a md-list-item href="/about">About</a>
<a md-list-item href="/legal">Legal Notice</a>
</md-nav-list>
</md-sidenav>
</md-sidenav-container>
</div>
Where I struggle
- I do not know how to center the "Main"-Logo/Link correctly
- If I show the menu in a small screen and switch back the layout to a bigger screen, the menu does not hide
Any help would be greatly appreciated, so thank you already!