title: how to show the Scrollbar below the Sidenav Toolbar in AngularMaterial-7
body: <p><a href="https://i.stack.imgur.com/xnR5x.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/xnR5x.jpg" alt="enter image description here"></a><strong>Please help me to achieve the below two methods:</strong></p>
  
  <p>1) How to show the sidenav <strong>scrollbar below the toolbar</strong> in the sidenav:</p>
  
  <p>2) Also how to <strong>show</strong> the Scrollbar <strong>only when we move the mouse cursor</strong> over the side nav.</p>
  
  <h2>Thanks in advance.!</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;mat-sidenav-container fullscreen&gt;
    &lt;!-- SIDENAV --&gt;
    &lt;mat-sidenav [mode]="showLeftNAV ? 'side' : 'over'" [opened]="showLeftNAV" class="mat-elevation-z10" style="width:312px;border: 0px;"&gt;
      &lt;!-- SIDENAV-HEADER-TOOLBAR --&gt;
      &lt;mat-toolbar color="primary" style="height:112px;position: sticky; top: 0; z-index: 10;"&gt;HELLO&lt;/mat-toolbar&gt;
      &lt;!--SIDENAV-BODY-CONTENT --&gt;
      &lt;h4 mat-line&gt;SAMPLE TEXT&lt;/h4&gt;
      &lt;h4 mat-line&gt;SAMPLE TEXT&lt;/h4&gt;
      &lt;h4 mat-line&gt;SAMPLE TEXT&lt;/h4&gt;
      &lt;h4 mat-line&gt;SAMPLE TEXT&lt;/h4&gt;
      &lt;h4 mat-line&gt;SAMPLE TEXT&lt;/h4&gt;
      &lt;h4 mat-line&gt;SAMPLE TEXT&lt;/h4&gt;
      &lt;h4 mat-line&gt;SAMPLE TEXT&lt;/h4&gt;
      &lt;h4 mat-line&gt;SAMPLE TEXT&lt;/h4&gt;
      &lt;h4 mat-line&gt;SAMPLE TEXT&lt;/h4&gt;
      &lt;h4 mat-line&gt;SAMPLE TEXT&lt;/h4&gt;
      &lt;h4 mat-line&gt;SAMPLE TEXT&lt;/h4&gt;
      &lt;h4 mat-line&gt;SAMPLE TEXT&lt;/h4&gt;
      &lt;h4 mat-line&gt;SAMPLE TEXT&lt;/h4&gt;
      &lt;h4 mat-line&gt;SAMPLE TEXT&lt;/h4&gt;
      &lt;h4 mat-line&gt;SAMPLE TEXT&lt;/h4&gt;
      &lt;h4 mat-line&gt;SAMPLE TEXT&lt;/h4&gt;
      &lt;h4 mat-line&gt;SAMPLE TEXT&lt;/h4&gt;
      &lt;h4 mat-line&gt;SAMPLE TEXT&lt;/h4&gt;
      &lt;h4 mat-line&gt;SAMPLE TEXT&lt;/h4&gt;
      &lt;h4 mat-line&gt;SAMPLE TEXT&lt;/h4&gt;
      &lt;h4 mat-line&gt;SAMPLE TEXT&lt;/h4&gt;
      &lt;h4 mat-line&gt;SAMPLE TEXT&lt;/h4&gt;
      &lt;h4 mat-line&gt;SAMPLE TEXT&lt;/h4&gt;
      &lt;h4 mat-line&gt;SAMPLE TEXT&lt;/h4&gt;
      &lt;h4 mat-line&gt;SAMPLE TEXT&lt;/h4&gt;
      &lt;h4 mat-line&gt;SAMPLE TEXT&lt;/h4&gt;
      &lt;h4 mat-line&gt;SAMPLE TEXT&lt;/h4&gt;
      &lt;h4 mat-line&gt;SAMPLE TEXT&lt;/h4&gt;
      &lt;h4 mat-line&gt;SAMPLE TEXT&lt;/h4&gt;
      &lt;h4 mat-line&gt;SAMPLE TEXT&lt;/h4&gt;
    &lt;/mat-sidenav&gt;
    &lt;!-- CONTENT --&gt;
    &lt;mat-sidenav-content&gt;
      &lt;!-- CONTENT-TOOLBAR --&gt;
      &lt;mat-toolbar color="primary" style="height:112px;position: sticky; top: 0; z-index: 10;"&gt;
        CONTENT-AREA
      &lt;/mat-toolbar&gt;
    &lt;/mat-sidenav-content&gt;
  &lt;/mat-sidenav-container&gt;</code></pre>
  </div>
  </div>
  </p>