How to place 'md-sidenav' on top of the 'md-toolbar'

Question

How would you to put md-toolbar on top of md-sidenavsimilar like https://inbox.google.com/u/0/?pli=1 using material2?

Here is an example of using md-sidenav https://github.com/jelbourn/material2-app md-sidenav with angular material2 but it is not behaving the way I want.

How would you would modify this example the way md-toolbar would stay on top of md-sidenav same way as in https://inbox.google.com/u/0/?pli=1

P.S There is a similar question md-sidenav toggle() is on top of the md-toolbar but the solution is not compatible with angular2 maerial2

score 4 · Accepted Answer · answered Jan 21 '17 at 12:08

This works for me, if I did understand the question. Just put toolbar in a separate element (not inside sidenav container) and also remove fullscreen directive from md-sidenav-container

<md-toolbar color="primary">
  <button md-icon-button (click)="nav.open()">
    <md-icon class="md-24">menu</md-icon>
  </button>
</md-toolbar>

<md-sidenav-container>

  <md-sidenav #nav>
    <md-nav-list>
      <md-list-item>
        <a href="#"></a>
      </md-list-item>
      <md-list-item>
        <a href="#"></a>
      </md-list-item>
    </md-nav-list>
  </md-sidenav>

  <div>
    <div #root="$implicit">
      <router-outlet></router-outlet>
    </div>
  </div>
</md-sidenav-container>

score 3 · Answer 2 · answered Jan 21 '17 at 13:57

All you need to do is move the toolbar inside the md-sidenav-container. Ensure that the toolbar and the router-outlet are inside a flex div with column direction. Some CSS is required for adjusting the height, padding etc and set vertical overflow in the div enclosing the router-outlet. That will ensure the toolbar to be visible always when you scroll the content.

The following works for me well. (Note: I have used @angular/flex-layout, which makes flex layout easier. If you wish you can change it to regular flex css styling)

<div>
    <md-sidenav-container fxLayout="row" class="app-inner">

        <md-sidenav #nav class="app-sidebar-panel" mode="over" [opened]="false">

            <md-nav-list>
                <md-list-item>
                    <a href="#">Item-1</a>
                </md-list-item>
                <md-list-item>
                    <a href="#">Item-2</a>
                </md-list-item>
                <md-list-item>
                    <a href="#">Item-3</a>
                </md-list-item>
            </md-nav-list>

        </md-sidenav>

        <div fxLayout="column" fxLayoutAlign="start stretch">

            <md-toolbar class="app-toolbar" color="primary">
                <button md-icon-button (click)="nav.open()">
                    <md-icon>menu</md-icon>
                </button>
            </md-toolbar>

            <div class="app-route-content">
                <router-outlet></router-outlet>
            </div>

        </div>

    </md-sidenav-container>
</div>

The Style (SASS) required for this:

$app-toolbar-height: 48px !default;
$app-route-content-padding: 0.5rem !default;
$app-sidebar-width: 15.65rem !default;

// Important: This is required to override the
// default padding of md-sidenav-content.

:host /deep/ {
    .md-sidenav-content {
        padding: 0px;
    }
}

.app-inner {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    min-height: 100vh;
}

md-sidenav.app-sidebar-panel {
    overflow-x: hidden;
    width: $app-sidebar-width;
    box-shadow: 3px 0px 6px rgba(0, 0, 0, 0.3) !important;
}

md-toolbar {
    min-height: $app-toolbar-height !important;
    md-toolbar-row {
        min-height: $app-toolbar-height !important;
        height: $app-toolbar-height !important;
    }
    &.main-header {
        position: relative;
        box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
        z-index: 1;
    }
}

.app-toolbar {
    position: relative;
    box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}

.app-route-content {
    overflow-y: scroll;
    padding: #{$app-route-content-padding} !important;
    height: calc(100vh - #{$app-toolbar-height} - #{$app-route-content-padding} * 2);
}

Hope this helps you.

How to place 'md-sidenav' on top of the 'md-toolbar'

2 Answers2