<a class="show-on-focus" href="#maincontent">Skip to main content</a>
<a class="show-on-focus" href="#sidenav-container">Skip to utility menu</a>

<myuw-app-bar
  role="main"
  theme-name=""
  app-name="Course Search & Enroll"
  app-url="https://my.wisc.edu">
  <myuw-drawer slot="myuw-navigation" fxShow fxHide.gt-sm role="navigation" aria-label="Main Menu">
    <myuw-drawer-link
      slot="myuw-drawer-links"
      name="Course Search"
      icon=""
      aria-label="course search"
      href="/search">
    </myuw-drawer-link>
    <myuw-drawer-link
      slot="myuw-drawer-links"
      name="My Courses"
      icon=""
      aria-label="my courses"
      href="/my-courses">
    </myuw-drawer-link>
    <myuw-drawer-link
      slot="myuw-drawer-links"
      name="Scheduler"
      icon=""
      aria-label="scheduler"
      href="/scheduler">
    </myuw-drawer-link>
    <myuw-drawer-link
      slot="myuw-drawer-links"
      name="Degree Planner"
      icon=""
      aria-label="degree planner"
      href="/degree-planner">
    </myuw-drawer-link>
    <ng-container *ngIf="useNewDARSView; then linkToNewDARSView else linkToOldDARSView"></ng-container>
    <ng-template #linkToNewDARSView>
      <myuw-drawer-link
        slot="myuw-drawer-links"
        name="Degree Audit (DARS)"
        icon=""
        aria-label="degree audit"
        href="/degree-planner/dars">
      </myuw-drawer-link>
    </ng-template>
    <ng-template #linkToOldDARSView>
      <myuw-drawer-link
        slot="myuw-drawer-links"
        name="Degree Audit (DARS)"
        icon=""
        aria-label="degree audit"
        href="/dars">
      </myuw-drawer-link>
    </ng-template>
    <myuw-drawer-subheader
      slot="myuw-drawer-links"
      divider
      name="Profile">
    </myuw-drawer-subheader>
    <myuw-drawer-link
      slot="myuw-drawer-links"
      name="Logout"
      icon="person"
      aria-label="log out"
      href="http://login.wisc.edu/logout">
    </myuw-drawer-link>
  </myuw-drawer>

  <myuw-help
    slot="myuw-help"
    myuw-help-title="Need more help?"
    show-button
    alt="Help"
    matTooltip="Need help?"
    matTooltipPosition="below">
    <div slot="myuw-help-content">
      <div>
        <a aria-label="Recent changes" href="https://kb.wisc.edu/enrollment/page.php?id=86702"
          >Recent changes</a>
      </div>
      <div><a aria-label="Help" href="/help">Help</a></div>
    </div>
  </myuw-help>

  <div
    slot="myuw-profile"
    id="profile-and-menu-wrapper"
    ngClass.sm="show-sidenav-toggle-btn"
    ngClass.xs="show-sidenav-toggle-btn">
    <myuw-profile
      id="myuw-profile"
      slot="myuw-profile"
      alt="User profile"
      matTooltip="Profile"
      matTooltipPosition="below"
      session-endpoint=""
      login-url=""
      logout-url="http://login.wisc.edu/logout"
      background-color="#9B0000">
    </myuw-profile>

    <button
      *ngIf="isSidenavOpen$ | async; else closeButton"
      (click)="closeSidenav()"
      id="sidenav-toggle-btn"
      fxHide.gt-md="true"
      mat-icon-button
      aria-label="Close sidenav menu">
      <i
        class="material-icons"
        alt="Close sidenav"
        matTooltip="Close sidenav menu"
        matTooltipPosition="above">
        chevron_right
      </i>
    </button>

    <ng-template #closeButton>
      <button
        (click)="openSidenav()"
        id="sidenav-toggle-btn"
        fxHide.gt-md="true"
        mat-icon-button
        aria-label="Open sidenav menu">
        <i
          class="material-icons"
          alt="Open sidenav"
          matTooltip="Open sidenav menu"
          matTooltipPosition="above">
          chevron_left
        </i>
      </button>
    </ng-template>
  </div>
</myuw-app-bar>

<mat-menu #mobileActionMenu="matMenu">
  <a mat-menu-item target="_blank" href="/api/degreeplanpdf?roadmapId={{ activeRoadmapId$ | async }}">Download PDF</a>
  <button mat-menu-item (click)="addPlan()">Add degree plan</button>
  <button mat-menu-item (click)="addYear()">Add academic year</button>
</mat-menu>