Merge 448f3f9 into dec2f65

mtlynch · Aug 10, 2018 · 42c8ab3 · 42c8ab3
2 parents dec2f65 + 448f3f9
commit 42c8ab3
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 28 deletions.
diff --git a/src/app/_components/nav/nav.component.html b/src/app/_components/nav/nav.component.html
@@ -13,8 +13,8 @@
 </mat-toolbar>
 
 <mat-toolbar color="primary" class="compressed">
-  <button mat-icon-button class="menu-button" (click)="sidenav.toggle()">
-    <mat-icon>menu</mat-icon>
+  <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()">
+    <mat-icon aria-label="Sidenav toggle icon">menu</mat-icon>
   </button>
   <a [routerLink]="['/']">
     <img class="logo" src="assets/img/logo.png" />
@@ -24,28 +24,13 @@
 </mat-toolbar>
 
 <mat-sidenav-container class="sidenav-container">
-  <mat-sidenav #sidenav mode="over" fixedInViewport="true" fixedTopGap="56">
+  <mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="'dialog'" [mode]="'side'" [opened]="false">
     <mat-nav-list>
-      <p class="sidenav-button">
-        <a [routerLink]="['/about']" (click)="sidenav.toggle()">About</a>
-        <br />
-      </p>
-      <p class="sidenav-button">
-        <a [routerLink]="['/pricing']" (click)="sidenav.toggle()">Pricing</a>
-        <br />
-      </p>
-      <p class="sidenav-button">
-        <a [routerLink]="['/demo']" (click)="sidenav.toggle()">Demo</a>
-        <br />
-      </p>
-      <p class="sidenav-button">
-        <a [routerLink]="['/docs']" (click)="sidenav.toggle()">Docs</a>
-        <br />
-      </p>
-      <p class="sidenav-button">
-        <a href="https://rapidapi.com/zestfuldata/api/Recipe%20and%20Ingredient%20Analysis">Get Started</a>
-        <br />
-      </p>
+      <a mat-list-item [routerLink]="['/about']" (click)="drawer.toggle()">About</a>
+      <a mat-list-item [routerLink]="['/pricing']" (click)="drawer.toggle()">Pricing</a>
+      <a mat-list-item [routerLink]="['/demo']" (click)="drawer.toggle()">Demo</a>
+      <a mat-list-item [routerLink]="['/docs']" (click)="drawer.toggle()">Docs</a>
+      <a mat-list-item href="https://rapidapi.com/zestfuldata/api/Recipe%20and%20Ingredient%20Analysis" (click)="drawer.toggle()">Get Started</a>
     </mat-nav-list>
   </mat-sidenav>
 </mat-sidenav-container>
diff --git a/src/app/_components/nav/nav.component.scss b/src/app/_components/nav/nav.component.scss
@@ -21,13 +21,16 @@ mat-toolbar.compressed {
 }
 
 .sidenav-container {
-  flex: 1 0 auto;
+  height: 100%;
+}
+
+.sidenav {
+  width: 200px;
   margin-top: 56px;
 }
 
-.sidenav-button {
-  font-size: 26pt;
-  padding: 25px 35px;
+mat-nav-list a {
+  font-size: 18pt;
 }
 
 .logo-link {

diff --git a/src/styles/_global.scss b/src/styles/_global.scss
@@ -23,7 +23,12 @@ body {
 h1 {
   @extend %font-roboto-regular;
   font-size: 3rem;
-  padding-bottom: 65px;
+  padding-top: 20px;
+  padding-bottom: 45px;
+  @include respond-to('small') {
+    padding-top: 20px;
+    padding-bottom: 35px;
+  }
 }
 
 h2 {