Replacing menu

src/RunnersMeet.Client/src/app/app.module.ts

@@ -43,6 +43,7 @@ import { EventEditComponent } from './events/event-edit/event-edit.component';
 import { MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
 import { TrackPickerComponent } from './tracks/track-picker/track-picker.component';
 import { TrackPickerDialogComponent } from './tracks/track-picker-dialog/track-picker-dialog.component';
+import { MenubarModule } from 'primeng/menubar';
 
 @NgModule({
 	declarations: [
@@ -83,6 +84,7 @@ import { TrackPickerDialogComponent } from './tracks/track-picker-dialog/track-p
 		MatDatepickerModule,
 		MatNativeDateModule,
 		MatDialogModule,
+		MenubarModule,
 	],
 	providers: [
 		ConfigService,

src/RunnersMeet.Client/src/app/shell/main-menu/main-menu.component.html

@@ -1,25 +1,10 @@
-<mat-sidenav-container class="sidenav-container">
-	<mat-sidenav #drawer class="sidenav" fixedInViewport [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
-		[mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="(isHandset$ | async) === false">
-		<mat-toolbar>Menu</mat-toolbar>
-		<mat-nav-list>
-			<a mat-list-item [routerLink]="['/']">Home</a>
-			<a mat-list-item [routerLink]="['/tracks']">Tracks</a>
-			<a mat-list-item [routerLink]="['/tracks/edit/new']">Create Track</a>
-			<a mat-list-item [routerLink]="['/events']">Events</a>
-			<a mat-list-item href="#" (click)="logout()">Logout</a>
-		</mat-nav-list>
-	</mat-sidenav>
-	<mat-sidenav-content>
-		<mat-toolbar color="primary">
-			<button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()"
-				*ngIf="isHandset$ | async">
-				<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
-			</button>
-			<span>RunnersMeet</span>
-		</mat-toolbar>
-		<div class="main-content">
-			<ng-content></ng-content>
-		</div>
-	</mat-sidenav-content>
-</mat-sidenav-container>
+
+<p-menubar [model]="menuItems">
+    <ng-template pTemplate="start">
+        <!-- <img src="" height="40" class="mr-2"> -->
+    </ng-template>
+</p-menubar>
+
+<div class="main-content">
+	<ng-content></ng-content>
+</div>

src/RunnersMeet.Client/src/app/shell/main-menu/main-menu.component.ts

@@ -1,26 +1,49 @@
 import { Component } from '@angular/core';
-import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-import { Observable } from 'rxjs';
-import { map, shareReplay } from 'rxjs/operators';
 import { AuthService } from '@auth0/auth0-angular';
+import { MenuItem } from 'primeng/api';
 
 @Component({
 	selector: 'app-main-menu',
 	templateUrl: './main-menu.component.html',
-	styleUrls: ['./main-menu.component.scss']
+	styleUrls: ['./main-menu.component.scss'],
 })
 export class MainMenuComponent {
-
-	isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
-		.pipe(
-			map(result => result.matches),
-			shareReplay()
-		);
+	public menuItems: MenuItem[];
 
 	constructor(
-		private breakpointObserver: BreakpointObserver,
 		private readonly authService: AuthService,
-	) { }
+	) {
+		this.menuItems = [
+			{
+				label: 'Home',
+				routerLink: ['/']
+			},
+			{
+				label: 'Tracks',
+				items: [
+					{
+						label: 'Search',
+						routerLink: ['/tracks']
+					},
+					{
+						label: 'Create',
+						routerLink: ['/tracks/edit/new']
+					}
+				]
+			},
+			{
+				label: 'Events',
+				items: [{
+					label: 'Search',
+					routerLink: ['/events']
+				}],
+			},
+			{
+				label: 'Logout',
+				command: () => this.logout()
+			}
+		];
+	}
 
 	public logout(): void {
 		this.authService.logout({