CODEWITHSUNDEEP
angularangular-material2
Suwadith
Suwadith

Reputation: 78

How to use the right side vacant space for a new component while using md-sidenav and md-toolbar?

I have added a md-toolbar on the top and on it's left I have added a button which will open up a md-sidenav (from left to right)

Current Design

But because of this when I add another component below this whole component it doesn't use the vacant right side area. Instead it consumes the whole 100% of the height so the remaining component is showing below this whole page.

Issue

I tried playing with the CSS file but when I tried to reduce the width to just 20% it was a mess. I want to use this exact design but also use the right vacant area for the next component. How can I use it?

navbar.component.html

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

    <span>Repository Manager</span>

    <span><md-icon>verified_user</md-icon></span>
  </md-toolbar>
</div>

<md-sidenav-container #nav>
  <md-sidenav>
    <br>
    <button md-raised-button color="accent" class="sideButton">Home</button>
    <br><br>
    <button md-raised-button color="accent" class="sideButton">Search</button>
  </md-sidenav>

</md-sidenav-container>

styles.css

body {
    margin: 0;
    font-family: Roboto, sans-serif;
  }

  md-card {
    max-width: 80%;
    margin: 2em auto;
    text-align: center;
  }

  md-toolbar-row {
    justify-content: space-between;
  }

  .done {
    position: fixed;
    bottom: 20px;
    right: 20px;
    color: white;
  }

  md-sidenav {
    width: 10%;
    text-align: center;
    font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif;
  }

  html, body, material-app, md-sidenav-container, .my-content {
    margin: 0;
    width: 100%;
    height: 100%;
  }

  .sideButton {
    width: 100%;
  }

Upvotes: 1

Views: 855

Answers (1)

P.S.
P.S.

Reputation: 16384

Just declare the next component after <md-sidenav>...</md-sidenav> but inside <md-sidenav-container #nav>. The example from docs:

<md-sidenav-container class="example-container">
  <md-sidenav #sidenav class="example-sidenav">
    Jolly good!
  </md-sidenav>

  <!-- Your component starts here -->
  <div class="example-sidenav-content">
    <button type="button" md-button (click)="sidenav.open()">
      Open sidenav
    </button>
  </div>

</md-sidenav-container>

Good to know: You can look code examples at Angular Material docs by clicking the button at the right side:

enter image description here

It will save a lot of time.

Upvotes: 1

Related Questions