sidenav-menu-item.component.html

<div id="utilityMenu" fxLayout="column" fxLayout.sm="column">
  <mat-expansion-panel id="course-keys-container" expanded="true" role="group" aria-labelledby="course-key-list">
    <mat-expansion-panel-header>
      <mat-panel-title>
        <h3>Course key</h3>
      </mat-panel-title>
    </mat-expansion-panel-header>
    <mat-list id="course-key-list" role="list" aria-label="Course key List">
      <mat-list-item role="listitem">
        <i
          aria-hidden="true"
          class="material-icons in-progress-icon"
          alt="Course is in progress">
          check_circle
        </i>
        Course is in progress
      </mat-list-item>
      <mat-list-item role="listitem">
        <i
          aria-hidden="true"
          class="material-icons problem-icon"
          alt="Course is waitlisted">
          report_problem
        </i>
        Course is waitlisted
      </mat-list-item>
      <mat-list-item role="listitem">
        <i
          aria-hidden="true"
          class="material-icons error-icon"
          alt="Course is not offered in term">
          error
        </i>
        Course is not offered in term
      </mat-list-item>
      <mat-list-item>
        <i
          aria-hidden="true"
          class="material-icons not-offered-icon"
          alt="Course is no longer offered">
          not_interested
        </i>
        Course is no longer offered
      </mat-list-item>
    </mat-list>
  </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 aria-label="Utility menu items">
      <a mat-button class="sidenav-link-btn" target="_blank" href="/api/degreeplanpdf?roadmapId={{ planId }}&hideGrades={{ !(showGrades$ | async) }}">
        <i aria-hidden="true" class="material-icons" alt="create pdf">picture_as_pdf</i>
        Create PDF
      </a>
      <button mat-button aria-label="Add degree plan" class="sidenav-link-btn" (click)="onCreatePlanClick()">
        <i
          aria-hidden="true"
          class="material-icons"
          alt="Add degree plan">add_box</i>
        Add Degree Plan
      </button>
      <button mat-button aria-label="Add academic year" class="sidenav-link-btn" (click)="onAddAcademicYear()">
        <svg
          aria-labelledby="addAcademicYearTitle addAcademicYearDesc"
          role="img"
          alt="Add Academic Year"
          style="width:24px;height:24px"
          viewBox="0 0 24 24">
          <title id="addAcademicYearTitle">Add academic year</title>
          <desc id="addAcademicYearDesc">Add new academic year to your degree plan</desc>
          <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>
        &nbsp;&nbsp;Add Academic Year
      </button>
    </div>
  </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>
</div>