help(Sidenav): how to code a sidenav like material.angular.io did

[hylerrix]

What are you trying to do?

I`m trying to write a Sidenav skeleton demo, just like official document navigation skeleton(A menu in the left part and content body in the right part with overview\api\examples tabs):

And I`m new to Angular, I cannot figure out how to code this Sidenav skeleton, and I can not find where is the relevant source code about this skeleton after I cloning this repo.

If anyone can help me, I'll be much appreciated. 😁

What troubleshooting steps have you tried?

I have already read the Sidenav Document, and still don't understand.

Because according to this document, I need to code Sidenav as follows, but in Official Sidenav skeleton, it's class called docs-component-viewer-nav-content ng-tns-c139-5 rather than mat-drawer-inner-container ng-tns-c36-0:

<mat-sidenav-container class="example-container" *ngIf="shouldRun">
  <mat-sidenav mode="side" opened>Sidenav content</mat-sidenav>
  <mat-sidenav-content>Main content</mat-sidenav-content>
</mat-sidenav-container>

Reproduction

As above, I use the mat-sidenav-container tag but don't know how to realize the Sidenav style of the official website one by one.

Environment

• Angular: ~9.1.0
• CDK/Material:^9.2.0
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[crisbeto]

The docs site is using a custom navigation. You can find the source here: https://github.com/angular/material.angular.io/blob/f9ee14a24a9c171c8d2cb6d053e055538eb21506/src/app/pages/component-sidenav/component-sidenav.ts#L100.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}