ROENROLL-1462 adds header 3-dot menu on mobile

src/app/app.component.html

-<header>
-	<cse-header></cse-header>
-	<cse-navigation></cse-navigation>
+<header ngClass.sm="hide-navigation-bar" ngClass.xs="hide-navigation-bar">
+  <cse-header></cse-header>
+  <cse-navigation></cse-navigation>
 </header>
 <main>
-	<router-outlet></router-outlet>
-</main>
+  <router-outlet></router-outlet>
+</main>
\ No newline at end of file

src/app/app.component.scss

@@ -8,6 +8,14 @@ header {
   left: 0;
   width: 100%;
   height: 112px;
+
+  &.hide-navigation-bar {
+    height: 64px;
+
+    & + main {
+      top: 64px;
+    }
+  }
 }
 
 main {

src/app/core/header/header.component.html

 <myuw-app-bar
-    theme-name=""
-    app-name="Course Search & Enroll"
-	app-url="https://my.wisc.edu">
+  theme-name=""
+  app-name="Course Search & Enroll"
+  app-url="https://my.wisc.edu">
 
-	<myuw-drawer slot="myuw-navigation" fxShow fxHide.gt-sm>
-		<myuw-drawer-link
-			slot="myuw-drawer-links"
-			name="Course Search"
-			icon=""
-			href="/search">
-			</myuw-drawer-link>
-			<myuw-drawer-link
-			slot="myuw-drawer-links"
-			name="Scheduler"
-			icon=""
-			href="/scheduler">
-			</myuw-drawer-link>
-			<myuw-drawer-link
-			slot="myuw-drawer-links"
-			name="Enrollment"
-			icon=""
-			href="/enrollment">
-			</myuw-drawer-link>
-			<myuw-drawer-link
-			slot="myuw-drawer-links"
-			name="Degree Planner"
-			icon=""
-			href="/degree-planner">
-		</myuw-drawer-link>
-	</myuw-drawer>
+  <myuw-drawer slot="myuw-navigation" fxShow fxHide.gt-sm>
+    <myuw-drawer-link
+      slot="myuw-drawer-links"
+      name="Course Search"
+      icon=""
+      href="/search">
+    </myuw-drawer-link>
+    <myuw-drawer-link
+      slot="myuw-drawer-links"
+      name="Scheduler"
+      icon=""
+      href="/scheduler">
+    </myuw-drawer-link>
+    <myuw-drawer-link
+      slot="myuw-drawer-links"
+      name="Enrollment"
+      icon=""
+      href="/enrollment">
+    </myuw-drawer-link>
+    <myuw-drawer-link
+      slot="myuw-drawer-links"
+      name="Degree Planner"
+      icon=""
+      href="/degree-planner">
+    </myuw-drawer-link>
+  </myuw-drawer>
 
-	<myuw-help
-		slot="myuw-help"
-		myuw-help-title="Need more help?"
-		show-button
-		show-default-content>
-	</myuw-help>
-	
-	<myuw-profile
-		slot="myuw-profile"
-		session-endpoint=""
-		login-url=""
-		logout-url="http://login.wisc.edu/logout"
-		background-color="#9B0000">
-	</myuw-profile>
+  <myuw-help
+    slot="myuw-help"
+    myuw-help-title="Need more help?"
+    show-button
+    show-default-content>
+  </myuw-help>
 
-</myuw-app-bar>
+  <div
\ No newline at end of file
+    slot="myuw-profile"
+    id="profile-and-menu-wrapper"
+    ngClass.sm="show-three-dot-menu"
+    ngClass.xs="show-three-dot-menu">
+
+    <myuw-profile
+      slot="myuw-profile"
+      session-endpoint=""
+      login-url=""
+      logout-url="http://login.wisc.edu/logout"
+      background-color="#9B0000">
+    </myuw-profile>
+
+    <button id="myuw-three-dot" mat-icon-button [matMenuTriggerFor]="mobileActionMenu">
+      <mat-icon>more_horiz</mat-icon>
+    </button>
+
+  </div>
+</myuw-app-bar>
+
+<mat-menu #mobileActionMenu="matMenu">
+  <button mat-menu-item (click)="printPlan()">Print degree plan</button>
+  <button mat-menu-item (click)="downloadPdf()">Download PDF</button>
+  <button mat-menu-item (click)="addPlan()">Add degree plan</button>
+  <button mat-menu-item (click)="addYear()">Add academic year</button>
+</mat-menu>

src/app/core/header/header.component.scss

+#profile-and-menu-wrapper {
+  width: 54px;
+  height: 42px;
+  margin: 11px 0;
+  display: block;
+  position: relative;
+
+  &.show-three-dot-menu {
+    width: 54px * 2;
+
+    button#myuw-three-dot {
+      display: block;
+    }
+  }
+}
+
+myuw-profile {
+  width: 54px;
+  height: 42px;
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+button#myuw-three-dot {
+  width: 34px;
+  height: 34px;
+  margin: 4px 10px;
+  display: none;
+  position: absolute;
+  left: 54px;
+  top: 0;
+  line-height: 28px;
+  background: rgb(142, 26, 17);
+}

