<mat-sidenav-container id="plans-container">
	<!-- Menu side nav -->
	<mat-sidenav #rightSideNav position="end" mode="side" [opened]="true" disableClose>
		<cse-sidenav-menu-item [favoriteDropZone]="getTermDropZone()" [subjectsMap]="subjectsMap"></cse-sidenav-menu-item>
	</mat-sidenav>

	<!-- Add course sidenav -->
	<mat-sidenav #leftSideNav position="start" mode="side" [opened]="false">
		<div>sidenav 2</div>
		<button mat-button class="btn-primary" (click)="leftSideNav2.toggle()">Three</button>
	</mat-sidenav>

	<mat-sidenav-content>
		<mat-sidenav-container hasBackdrop="false">
			<!-- Secondary side nav used after #leftSideNav is shown -->
			<mat-sidenav #leftSideNav2 position="start" mode="over" [opened]="false">
				<div>sidenav 3</div>
			</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" [value]="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)="rightSideNav.toggle()">
						<i *ngIf="rightSideNav.opened" class="material-icons">chevron_right</i>
						<i *ngIf="!rightSideNav.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()"
									[notes]="notes"
									[refreshNotes]="getAllNotes"
									[termsByAcademicYear]="termsByAcademicYear"
									[subjectsMap]="subjectsMap"
									fxFlex="33%"
								></cse-term-container>
							</div>
						</mat-expansion-panel>
					</mat-accordion>
				</div>
			</mat-sidenav-content>

		</mat-sidenav-container>
	</mat-sidenav-content>

</mat-sidenav-container>