app.component.html

<header>
	<cse-header></cse-header>
	<cse-navigation></cse-navigation>
</header>
	<main>
		<mat-sidenav-container class="example-container" hasBackdrop="false">
			<mat-sidenav #rightAddCourse2 mode="over" position="end">
				<mat-toolbar color="primary" class="dialog-toolbar">
					<button mat-button class="close-btn" (click)="closeSidenav(rightAddCourse2)"><i class="material-icons">clear</i></button>
					<span class="dialog-toolbar-title">Add course to degree plan</span>
				</mat-toolbar>
				Course Details
				<!-- <cse-course-details></cse-course-details> -->
			</mat-sidenav>
			<mat-sidenav-content>
				<mat-sidenav-container>
					<mat-sidenav #rightAddCourse class="add-sidenav1" mode="over" position="end">
						<mat-toolbar color="primary" class="dialog-toolbar">
							<span class="dialog-toolbar-title">Course Search</span>
							<button mat-button class="close-btn" (click)="closeSidenav(rightAddCourse)"><i class="material-icons">clear</i></button>
						</mat-toolbar>
							<div fxLayout="column" fxLayoutAlign="space-around none" style="padding: 12px 22px;">
								<mat-form-field>
									<mat-select placeholder="Term" required>
										<mat-option *ngFor="let term of coursesData$ | async" [value]="term">
											{{ term[0].termCode | getTermDescription }}
										</mat-option>
										<!-- <mat-option>Spring 2019</mat-option>
										<mat-option>Summer 2019</mat-option>
										<mat-option>Fall 2019</mat-option>
										<mat-option>Spring 2020</mat-option>
										<mat-option>Summer 2020</mat-option> -->
									</mat-select>
										<!-- <mat-error *ngIf="terms.hasError('required')">Please select term</mat-error> -->
								</mat-form-field>

								<mat-form-field>
									<mat-select placeholder="Subject" [formControl]="" required>
										<mat-option>Afro-American Studies</mat-option>
										<mat-option>Agricultural and Applied Economics</mat-option>
										<mat-option>Agroecology</mat-option>
										<mat-option>Agronomy</mat-option>
										<mat-option>Air Force Aerospace Studies</mat-option>
										<mat-option>American Indian Studies</mat-option>
										<mat-option>Anatomy</mat-option>
										<mat-option>Anatomy & Physiology</mat-option>
									</mat-select>
										<!-- <mat-error *ngIf="terms.hasError('required')">Please select an existing subject or 'All'.</mat-error> -->
								</mat-form-field>

								<mat-form-field class="example-full-width">
									<input matInput placeholder="Subject, number" value="">
								</mat-form-field>
							</div>

							<div class="search-results-toolbar mat-typography" fxLayout="row" fxLayoutAlign="space-between center" style="padding: 12px 22px; background-color: #EDF1F3">
								<h3 style="margin: 0px;">7 of 7 results</h3>
								<span class="mat-button">Reset Search</span>
							</div>

							<div id="course-search-results"  fxLayout="column" fxLayoutAlign="space-around none" style="padding: 12px 22px;">
								<mat-form-field>
									<mat-select placeholder="Order by">
										<mat-option>Relevance</mat-option>
										<mat-option>Subject</mat-option>
										<mat-option>Catalog Number</mat-option>
									</mat-select>
								</mat-form-field>

								<cse-course-item (click)="rightAddCourse2.toggle()"
									style="padding: 8px;
									border: solid 1px #FDFDFD;
									background-color: #FDFDFD;
									border-radius: 5px;
									font-family: 'Helvetica Neue', Georgia, Helvetica, Arial, sans-serif;
									font-size: 14px;
									box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
									cursor: pointer;">
									Chem 101
								</cse-course-item>
							</div>
						</mat-sidenav>
					<mat-sidenav-content>
						<router-outlet></router-outlet>
					</mat-sidenav-content>
				</mat-sidenav-container>
			</mat-sidenav-content>
		</mat-sidenav-container>
	</main>