<div id="sidenav-container" fxLayout="column" fxLayout.sm="column">

	<mat-expansion-panel id="menu-items-container" expanded="true">
		<mat-expansion-panel-header>
			<mat-panel-title>
				<h3>Menu</h3>
			</mat-panel-title>
		</mat-expansion-panel-header>
		<div>
			<button mat-button class="sidenav-link-btn"><i class="material-icons">add_box</i> Add Degree Plan</button>
			<button mat-button class="sidenav-link-btn"><i class="material-icons">note_add </i>Add Note</button>
			<button mat-button class="sidenav-link-btn"><i class="material-icons">email</i> Share Plan</button>
			<button mat-button class="sidenav-link-btn"><i class="material-icons">print</i>Print</button>
			<button mat-button class="sidenav-link-btn"><i class="material-icons">settings</i> Plan Settings</button>
		</div>
	</mat-expansion-panel>

	<mat-expansion-panel id="course-keys-container" expanded="true">
		<mat-expansion-panel-header>
			<mat-panel-title>
				<h3>Course Key</h3>
			</mat-panel-title>
		</mat-expansion-panel-header>
		<ul id="course-key-list">
			<li><i class="material-icons complete-icon">check_circle</i> Course is complete</li>
			<li><i class="material-icons in-progress-icon">check_circle</i> Course is currently in progress</li>
			<li><i class="material-icons problem-icon">report_problem</i> Course is waitlisted</li>
			<li><i class="material-icons error-icon">error</i> Course is incomplete</li>
			<li><i class="material-icons help-icon">help</i> Course is likely to be offered based on course history</li>
			<li><i class="material-icons not-offered">remove</i>Course no longer offered</li>
			<li><i class="material-icons favorite-icon">favorite_border</i> Course is a favorite</li>
		</ul>
	</mat-expansion-panel>
	<mat-expansion-panel id="course-keys-container" expanded="true">
		<mat-expansion-panel-header>
			<mat-panel-title>
				<h3>Favorites</h3>
			</mat-panel-title>
		</mat-expansion-panel-header>
		<app-favorites-container></app-favorites-container>
	</mat-expansion-panel>
</div>