degree-planner.component.html

<mat-sidenav-container id="plans-container">

	<mat-sidenav #sidenav position="end" mode="side" [opened]=true disableClose>
		<app-sidenav-menu-item></app-sidenav-menu-item>
	</mat-sidenav>

	<mat-sidenav-content>
		<div fxLayout="row" fxLayout.lt-sm="column" fxLayoutGap="20px" fxLayoutAlign="start center" style="margin: 24px 0px 24px 24px;">
			<div>
				<mat-form-field>
					<mat-select placeholder="Degree Plans" [disableOptionCentering]=true [value]="selectedDegreePlan">
						<mat-option *ngFor="let degreePlan of degreePlans" [value]="degreePlan.roadmapId">
							{{degreePlan.name}}
						</mat-option>
					</mat-select>
				</mat-form-field>
			</div>
			<button mat-button class="btn-primary">Check Plan (DARS)</button>
			<button id="menu-toggle-btn" mat-button (click)="sidenav.toggle()">
				<i *ngIf="sidenav.opened" class="material-icons">chevron_right</i>
				<i *ngIf="!sidenav.opened" class="material-icons">chevron_left</i>
			</button>
		</div>

		<div fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" style="margin: 24px">

		<mat-accordion>
				<mat-expansion-panel class="year-container" [expanded]="true">
					<mat-expansion-panel-header>
						<mat-panel-title>
						Past: 2017-2018
						</mat-panel-title>
					</mat-expansion-panel-header>
					<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutAlign="start stretch">
						<mat-card class="term-container" fxFlex="33%">
							<div fxLayout="row" fxLayoutAlign="space-between stretch">
								<h2>Fall 2017</h2><p class="text-right semi-bold">14 Credits</p>
							</div>
							<div style="background-color: #fff">
								<app-term-container></app-term-container>
							</div>
						</mat-card>
						<mat-card class="term-container" fxFlex="33%" fxFlexOrder="3">
							<div fxLayout="row" fxLayoutAlign="space-between stretch">
								<h2>Spring 2018</h2><p class="text-right semi-bold">14 Credits</p>
							</div>
							<div style="background-color: #fff">Courses go here....</div>
						</mat-card>
						<mat-card class="term-container" fxFlex="33%" fxFlexOrder="3">
							<div fxLayout="row" fxLayoutAlign="space-between stretch">
								<h2>Summer 2018</h2><p class="text-right semi-bold">14 Credits</p>
							</div>
							<div style="background-color: #fff">Courses go here....</div>
						</mat-card>
					</div>
				</mat-expansion-panel>
			</mat-accordion>
		</div>
	</mat-sidenav-content>
</mat-sidenav-container>