From b1cb88ddbc4994454c47e4464daf5356663ea39d Mon Sep 17 00:00:00 2001
From: Fred <fred.justine@hotmail.fr>
Date: Wed, 31 Mar 2021 22:34:33 +0200
Subject: [PATCH] =?UTF-8?q?menu=20hamburger=20avec=20redirection=20vers=20?=
=?UTF-8?q?profil=20ou=20d=C3=A9connexion?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/app/profile/profile.component.html | 2 --
.../components/topbar/topbar.component.css | 33 +++++++++++++++++++
.../components/topbar/topbar.component.html | 26 +++++++++++++--
.../components/topbar/topbar.component.ts | 12 +++++++
src/app/share/modules/material.module.ts | 2 ++
src/app/share/store/effects/auth.effects.ts | 2 +-
6 files changed, 71 insertions(+), 6 deletions(-)
diff --git a/src/app/profile/profile.component.html b/src/app/profile/profile.component.html
index 6ea1bd3a..8931777b 100644
--- a/src/app/profile/profile.component.html
+++ b/src/app/profile/profile.component.html
@@ -1,8 +1,6 @@
-<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
diff --git a/src/app/share/components/topbar/topbar.component.css b/src/app/share/components/topbar/topbar.component.css
index 1376150f..3b7aacdb 100644
--- a/src/app/share/components/topbar/topbar.component.css
+++ b/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
diff --git a/src/app/share/components/topbar/topbar.component.html b/src/app/share/components/topbar/topbar.component.html
index 8ab70b50..0e858e7f 100644
--- a/src/app/share/components/topbar/topbar.component.html
+++ b/src/app/share/components/topbar/topbar.component.html
@@ -1,11 +1,31 @@
<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
diff --git a/src/app/share/components/topbar/topbar.component.ts b/src/app/share/components/topbar/topbar.component.ts
index 65090091..c7bd968b 100644
--- a/src/app/share/components/topbar/topbar.component.ts
+++ b/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;
+ }
}
diff --git a/src/app/share/modules/material.module.ts b/src/app/share/modules/material.module.ts
index 47953888..371849e7 100644
--- a/src/app/share/modules/material.module.ts
+++ b/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({
diff --git a/src/app/share/store/effects/auth.effects.ts b/src/app/share/store/effects/auth.effects.ts
index 90b9043c..b9e5f84a 100644
--- a/src/app/share/store/effects/auth.effects.ts
+++ b/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']);
})
)
--
GitLab