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()"></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">
				<ng-container *ngFor="let term of coursesData$ | async">
					<mat-expansion-panel class="year-container"[expanded]="true">
						<mat-expansion-panel-header>
							<mat-panel-title>
								{{ term[0].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']" 
								[favoriteCourses]="favoriteCourses"
								[termCodes]="getTermDropZone()"
								[termsByAcademicYear]="termsByAcademicYear"
								fxFlex="33%"
								></cse-term-container> -->
									<cse-term-container fxFlex="33%" [courses]="term[0].courses" id="term-1{{term[0].year}}2"></cse-term-container>
									<cse-term-container fxFlex="33%" [courses]="term[1].courses" id="term-1{{term[0].year}}4"></cse-term-container>
									<cse-term-container fxFlex="33%" [courses]="term[2].courses" id="term-1{{term[0].year}}6"></cse-term-container>
							</div>
						</mat-expansion-panel>
					</ng-container>
					</mat-accordion>
		</div>
	</mat-sidenav-content>
</mat-sidenav-container>