This repository was archived by the owner on Dec 18, 2024. It is now read-only.
feat(nav): new sidenav #300
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| <div class="docs-component-viewer-nav"> | ||
| <div class="docs-component-viewer-nav-inner"> | ||
| <nav *ngFor="let category of docItems.getCategories((params | async)?.section); let last = last;"> | ||
| <h3 (click)="toggleExpand(category.id)"> | ||
|
There was a problem hiding this comment. For a11y, each of these sections needs to act like an expansion panel. This means that the thing you interact with should be a |
||
| {{category.name}} | ||
| <mat-icon *ngIf="!getExpanded(category.id)">keyboard_arrow_down</mat-icon> | ||
| <mat-icon *ngIf="getExpanded(category.id)">keyboard_arrow_up</mat-icon> | ||
| </h3> | ||
| <ul [@bodyExpansion]="_getExpandedState(category.id)"> | ||
| <li *ngFor="let component of category.items"> | ||
| <a [routerLink]="'/' + (params | async)?.section+ '/' + component.id" | ||
| routerLinkActive="docs-component-viewer-sidenav-item-selected"> | ||
| {{component.name}} | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| <hr *ngIf="!last" /> | ||
| </nav> | ||
| </div> | ||
| </div> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,23 @@ | ||
| <mat-sidenav-container class="docs-component-viewer-sidenav-container"> | ||
| <mat-sidenav #sidenav class="docs-component-viewer-sidenav" | ||
| *ngIf="isScreenSmall()" | ||
| [opened]="!isScreenSmall()" | ||
| [mode]="isScreenSmall() ? 'over' : 'side'"> | ||
| <app-component-nav | ||
| [params]="params"> | ||
| </app-component-nav> | ||
|
There was a problem hiding this comment. This looks like it could fit on one line |
||
| </mat-sidenav> | ||
| <div class="docs-component-sidenav-content"> | ||
| <component-page-header (toggleSidenav)="sidenav.toggle()"></component-page-header> | ||
| <div class="docs-component-sidenav-inner-content"> | ||
| <div class="docs-component-sidenav-body-content"> | ||
| <app-component-nav | ||
|
There was a problem hiding this comment. Add a comment explaining the different structure based on screen size? |
||
| *ngIf="!isScreenSmall()" | ||
| [params]="params"> | ||
| </app-component-nav> | ||
| <router-outlet></router-outlet> | ||
| </div> | ||
| <app-footer></app-footer> | ||
| </div> | ||
| </div> | ||
| </mat-sidenav-container> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,88 +1,133 @@ | ||
| @import '../../../styles/constants'; | ||
|
|
||
| $sidenav-width: 240px; | ||
|
|
||
| .docs-component-viewer-sidenav-container { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| .docs-component-viewer-sidenav { | ||
| overflow: auto; | ||
| } | ||
|
|
||
| .docs-component-sidenav-inner-content { | ||
| display: flex; | ||
| flex-direction: row; | ||
|
|
||
| // The rule will match the element following the router-outlet which will be the routed component. | ||
| router-outlet + * { | ||
| flex-grow: 1; | ||
| } | ||
| } | ||
|
|
||
| .mat-drawer { | ||
| &::-webkit-scrollbar { | ||
| height: 4px; | ||
| width: 4px; | ||
| } | ||
| } | ||
|
|
||
| .docs-component-viewer-nav { | ||
| position: sticky; | ||
| top: 25px; | ||
|
|
||
| .docs-component-viewer-nav-inner { | ||
| margin: 25px; | ||
| width: $sidenav-width; | ||
| max-height: 75vh; | ||
| overflow: auto; | ||
|
|
||
| &::-webkit-scrollbar { | ||
| height: 4px; | ||
| width: 4px; | ||
| } | ||
|
|
||
| h3 { | ||
| padding: 10px 15px; | ||
| font-weight: 700; | ||
| line-height: 16px; | ||
| margin: 0; | ||
| font-size: 13px; | ||
| cursor: pointer; | ||
| position: relative; | ||
|
|
||
| .mat-icon { | ||
| position: absolute; | ||
| right: 5px; | ||
| font-size: 18px; | ||
| } | ||
| } | ||
|
|
||
| hr { | ||
| padding: 0; | ||
| margin: 0; | ||
| } | ||
|
|
||
| ul { | ||
| list-style-type: none; | ||
| margin: -5px 0 5px 0; | ||
| padding: 0; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| li { | ||
| font-size: 13px; | ||
| line-height: 16px; | ||
| margin: 0; | ||
| padding: 5px 15px 5px 20px; | ||
| } | ||
|
|
||
| a { | ||
| text-decoration: none; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .docs-component-sidenav-content { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| // Add specific rule to prevent default rule conflict | ||
| .docs-component-viewer-sidenav-container.mat-drawer-container{ | ||
| display: block; | ||
| overflow: hidden; | ||
| position: absolute; | ||
| top: 50px; | ||
|
|
||
| bottom: 0; | ||
| left: 0; | ||
| right: 0; | ||
| } | ||
|
|
||
| .docs-component-sidenav-inner-content { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .docs-component-sidenav-body-content { | ||
| display: flex; | ||
| min-height: calc(100vh - 264px); | ||
|
There was a problem hiding this comment. What is 264? It looks based on There was a problem hiding this comment. 264 is the footer + header nav height. There was a problem hiding this comment. Oh yeah lol of course the min-height doesn't have anything to do with sidenav width. Maybe add it as a variable with a comment? |
||
| } | ||
|
|
||
| @media (max-width: $small-breakpoint-width) { | ||
| // Add specific rule to prevent default rule conflict | ||
| .docs-component-viewer-sidenav-container .docs-component-viewer-sidenav { | ||
| top: 42px; | ||
|
|
||
| } | ||
|
|
||
| .mat-sidenav-content { | ||
| margin-top: 42px; | ||
| } | ||
|
|
||
| .docs-component-viewer-nav { | ||
| position: relative; | ||
| top: 0; | ||
|
|
||
| .docs-component-viewer-nav-inner { | ||
| box-sizing: border-box; | ||
| margin: 0; | ||
| max-height: initial; | ||
| box-sizing: border-box; | ||
| } | ||
| } | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is there a more descriptive name than
inner, or a comment you could add to explain what the element is?