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
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,23 @@ | ||
| <div class="docs-component-viewer-nav"> | ||
| <div class="docs-component-viewer-nav-content"> | ||
| <nav *ngFor="let category of docItems.getCategories((params | async)?.section); let last = last;"> | ||
| <button (click)="toggleExpand(category.id)" | ||
| [attr.aria-label]="'Expand the ' + category.name" | ||
|
There was a problem hiding this comment. I tried this out with VoiceOver. The label would be easier to understand as: |
||
| [attr.aria-controls]="'panel-' + category.id" | ||
| [attr.aria-expanded]="getExpanded(category.id)"> | ||
| {{category.name}} | ||
| <mat-icon *ngIf="!getExpanded(category.id)">keyboard_arrow_down</mat-icon> | ||
| <mat-icon *ngIf="getExpanded(category.id)">keyboard_arrow_up</mat-icon> | ||
| </button> | ||
| <ul [@bodyExpansion]="_getExpandedState(category.id)" id="panel-{{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"> | ||
| <!-- If on small screen, menu resides in drawer --> | ||
| <mat-sidenav #sidenav class="docs-component-viewer-sidenav" | ||
| *ngIf="isScreenSmall()" | ||
| [opened]="!isScreenSmall()" | ||
| [mode]="isScreenSmall() ? 'over' : 'side'"> | ||
| <app-component-nav [params]="params"></app-component-nav> | ||
| </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"> | ||
| <!-- If on large screen, menu resides to left of 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,149 @@ | ||
| @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-content { | ||
| margin: 25px; | ||
| width: $sidenav-width; | ||
| max-height: 75vh; | ||
| overflow: auto; | ||
|
|
||
| &::-webkit-scrollbar { | ||
| height: 4px; | ||
| width: 4px; | ||
| } | ||
|
|
||
| button { | ||
| padding: 10px 15px; | ||
| font-weight: 700; | ||
| line-height: 16px; | ||
| margin: 0; | ||
| font-size: 13px; | ||
| cursor: pointer; | ||
| position: relative; | ||
| display: block; | ||
| width: 100%; | ||
| text-align: left; | ||
| background: none; | ||
| border: none; | ||
|
|
||
| &:focus { | ||
| outline: none; | ||
| } | ||
|
|
||
| .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 { | ||
| display: block; | ||
| 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; | ||
| // Offset the top by the toolbar height | ||
| 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; | ||
| // footer should always reside at the bottom of the screen. | ||
| // if container not 100vh, push min height to that minus | ||
| // the offset of the top bar and the footer height | ||
| 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 { | ||
| // offset the top by the header + tabs on a small screen | ||
| top: 42px; | ||
|
|
||
| } | ||
|
|
||
| .mat-sidenav-content { | ||
| // offset the top by the header + tabs on a small screen | ||
| margin-top: 42px; | ||
| } | ||
|
|
||
| .docs-component-viewer-nav { | ||
| position: relative; | ||
| top: 0; | ||
|
|
||
| .docs-component-viewer-nav-content { | ||
| 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.
--aotWant to add another command like
start-jitthat is set up that way?