menu hamburger avec redirection vers profil ou déconnexion

src/app/profile/profile.component.html

-<p>profile works!</p>
 <p *ngIf="(currentUser$ | async) as user">
 	{{ user.email }} - {{ user.pseudo }}
 </p>
 <p>
 	<button mat-raised-button routerLink="/bars" color="primary">Liste des bars</button>
-	<button mat-raised-button routerLink="/photos" color="accent">photos</button>
 </p>
\ No newline at end of file

src/app/share/components/topbar/topbar.component.css

@@ -4,4 +4,37 @@ input {
 	font-size: 14px;
 	border-radius: 3px;
 	border: 0;
+}
+
+.menu-button {
+	margin-right: 24px;
+	min-width: 0;
+	padding: 0;
+	line-height: normal;
+}
+
+.profile-pic {
+	height: 60px;
+	width: 60px;
+}
+
+.sidenav-container {
+    flex: 1;  
+}
+
+.sidenav {
+	min-width: 240px;
+	
+}
+
+a {
+	display: block;
+	padding: 6px 24px;
+	width: 100%;
+	text-align: left;
+}
+
+main {
+	padding: 18px 24px;
+	height: 100%;
 }
\ No newline at end of file

src/app/share/components/topbar/topbar.component.html

 <mat-toolbar *ngIf="isLoggedIn$ | async" color="primary" fxLayoutGap="15px">
-	<span routerLink="/welcome">Mon logo</span>
+	<button mat-button class="menu-button" (click)="sidenav.toggle()">
+		<mat-icon>{{ isMenuOpen ? 'menu_open' : 'menu' }}</mat-icon>
+	</button>
+
+	<span *ngIf="(currentUser$ | async) as user">
+		{{ user.pseudo }}
+	</span>
+
+	<img class="profile-pic" src="https://fakeimg.pl/300/" alt="fake-img">
+
 	<!-- <span *ngIf="!(isLoggedIn$ | async)" fxLayoutGap="15px" fxLayout="row" fxLayoutAlign="center center">
 		<mat-icon class="link" routerLink="/signin">login</mat-icon>
 		<mat-icon class="link" routerLink="/signup">launch</mat-icon>
-	</span>
+	</span> 
 	<span *ngIf="isLoggedIn$ | async" fxLayoutGap="15px" fxLayout="row" fxLayoutAlign="center center">
 		<mat-icon class="link" routerLink="/profile">account_circle</mat-icon>
 		<mat-icon class="link" routerLink="/" (click)="onLogout()">power_settings_new</mat-icon>
 	</span> -->
-</mat-toolbar>
\ No newline at end of file
+</mat-toolbar>
+<mat-sidenav-container class="sidenav-container">
+	<mat-sidenav #sidenav autoFocus="false" mode="over" [(opened)]="isMenuOpen" class="sidenav" (click)="onSidenavClick()">
+		<a mat-button routerLink="/profile">Profil</a>
+		<a mat-button (click)="onLogout()">Déconnexion</a>
+	</mat-sidenav>
+	<mat-sidenav-content>
+		<main>
+			<router-outlet></router-outlet>
+		</main>
+	</mat-sidenav-content>
+</mat-sidenav-container>
\ No newline at end of file

src/app/share/components/topbar/topbar.component.ts

@@ -6,6 +6,9 @@ import { State } from '../../store';
 import { Logout } from '../../store/actions/auth.actions';
 import { isLoggedInAuthSelector } from '../../store/selectors/auth.selectors';
 import { FetchPhotos, SetFilter } from 'src/app/photos/shared/store/photos.actions';
+import { TryFetchCurrentUser } from '../../store/actions/auth.actions';
+import { userAuthSelector } from '../../store/selectors/auth.selectors';
+import { User } from '../../models/user.model';
 
 @Component({
   selector: 'app-topbar',
@@ -14,6 +17,9 @@ import { FetchPhotos, SetFilter } from 'src/app/photos/shared/store/photos.actio
 })
 export class TopbarComponent implements OnInit {
 	public isLoggedIn$: Observable<boolean>;
+	public isMenuOpen: boolean = false;
+
+	public currentUser$: Observable<User>;
 	
   constructor(
 		private store: Store<State>,
@@ -23,9 +29,15 @@ export class TopbarComponent implements OnInit {
 		this.isLoggedIn$ = this.store.pipe(
 			select(isLoggedInAuthSelector)
 		);
+		this.currentUser$ = this.store.pipe(select(userAuthSelector));
+		this.store.dispatch(new TryFetchCurrentUser());
 	}
 
 	public onLogout(): void {
 		this.store.dispatch(new Logout());
 	}
+
+	public onSidenavClick(): void {
+		this.isMenuOpen = false;
+	  }
 }

src/app/share/modules/material.module.ts

@@ -6,6 +6,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatSidenavModule} from '@angular/material/sidenav';
 
 const MODULES = [
 	MatToolbarModule,
@@ -15,6 +16,7 @@ const MODULES = [
 	MatCardModule,
 	MatIconModule,
 	MatCheckboxModule,
+	MatSidenavModule,
 ];
 
 @NgModule({

src/app/share/store/effects/auth.effects.ts

@@ -120,7 +120,7 @@ export class AuthEffects {
 				this.subscription.unsubscribe();
 			}
 			localStorage.removeItem('jwt');
-			this.router.navigate(['/']);
+			this.router.navigate(['/welcome']);
 		})
 	)