degree-planner.component.html

<mat-sidenav-container id="plans-container">
	<!-- Menu side nav -->
	<mat-sidenav #rightMenu position="end" [mode]="mobileView.matches ? 'over' : 'side'" [opened]="mobileView.matches ? false : true">
		<cse-sidenav-menu-item [favoriteDropZone]="getTermDropZone()" [subjectsMap]="subjectsMap"></cse-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;">
			<mat-form-field>
				<mat-select placeholder="Degree Plans" [disableOptionCentering]="true" [(ngModel)]="selectedDegreePlan">
					<mat-option *ngFor="let degreePlan of degreePlans" [value]="degreePlan.roadmapId">
						{{ degreePlan.name }}
					</mat-option>
				</mat-select>
			</mat-form-field>
			<button mat-button class="btn-primary">Check Plan (DARS)</button>
			<button id="menu-toggle-btn" mat-button (click)="rightMenu.toggle()">
				<i *ngIf="rightMenu.opened" class="material-icons">chevron_right</i>
				<i *ngIf="!rightMenu.opened" class="material-icons">chevron_left</i>
			</button>
		</div>

		<div fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" style="margin: 24px">
			<mat-accordion multi="true">
				<mat-expansion-panel *ngFor="let year of termsByAcademicYear | keyvalue" class="year-container"> <!--[expanded]="true"-->
					<mat-expansion-panel-header>
						<mat-panel-title>
							{{ termsByAcademicYear[year.key].year | academicYearState }}
						</mat-panel-title>
					</mat-expansion-panel-header>
					<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" class="term-container-wrapper">
						<cse-term-container 
							*ngFor="let term of termsByAcademicYear[year.key].terms | keyvalue" 
							[term]="termsByAcademicYear[year.key].terms[term.key]" 
							[courses]="termsByAcademicYear[year.key].terms[term.key]['courses']" 
							[termCodes]="getTermDropZone()"
							[termsByAcademicYear]="termsByAcademicYear"
							[subjectsMap]="subjectsMap"
							fxFlex="33%"
						></cse-term-container>
					</div>
				</mat-expansion-panel>
			</mat-accordion>
		</div>
	</mat-sidenav-content>
</mat-sidenav-container>