Replace mat-drawer with mat-sidenav

src/app/app.component.html

 <header>
-	<cse-header></cse-header>
-	<cse-navigation></cse-navigation>
+        <cse-header></cse-header>
+        <cse-navigation></cse-navigation>
 </header>
 	<main>
 		<mat-sidenav-container class="example-container" hasBackdrop="false" style="height: 100vh;">
 			<mat-sidenav mode="over" position="end" #rightAddCourse>
-				<mat-drawer-container>
-					<mat-drawer mode="side" position="start" #rightAddCourse2>
+				<mat-sidenav-container>
+					<mat-sidenav mode="side" position="start" #rightAddCourse2>
 						<mat-toolbar color="primary" class="dialog-toolbar">
 							<button mat-button class="close-btn" (click)="rightAddCourse2.close()"><i class="material-icons">clear</i></button>
 							<span class="dialog-toolbar-title">Add course to degree plan</span>
@@ -24,7 +24,6 @@
 							</div>
 							<div>
 								<!-- <p>Introduction to several of Shakespare's most popular plays and their relation to other works of English and American literature.</p> -->
-
 								<p><span class="semi-bold">Enroll Info: </span>None</p>
 								<p><span class="semi-bold">Requisites: </span>None</p>
 								<ul class="courseDetails-list">
@@ -61,8 +60,8 @@
 								</div>
 							</div>
 						</div>
-					</mat-drawer>
-					<mat-drawer-conntent class="course-search-pane">
+					</mat-sidenav>
+					<mat-sidenav-content class="course-search-pane">
 						<mat-toolbar color="primary" class="dialog-toolbar">
 							<span class="dialog-toolbar-title">Course Search</span>
 							<button mat-button class="close-btn" (click)="rightAddCourse.close(); rightAddCourse2.close()"><i class="material-icons">clear</i></button>
@@ -127,8 +126,8 @@
 								</div>
 							</cse-course-item>
 						</div>
-					</mat-drawer-conntent>
-				</mat-drawer-container>
+					</mat-sidenav-content>
+				</mat-sidenav-container>
 			</mat-sidenav>
 
 			<mat-sidenav-content>