Skip to content
This repository was archived by the owner on Jan 4, 2026. It is now read-only.

Commit efc27cd

Browse files
jelbournjelbourn
committed
Revert "feat(nav): new sidenav UX (#300)"
This reverts commit f1ddeae.
1 parent f1ddeae commit efc27cd

10 files changed

Lines changed: 109 additions & 284 deletions

File tree

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
"angular-cli": {},
66
"scripts": {
77
"start": "npm run build-themes && ng serve --aot --sourcemaps=false",
8-
"start-jit": "npm run build-themes && ng serve --sourcemaps=false",
98
"lint": "tslint \"src/**/*.ts\"",
109
"test": "ng test",
1110
"pree2e": "webdriver-manager update",

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

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

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

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

14-
&::-webkit-scrollbar-thumb {
15-
background: rgba(0, 0, 0, .26);
16-
}
17-
18-
button {
19-
color: rgba(mat-color($foreground, text), .5);
20-
}
12+
.docs-component-viewer-sidenav {
2113

22-
hr {
23-
border: none;
24-
border-top: solid 1px rgba(mat-color($foreground, secondary-text), .1)
14+
// Section divider
15+
h3 {
16+
background: rgba(mat-color($foreground, secondary-text), .32);
17+
color: mat-color($primary, default-contrast);
2518
}
2619

27-
a {
20+
// Sidenav navigation items
21+
li {
22+
border-color: rgba(mat-color($foreground, secondary-text), .06);
2823
color: mat-color($foreground, secondary-text);
2924

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-
}
25+
> a {
26+
color: mat-color($foreground, secondary-text);
4327

44-
.mat-drawer {
45-
&::-webkit-scrollbar-thumb {
46-
background: rgba(0, 0, 0, .26);
28+
&.is-selected,
29+
&:hover,
30+
&:focus {
31+
background: mat-color($background, background);
32+
color: mat-color($primary);
33+
}
4734
}
4835
}
4936
}

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

Lines changed: 0 additions & 23 deletions
This file was deleted.

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

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

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

Lines changed: 58 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,149 +1,88 @@
1-
@import '../../../styles/constants';
2-
1+
$sidenav-spacing-unit: 8px;
32
$sidenav-width: 240px;
43

4+
app-component-sidenav {
5+
display: flex;
6+
}
7+
58
.docs-component-viewer-sidenav-container {
6-
box-sizing: border-box;
9+
width: 100%;
10+
11+
.mat-drawer-content {
12+
position: absolute;
13+
right: 0;
14+
left: 0;
15+
}
716
}
817

918
.docs-component-viewer-sidenav {
19+
box-shadow: 3px 0 6px rgba(0, 0, 0, .24);
20+
padding-bottom: 72px;
21+
width: $sidenav-width;
22+
bottom: 0;
1023
overflow: auto;
11-
}
24+
height: 100%;
1225

13-
.docs-component-sidenav-inner-content {
14-
display: flex;
15-
flex-direction: row;
26+
&.mat-sidenav-opened {
27+
box-shadow: 3px 0 6px rgba(0, 0, 0, .24);
28+
}
1629

17-
// The rule will match the element following the router-outlet which will be the routed component.
18-
router-outlet + * {
19-
flex-grow: 1;
30+
// Section divider
31+
h3 {
32+
border: none;
33+
font-size: 10px;
34+
letter-spacing: 1px;
35+
line-height: $sidenav-spacing-unit * 3;
36+
text-transform: uppercase;
37+
font-weight: 400;
38+
margin: 0;
39+
padding: 0 ($sidenav-spacing-unit * 2);
2040
}
21-
}
2241

23-
.mat-drawer {
24-
&::-webkit-scrollbar {
25-
height: 4px;
26-
width: 4px;
42+
ul {
43+
list-style-type: none;
44+
margin: 0;
45+
padding: 0;
2746
}
28-
}
2947

30-
.docs-component-viewer-nav {
31-
position: sticky;
32-
top: 25px;
48+
// Sidenav navigation item
49+
li {
50+
border-bottom-width: 1px;
51+
border-bottom-style: solid;
52+
margin: 0;
53+
padding: 0;
3354

34-
.docs-component-viewer-nav-content {
35-
margin: 25px;
36-
width: $sidenav-width;
37-
max-height: 75vh;
38-
overflow: auto;
3955

40-
&::-webkit-scrollbar {
41-
height: 4px;
42-
width: 4px;
56+
// Hide the border on the last item
57+
&:last-child {
58+
border-color: transparent;
4359
}
4460

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

63-
.mat-icon {
64-
position: absolute;
65-
right: 5px;
66-
font-size: 18px;
72+
&.docs-component-viewer-sidenav-item-selected {
73+
font-weight: 600;
6774
}
6875
}
69-
70-
hr {
71-
padding: 0;
72-
margin: 0;
73-
}
74-
75-
ul {
76-
list-style-type: none;
77-
margin: -5px 0 5px 0;
78-
padding: 0;
79-
overflow: hidden;
80-
}
81-
82-
li {
83-
font-size: 13px;
84-
line-height: 16px;
85-
margin: 0;
86-
padding: 5px 15px 5px 20px;
87-
}
88-
89-
a {
90-
display: block;
91-
text-decoration: none;
92-
}
9376
}
9477
}
9578

9679
.docs-component-sidenav-content {
80+
min-height: 100%;
9781
display: flex;
9882
flex-direction: column;
99-
}
100-
101-
// Add specific rule to prevent default rule conflict
102-
.docs-component-viewer-sidenav-container.mat-drawer-container{
103-
display: block;
104-
overflow: hidden;
105-
position: absolute;
106-
// Offset the top by the toolbar height
107-
top: 50px;
108-
bottom: 0;
109-
left: 0;
110-
right: 0;
111-
}
112-
113-
.docs-component-sidenav-inner-content {
114-
display: flex;
115-
flex-direction: column;
116-
}
117-
118-
.docs-component-sidenav-body-content {
119-
display: flex;
120-
// footer should always reside at the bottom of the screen.
121-
// if container not 100vh, push min height to that minus
122-
// the offset of the top bar and the footer height
123-
min-height: calc(100vh - 264px);
124-
}
125-
126-
@media (max-width: $small-breakpoint-width) {
127-
// Add specific rule to prevent default rule conflict
128-
.docs-component-viewer-sidenav-container .docs-component-viewer-sidenav {
129-
// offset the top by the header + tabs on a small screen
130-
top: 42px;
131-
}
132-
133-
.mat-sidenav-content {
134-
// offset the top by the header + tabs on a small screen
135-
margin-top: 42px;
136-
}
137-
138-
.docs-component-viewer-nav {
139-
position: relative;
140-
top: 0;
14183

142-
.docs-component-viewer-nav-content {
143-
box-sizing: border-box;
144-
margin: 0;
145-
max-height: initial;
146-
box-sizing: border-box;
147-
}
84+
// The rule will match the element following the router-outlet which will be the routed component.
85+
router-outlet + * {
86+
flex-grow: 1;
14887
}
14988
}

0 commit comments

Comments
 (0)