Markup for Add Course to plan sidenav

src/app/app.component.html

@@ -2,21 +2,88 @@
 	<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">Drawer content 2
-		</mat-sidenav>
-		<mat-sidenav-content>
-			<mat-sidenav-container>
-				<mat-sidenav #rightAddCourse class="add-sidenav1"mode="over" position="end">
-					<div>content
-						<button mat-button class="btn-primary" (click)="rightAddCourse2.toggle()">Next side nav</button>
-					</div>
-				</mat-sidenav>
-				<mat-sidenav-content>
-					<router-outlet></router-outlet>
-				</mat-sidenav-content>
-			</mat-sidenav-container>
-		</mat-sidenav-content>
-	</mat-sidenav-container>
-</main>
+	<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>

src/app/app.component.ts

 import { SidenavService } from './core/service/sidenav.service';
+import { DataService } from './core/data.service';
 import { Component, ViewChild, OnInit } from '@angular/core';
 import { MatSidenav } from '@angular/material';
+import { ActivatedRoute } from '@angular/router';
+import { DegreePlannerDataService } from './core/service/degree-planner-data.service';
+// import { FormBuilder, FormGroup } from '@angular/forms';
 
 @Component({
   selector: 'cse-root',
@@ -14,8 +18,27 @@ export class AppComponent implements OnInit {
   ngOnInit() {
     this.sidenavService.setSidenav(this.rightAddCourse);
   }
-}
+	coursesData$: any;
+	selectedDegreePlan: number;
+
+	@ViewChild('rightAddCourse') public rightAddCourse: MatSidenav;
+	constructor(
+		private dataService: DataService,
+		private route: ActivatedRoute,
+		private sidenavService: SidenavService,
+		private degreePlannerDataSvc: DegreePlannerDataService) {
+		this.selectedDegreePlan = 520224;
+		this.coursesData$ = this.degreePlannerDataSvc.getDegreePlanDataById(this.selectedDegreePlan);
+	}
 
+	ngOnInit() {
+		this.sidenavService.setSidenav(this.rightAddCourse);
+	}
+
+	closeSidenav(id) {
+		return id.close();
+	}
+}
 document.addEventListener('WebComponentsReady', function() {
   const customEvent = new CustomEvent('myuw-login', {
     detail: {