src/app/core/header/header.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { DegreePlannerState } from '@app/degree-planner/store/state';
+import { MatDialog, MatSnackBar } from '@angular/material';
+import { PromptDialogComponent } from '@app/shared/dialogs/prompt-dialog/prompt-dialog.component';
+import { CreatePlan } from '@app/degree-planner/store/actions/plan.actions';
+import { AddAcademicYearRequest } from '@app/degree-planner/store/actions/addAcademicYear.actions';
 
 @Component({
-	selector: 'cse-header',
-	templateUrl: './header.component.html',
-	styleUrls: ['./header.component.scss']
+  selector: 'cse-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss'],
 })
-export class HeaderComponent implements OnInit {
+export class HeaderComponent {
+  constructor(
+    private store: Store<DegreePlannerState>,
+    private dialog: MatDialog,
+    private snackBar: MatSnackBar,
+  ) {}
 
-	constructor() { }
+  public printPlan() {
+    window.print();
+  }
 
-	ngOnInit() {
-	}
+  public downloadPdf() {
+    // FIXME
+    this.snackBar.open('Not supported yet');
+  }
 
+  public addPlan() {
+    this.dialog
+      .open(PromptDialogComponent, {
+        data: {
+          title: 'Add degree plan',
+          confirmText: 'Save',
+          inputName: 'i.e. Psychology',
+        },
+      })
+      .afterClosed()
+      .subscribe((result: { confirmed: boolean; value: string }) => {
+        const { confirmed, value } = result;
+        if (confirmed) {
+          const action = new CreatePlan({ name: value, primary: false });
+          this.store.dispatch(action);
+        }
+      });
+  }
+
+  public addYear() {
+    this.store.dispatch(new AddAcademicYearRequest());
+    this.snackBar.open('New academic year has been created');
+  }
 }

src/app/core/navigation/navigation.component.html

 <nav mat-tab-nav-bar fxHide fxShow.gt-sm>
-	<a mat-tab-link href="/search" routerLinkActive="active">Search</a>
-	<a mat-tab-link href="/my-courses" routerLinkActive="active">My courses</a>
-	<a mat-tab-link href="/scheduler" routerLinkActive="active">Scheduler</a>
-	<a mat-tab-link routerLink="/degree-planner" routerLinkActive="active" >Degree Planner</a>
-	<a mat-tab-link href="/scheduler" routerLinkActive="active">Degree Audit (DARS)</a>
+  <a mat-tab-link href="/search" routerLinkActive="active">Search</a>
+  <a mat-tab-link href="/my-courses" routerLinkActive="active">My courses</a>
+  <a mat-tab-link href="/scheduler" routerLinkActive="active">Scheduler</a>
+  <a mat-tab-link routerLink="/degree-planner" routerLinkActive="active" >Degree Planner</a>
+  <a mat-tab-link href="/scheduler" routerLinkActive="active">Degree Audit (DARS)</a>
 </nav>
-
-

src/app/degree-planner/degree-planner.component.html

@@ -21,7 +21,7 @@
       mode="indeterminate"
       *ngIf="(isLoadingPlan$ | async)"
     ></mat-progress-bar>
-    <mat-sidenav-container id="plans-container">
+    <mat-sidenav-container id="plans-container" ngClass.sm="hide-navigation-bar" ngClass.xs="hide-navigation-bar">
       <!-- Menu side nav -->
       <mat-sidenav
         #rightMenu

src/app/degree-planner/degree-planner.component.scss

 #plans-container {
   height: calc(100vh - 112px);
+
+  &.hide-navigation-bar {
+    height: calc(100vh - 64px);
+  }
 }
 
 mat-sidenav {

src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.ts

@@ -57,7 +57,6 @@ export class SidenavMenuItemComponent implements OnDestroy {
     this.dialog
       .open(PromptDialogComponent, {
         data: {
-          initialValue: name,
           title: 'Add degree plan',
           confirmText: 'Save',
           inputName: 'i.e. Psychology',