Skip to content
This repository was archived by the owner on Dec 18, 2024. It is now read-only.

Commit 81e8698

Browse files
amcdnlmmalerba
amcdnl
authored and
mmalerba
committed
New sidenav (#310)
* feat(nav): implement new left nav * feat(nav): cont imp left nav * chore(nit): address PR feedback * fix: window scroll event not working * fix: footer spacing causing scrollbar overflows * chore: nit feedback
1 parent 427d757 commit 81e8698

File tree

10 files changed

+277
-96
lines changed

10 files changed

+277
-96
lines changed

‎src/app/pages/component-sidenav/_component-sidenav-theme.scss

Lines changed: 32 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,49 @@
11
@import '../../../../node_modules/@angular/material/theming';
2+
@import '../../../styles/constants';
23

34
@mixin component-viewer-sidenav-theme($theme) {
45
$primary: map-get($theme, primary);
5-
$accent: map-get($theme, accent);
6-
$warn: map-get($theme, warn);
76
$background: map-get($theme, background);
87
$foreground: map-get($theme, foreground);
9-
$sidenav: '.docs-component-viewer-sidenav';
8+
$is-dark-theme: map-get($theme, is-dark);
9+
$nav-background-opacity: if($is-dark-theme, 0.2, 0.03);
1010

11+
.docs-component-viewer-nav-content {
12+
background: rgba(0, 0, 0, $nav-background-opacity);
1113

12-
.docs-component-viewer-sidenav {
14+
&::-webkit-scrollbar-thumb {
15+
background: rgba(0, 0, 0, .26);
16+
}
1317

14-
// Section divider
15-
h3 {
16-
background: rgba(mat-color($foreground, secondary-text), .32);
17-
color: mat-color($primary, default-contrast);
18+
button {
19+
color: rgba(mat-color($foreground, text), .5);
1820
}
1921

20-
// Sidenav navigation items
21-
li {
22-
border-color: rgba(mat-color($foreground, secondary-text), .06);
23-
color: mat-color($foreground, secondary-text);
22+
hr {
23+
border: none;
24+
border-top: solid 1px rgba(mat-color($foreground, secondary-text), .1)
25+
}
2426

25-
> a {
27+
a {
2628
color: mat-color($foreground, secondary-text);
2729

28-
&.is-selected,
29-
&:hover,
30-
&:focus {
31-
background: mat-color($background, background);
32-
color: mat-color($primary);
33-
}
30+
&.docs-component-viewer-sidenav-item-selected,
31+
&:hover {
32+
color: mat-color($primary);
33+
}
34+
}
35+
}
36+
37+
@media (max-width: $small-breakpoint-width) {
38+
.docs-component-viewer-sidenav {
39+
.docs-component-viewer-nav-content {
40+
background: none;
41+
}
42+
}
43+
44+
.mat-drawer {
45+
&::-webkit-scrollbar-thumb {
46+
background: rgba(0, 0, 0, .26);
3447
}
3548
}
3649
}

‎src/app/pages/component-sidenav/component-nav.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<div class="docs-component-viewer-nav">
2+
<div class="docs-component-viewer-nav-content">
3+
<nav *ngFor="let category of docItems.getCategories((params | async)?.section); let last = last;">
4+
<button (click)="toggleExpand(category.id)"
5+
[attr.aria-label]="category.name + ', section toggle'"
6+
[attr.aria-controls]="'panel-' + category.id"
7+
[attr.aria-expanded]="getExpanded(category.id)">
8+
{{category.name}}
9+
<mat-icon *ngIf="!getExpanded(category.id)">keyboard_arrow_down</mat-icon>
10+
<mat-icon *ngIf="getExpanded(category.id)">keyboard_arrow_up</mat-icon>
11+
</button>
12+
<ul [@bodyExpansion]="_getExpandedState(category.id)" id="panel-{{category.id}}">
13+
<li *ngFor="let component of category.items">
14+
<a [routerLink]="'/' + (params | async)?.section+ '/' + component.id"
15+
routerLinkActive="docs-component-viewer-sidenav-item-selected">
16+
{{component.name}}
17+
</a>
18+
</li>
19+
</ul>
20+
<hr *ngIf="!last" />
21+
</nav>
22+
</div>
23+
</div>

‎src/app/pages/component-sidenav/component-sidenav.html

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
<mat-sidenav-container class="docs-component-viewer-sidenav-container">
2+
<!-- If on small screen, menu resides in drawer -->
23
<mat-sidenav #sidenav class="docs-component-viewer-sidenav"
4+
*ngIf="isScreenSmall()"
35
[opened]="!isScreenSmall()"
46
[mode]="isScreenSmall() ? 'over' : 'side'"
57
[fixedInViewport]="isScreenSmall()"
68
fixedTopGap="92">
7-
<nav *ngFor="let category of docItems.getCategories((params | async)?.section)">
8-
<h3>{{category.name}}</h3>
9-
<ul>
10-
<li *ngFor="let component of category.items">
11-
<a [routerLink]="'/' + (params | async)?.section+ '/' + component.id"
12-
routerLinkActive="docs-component-viewer-sidenav-item-selected">
13-
{{component.name}}
14-
</a>
15-
</li>
16-
</ul>
17-
</nav>
9+
<app-component-nav [params]="params"></app-component-nav>
1810
</mat-sidenav>
19-
2011
<div class="docs-component-sidenav-content">
2112
<component-page-header (toggleSidenav)="sidenav.toggle()"></component-page-header>
22-
<router-outlet></router-outlet>
23-
<app-footer></app-footer>
13+
<div class="docs-component-sidenav-inner-content">
14+
<div class="docs-component-sidenav-body-content">
15+
<!-- If on large screen, menu resides to left of content -->
16+
<app-component-nav
17+
*ngIf="!isScreenSmall()"
18+
[params]="params">
19+
</app-component-nav>
20+
<router-outlet></router-outlet>
21+
</div>
22+
<app-footer></app-footer>
23+
</div>
2424
</div>
2525
</mat-sidenav-container>

‎src/app/pages/component-sidenav/component-sidenav.scss

Lines changed: 101 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
$sidenav-spacing-unit: 8px;
1+
@import '../../../styles/constants';
2+
23
$sidenav-width: 240px;
34

45
app-component-sidenav {
@@ -8,77 +9,130 @@ app-component-sidenav {
89

910
.docs-component-viewer-sidenav-container {
1011
flex: 1;
12+
box-sizing: border-box;
1113
}
1214

1315
.docs-component-viewer-sidenav {
14-
box-shadow: 3px 0 6px rgba(0, 0, 0, .24);
15-
padding-bottom: 72px;
16-
width: $sidenav-width;
17-
bottom: 0;
1816
overflow: auto;
19-
height: 100%;
17+
}
2018

21-
&.mat-sidenav-opened {
22-
box-shadow: 3px 0 6px rgba(0, 0, 0, .24);
23-
}
19+
.docs-component-sidenav-inner-content {
20+
display: flex;
21+
flex-direction: row;
2422

25-
// Section divider
26-
h3 {
27-
border: none;
28-
font-size: 10px;
29-
letter-spacing: 1px;
30-
line-height: $sidenav-spacing-unit * 3;
31-
text-transform: uppercase;
32-
font-weight: 400;
33-
margin: 0;
34-
padding: 0 ($sidenav-spacing-unit * 2);
23+
// The rule will match the element following the router-outlet which will be the routed component.
24+
router-outlet + * {
25+
flex-grow: 1;
3526
}
27+
}
3628

37-
ul {
38-
list-style-type: none;
39-
margin: 0;
40-
padding: 0;
29+
.mat-drawer {
30+
&::-webkit-scrollbar {
31+
height: 4px;
32+
width: 4px;
4133
}
34+
}
4235

43-
// Sidenav navigation item
44-
li {
45-
border-bottom-width: 1px;
46-
border-bottom-style: solid;
47-
margin: 0;
48-
padding: 0;
36+
.docs-component-viewer-nav {
37+
position: sticky;
38+
top: 25px;
4939

40+
.docs-component-viewer-nav-content {
41+
margin: 25px;
42+
width: $sidenav-width;
43+
max-height: 75vh;
44+
overflow: auto;
5045

51-
// Hide the border on the last item
52-
&:last-child {
53-
border-color: transparent;
46+
&::-webkit-scrollbar {
47+
height: 4px;
48+
width: 4px;
5449
}
5550

56-
> a {
57-
box-sizing: border-box;
58-
display: block;
59-
font-size: 14px;
60-
font-weight: 400;
61-
line-height: ($sidenav-spacing-unit * 6) - 1;
62-
text-decoration: none;
63-
transition: all .3s;
64-
padding: 0 ($sidenav-spacing-unit * 2);
51+
button {
52+
padding: 10px 15px;
53+
font-weight: 700;
54+
line-height: 16px;
55+
margin: 0;
56+
font-size: 13px;
57+
cursor: pointer;
6558
position: relative;
59+
display: block;
60+
width: 100%;
61+
text-align: left;
62+
background: none;
63+
border: none;
64+
65+
&:focus {
66+
outline: none;
67+
}
6668

67-
&.docs-component-viewer-sidenav-item-selected {
68-
font-weight: 600;
69+
.mat-icon {
70+
position: absolute;
71+
right: 5px;
72+
font-size: 18px;
6973
}
7074
}
75+
76+
hr {
77+
padding: 0;
78+
margin: 0;
79+
}
80+
81+
ul {
82+
list-style-type: none;
83+
margin: -5px 0 5px 0;
84+
padding: 0;
85+
overflow: hidden;
86+
}
87+
88+
li {
89+
font-size: 13px;
90+
line-height: 16px;
91+
margin: 0;
92+
padding: 5px 15px 5px 20px;
93+
}
94+
95+
a {
96+
display: block;
97+
text-decoration: none;
98+
}
7199
}
72100
}
73101

74102
.docs-component-sidenav-content {
75-
min-height: 100%;
76103
display: flex;
77104
flex-direction: column;
105+
min-height: 100%;
106+
}
78107

79-
// The rule will match the element following the router-outlet which will be the routed component.
80-
router-outlet + * {
81-
flex-grow: 1;
108+
.docs-component-sidenav-inner-content {
109+
display: flex;
110+
flex-direction: column;
111+
flex: 1;
112+
}
113+
114+
.docs-component-sidenav-body-content {
115+
display: flex;
116+
flex: 1;
117+
}
118+
119+
@media (max-width: $small-breakpoint-width) {
120+
// Add specific rule to prevent default rule conflict
121+
.docs-component-viewer-sidenav-container .docs-component-viewer-sidenav {
122+
// position right above the content
123+
z-index: 4;
124+
}
125+
126+
.docs-component-viewer-nav {
127+
position: relative;
128+
top: 0;
129+
130+
.docs-component-viewer-nav-content {
131+
box-sizing: border-box;
132+
margin: 0;
133+
max-height: initial;
134+
box-sizing: border-box;
135+
}
82136
}
83137
}
84138

0 commit comments

Comments
 (0)