sidenav-menu-item.component.html

<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>
    <mat-list id="course-key-list" role="list">
      <mat-list-item role="listitem">
        <i
          class="material-icons in-progress-icon"
          alt="Course is in progress"
          matTooltip="Course is in progress"
          matTooltipPosition="left">
          check_circle
        </i>
        Course is in progress
      </mat-list-item>
      <mat-list-item role="listitem">
        <i
          class="material-icons problem-icon"
          alt="Course is waitlisted"
          matTooltip="Course is waitlisted"
          matTooltipPosition="left">
          report_problem
        </i>
        Course is waitlisted
      </mat-list-item>
      <mat-list-item role="listitem">
        <i
          class="material-icons cancel-icon"
          alt="Course is incomplete"
          matTooltip="Course is incomplete"
          matTooltipPosition="left">
          cancel
        </i>
        Course is incomplete
      </mat-list-item>
      <mat-list-item role="listitem">
        <i
          class="material-icons error-icon"
          alt="Course is not offered in term"
          matTooltip="Course is not offered in term"
          matTooltipPosition="left">
          error
        </i>
        Course is not offered in term
      </mat-list-item>
      <mat-list-item>
        <i
          class="material-icons not-offered-icon"
          alt="Course is no longer offered"
          matTooltip="Course is no longer offered"
          matTooltipPosition="left">
          strikethrough_s
        </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>
      <a mat-button class="sidenav-link-btn" target="_blank" href="/api/degreeplanpdf?roadmapId={{ planId }}">
        <i aria-hidden="true" class="material-icons" alt="create pdf" matTooltip="Create a PDF" matTooltipPosition="left">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"
          matTooltip="Add degree plan"
          matTooltipPosition="left"
          >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"
          matTooltip="Add academic year"
          matTooltipPosition="left"
          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>