app.component.html

<header>
        <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-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>
						</mat-toolbar>
						<div id="course-details-content" class="mat-typography">
							<div fxLayout="row">
								<div fxLayout="row" fxLayout.lt-md="column" fxFlex="100" fxLayoutGap="10px" class="course-details-header">
									<div fxFlex="50" class="course-detail-title" fxLayoutAlign="start start">
										<h3>English 162<span class="course-detail-subtitle">Shakespeare</span></h3>
									</div>
									<div fxFlex="50" class="course-detail-title" fxLayoutAlign="end start">
										<button mat-raised-button class="btn-primary mat-button" aria-label="Add course to plan">Add course</button>
									</div>
								</div>
							</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">
									<li><span class="semi-bold">Credits:</span> 3</li>
									<li><span class="semi-bold">Level: </span>
										<span>Elementary</span>
									</li>
									<li><span class="semi-bold">Breadth: </span>
										<span>Literature</span>
									</li>
									<li><span class="semi-bold">L&amp;S Credit Type:</span>
										Counts as LAS credit (L&S)
									</li>
								</ul>
								<ul class="courseDetails-list">
									<li><span class="semi-bold">Last Taught: </span>Fall 2018</li>
									<li><span class="semi-bold">Typically Offered: </span>Fall, Spring, Summer</li>
								</ul>

								<p><span class="semi-bold">Subject Notes:</span><br>
								<span class="subject-notes"></span></p>
							</div>

							<div class="course-details-footer">
								<p class="semi-bold course-detail-title">English Information:</p>
								<div fxLayout="row">
									<div fxLayout="row" fxFlex="100" fxLayoutGap="10px">
										<div fxFlex="100" fxLayout.lt-sm="column" class="mat-dialog-actions" fxLayoutAlign="start center" fxLayoutAlign.lt-sm="start start">
											<a class="md-primary btn-link mat-button" href="">Website</a>
											<a class="md-primary btn-link mat-button" href="">Undergraduate Info</a>
											<a class="md-primary btn-link mat-button" href="">Graduate Info</a>
										</div>
									</div>
								</div>
							</div>
						</div>
					</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>
						</mat-toolbar>

						<form class="add-course-form" fxLayout="column" fxLayoutAlign="space-around none" style="padding: 12px 22px;">
							<mat-form-field>
								<input type="text" placeholder="Term" aria-label="Term" matInput [formControl]="" [matAutocomplete]="term">
								<mat-autocomplete #term="matAutocomplete">
									<mat-option *ngFor="let term of coursesData$ | async" [value]="term[0].termCode | getTermDescription">
										{{ term[0].termCode | getTermDescription }}
									</mat-option>
								</mat-autocomplete>
							</mat-form-field>

							<mat-form-field>
								<input type="text" placeholder="Subject" aria-label="Subject" matInput [formControl]="" [matAutocomplete]="subject">
								<mat-autocomplete #subject="matAutocomplete">
									<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-autocomplete>
									<!-- <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>
						</form>

						<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()">
								<div class="course-item">
									<p class="course-number">ENGL 162</p>
									<p class="course-title">Shakespeare</p>
								</div>
								<div class="course-item">
									<p class="course-number">PHILOS 101</p>
									<p class="course-title">Introduction to Philosophy</p>
								</div>
								<div class="course-item">
									<p class="course-number">Math 135</p>
									<p class="course-title">Algebraic Reasoning for Teaching Math</p>
								</div>
							</cse-course-item>
						</div>
					</mat-sidenav-content>
				</mat-sidenav-container>
			</mat-sidenav>

			<mat-sidenav-content>
				<router-outlet></router-outlet>
			</mat-sidenav-content>

		</mat-sidenav-container>
	</main>