<div id="sidenav-container" fxLayout="column" fxLayout.sm="column">
  <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 in-progress-icon"
          matTooltip="Course in progress"
          matTooltipPosition="left"
          >check_circle</i
        >
        Course is currently in progress
      </li>
      <li>
        <i
          class="material-icons problem-icon"
          matTooltip="Course is waitlisted"
          matTooltipPosition="left"
          >report_problem</i
        >
        Course is waitlisted
      </li>
      <li>
        <i
          class="material-icons error-icon"
          matTooltip="Course is incomplete"
          matTooltipPosition="left"
          >error</i
        >
        Course is incomplete
      </li>
    </ul>
  </mat-expansion-panel>
  <mat-expansion-panel id="course-keys-container" expanded="true">
    <mat-expansion-panel-header>
      <mat-panel-title>
        <h3>Saved for later</h3>
      </mat-panel-title>
    </mat-expansion-panel-header>
    <cse-saved-for-later-container></cse-saved-for-later-container>
  </mat-expansion-panel>

  <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" (click)="print()">
        <i class="material-icons">print</i> Print
      </button>
      <button mat-button class="sidenav-link-btn">
        <svg
          class="material-icons"
          style="width:24px;height:24px"
          viewBox="0 0 24 24"
        >
          <path fill="#0479a8" d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
        </svg>
        Download PDF
      </button>
      <button mat-button class="sidenav-link-btn" (click)="onCreatePlanClick()">
        <i class="material-icons">add_box</i> Add Degree Plan
      </button>
      <button mat-button class="sidenav-link-btn" (click)="onAddAcademicYear()">
        <svg
          class="material-icons"
          style="width:24px;height:24px"
          viewBox="0 0 24 24"
        >
          <path
            fill="#0479a8"
            d="M19,19V7H5V19H19M16,1H18V3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1M11,9H13V12H16V14H13V17H11V14H8V12H11V9Z"
          />
        </svg>
        Add Academic Year
      </button>
    </div>
  </mat-expansion-panel>
</div>