Ajout des sources
This commit is contained in:
Julien Gautier
+140
@@ -0,0 +1,140 @@
|
||||
|
||||
<mat-toolbar color="primary" class="topbar">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<span>
|
||||
<img src="assets/images/logo-light-icon.svg" alt="homepage" class="light-logo">
|
||||
</span>
|
||||
<span>
|
||||
<img src="assets/images/logo-light-text.svg" alt="homepage" class="light-logo">
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<button mat-icon-button (click)="snav.toggle()" value="sidebarclosed">
|
||||
<mat-icon fontIcon="menu"></mat-icon>
|
||||
</button>
|
||||
<span class="flex-spacer"></span>
|
||||
<span *appShowAuthed="true" class="fw-light me-1">@{{ currentUser.username }}</span>
|
||||
<div *appShowAuthed="true" class="position-relative">
|
||||
<button [matMenuTriggerFor]="profile" mat-icon-button>
|
||||
<img [src]="currentUser.image" alt="user" class="profile-pic">
|
||||
</button>
|
||||
<mat-menu #profile="matMenu">
|
||||
<button mat-menu-item [routerLink]="['/profile', currentUser.username]" routerLinkActive="active">
|
||||
<mat-icon fontIcon="account_circle" color="primary"></mat-icon> Mon compte
|
||||
</button>
|
||||
<button mat-menu-item routerLink="/settings" routerLinkActive="active">
|
||||
<mat-icon fontIcon="settings" color="primary"></mat-icon> Paramètres
|
||||
</button>
|
||||
<button mat-menu-item (click)="goToGitHub()">
|
||||
<mat-icon fontIcon="code" color="primary"></mat-icon> GitHub
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon fontIcon="notifications_off" color="primary"></mat-icon> Désactiver les notifications
|
||||
</button>
|
||||
<hr class="my-0" />
|
||||
<button mat-menu-item (click)="logout()">
|
||||
<mat-icon fontIcon="logout" color="warn"></mat-icon> Se déconnecter
|
||||
</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
<span *appShowAuthed="false">
|
||||
<button mat-button routerLink="/login" routerLinkActive="active">Se connecter</button>
|
||||
<button mat-button routerLink="/register" routerLinkActive="active">Créer un compte</button>
|
||||
</span>
|
||||
</mat-toolbar>
|
||||
<mat-sidenav-container class="app-sidenav-container" [style.marginTop.px]="mobileQuery.matches ? 0 : 0">
|
||||
<mat-sidenav #snav id="snav" class="dark-sidebar pl-xs" [mode]="mobileQuery.matches ? 'side' : 'over'" fixedTopGap="0" [opened]="mobileQuery.matches" [disableClose]="mobileQuery.matches" >
|
||||
<div *appShowAuthed="true">
|
||||
<div class="user-profile" style="background-image: url('{{ currentUser.bg_image }}');">
|
||||
<div class="profile-img"> <img [src]="currentUser.image" alt="user"> </div>
|
||||
<div class="profile-text">
|
||||
<a [matMenuTriggerFor]="sdprofile"> {{ currentUser.firstname }} {{ currentUser.lastname }} <mat-icon fontIcon="expand_more" class="ms-5"></mat-icon></a>
|
||||
</div>
|
||||
<mat-menu #sdprofile="matMenu">
|
||||
<button mat-menu-item [routerLink]="['/profile', currentUser.username]" routerLinkActive="active">
|
||||
<mat-icon fontIcon="account_box" color="primary"></mat-icon> Mon compte
|
||||
</button>
|
||||
<button mat-menu-item routerLink="/settings" routerLinkActive="active">
|
||||
<mat-icon fontIcon="settings" color="primary"></mat-icon> Paramètres
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon fontIcon="notifications_off" color="primary"></mat-icon> Désactiver les notifications
|
||||
</button>
|
||||
<hr class="my-0" />
|
||||
<button mat-menu-item (click)="logout()">
|
||||
<mat-icon fontIcon="exit_to_app" color="warn"></mat-icon> Se déconnecter
|
||||
</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
<mat-nav-list appAccordion>
|
||||
<mat-list-item appAccordionLink *ngFor="let menuitem of menuItems.getMenuItems()" routerLinkActive="selected" group="{{menuitem.state}}">
|
||||
<a appAccordionToggle [routerLink]="['/', menuitem.state]" *ngIf="menuitem.type === 'link'">
|
||||
<mat-icon [fontIcon]="menuitem.icon" class="mt-0 mr-2"></mat-icon>
|
||||
<span>{{ menuitem.name }}</span>
|
||||
<span class="flex-spacer"></span>
|
||||
<span matBadge="{{ badge.value }}" matBadgeColor="warn" matBadgeOverlap="false" *ngFor="let badge of menuitem.badge"></span>
|
||||
</a>
|
||||
<a (click)="showQCMMenu = !showQCMMenu" *ngIf="menuitem.type === 'menu'">
|
||||
<mat-icon [fontIcon]="menuitem.icon" class="mt-0 mr-2"></mat-icon>
|
||||
<span>{{ menuitem.name }}</span>
|
||||
<span class="flex-spacer"></span>
|
||||
<span matBadge="{{ badge.value }}" matBadgeColor="warn" matBadgeOverlap="false" *ngFor="let badge of menuitem.badge"></span>
|
||||
</a>
|
||||
</mat-list-item>
|
||||
<div *ngIf="showQCMMenu">
|
||||
<mat-list-item appAccordionLink *ngFor="let menuqcm of menuItems.getMenuQCM()" routerLinkActive="selected" group="{{ menuqcm.state}}">
|
||||
<a class="ps-4" appAccordionToggle [routerLink]="['/', menuqcm.state]" *ngIf=" menuqcm.type === 'link'">
|
||||
<mat-icon [fontIcon]="menuqcm.icon" class="mt-0 mr-2"></mat-icon>
|
||||
<span>{{ menuqcm.name }}</span>
|
||||
<span class="flex-spacer"></span>
|
||||
</a>
|
||||
</mat-list-item>
|
||||
</div>
|
||||
</mat-nav-list>
|
||||
</div>
|
||||
<div *appShowAuthed="false">
|
||||
<div class="user-profile">
|
||||
<!-- <div class="profile-img"> <img src="/assets/images/users/user.jpg" alt="user"> </div> -->
|
||||
</div>
|
||||
<mat-nav-list appAccordion>
|
||||
<mat-list-item appAccordionLink *ngFor="let menuitem of menuItems.getMenuAuth()" routerLinkActive="selected" group="{{menuitem.state}}">
|
||||
<a appAccordionToggle [routerLink]="['/', menuitem.state]" *ngIf="menuitem.type === 'link'">
|
||||
<mat-icon [fontIcon]="menuitem.icon" class="mt-0 mr-2"></mat-icon>
|
||||
<span>{{ menuitem.name }}</span>
|
||||
<span class="flex-spacer"></span>
|
||||
<span matBadge="{{ badge.value }}" matBadgeColor="warn" matBadgeOverlap="false" *ngFor="let badge of menuitem.badge"></span>
|
||||
</a>
|
||||
<a (click)="showQCMMenu = !showQCMMenu" *ngIf="menuitem.type === 'menu'">
|
||||
<mat-icon [fontIcon]="menuitem.icon" class="mt-0 mr-2"></mat-icon>
|
||||
<span>{{ menuitem.name }}</span>
|
||||
<span class="flex-spacer"></span>
|
||||
<span matBadge="{{ badge.value }}" matBadgeColor="warn" matBadgeOverlap="false" *ngFor="let badge of menuitem.badge"></span>
|
||||
</a>
|
||||
</mat-list-item>
|
||||
<div *ngIf="showQCMMenu">
|
||||
<mat-list-item appAccordionLink *ngFor="let menuqcm of menuItems.getMenuQCM()" routerLinkActive="selected" group="{{ menuqcm.state}}">
|
||||
<a class="ps-4" appAccordionToggle [routerLink]="['/', menuqcm.state]" *ngIf=" menuqcm.type === 'link'">
|
||||
<mat-icon [fontIcon]="menuqcm.icon" class="mt-0 mr-2"></mat-icon>
|
||||
<span>{{ menuqcm.name }}</span>
|
||||
<span class="flex-spacer"></span>
|
||||
</a>
|
||||
</mat-list-item>
|
||||
</div>
|
||||
</mat-nav-list>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="container-fluid text-end">
|
||||
<a class="me-1" [href]="siteLink" target="_blank">{{ author }}</a>
|
||||
<span class="copyright">
|
||||
© {{ today | date: 'yyyy' }}
|
||||
</span>
|
||||
</div>
|
||||
</footer>
|
||||
</mat-sidenav>
|
||||
<mat-sidenav-content class="page-wrapper">
|
||||
<div class="page-content">
|
||||
<router-outlet><huapp-spinner></huapp-spinner></router-outlet>
|
||||
</div>
|
||||
</mat-sidenav-content>
|
||||
</mat-sidenav-container>
|
||||
+78
@@ -0,0 +1,78 @@
|
||||
import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Router, RouterOutlet, RouterLink, RouterModule } from '@angular/router';
|
||||
import { MediaMatcher } from '@angular/cdk/layout';
|
||||
import { MatBadgeModule } from '@angular/material/badge';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatListModule } from '@angular/material/list';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { MatToolbarModule } from '@angular/material/toolbar';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { Observable, Subscription } from 'rxjs';
|
||||
|
||||
|
||||
import { User } from 'src/app/core/models';
|
||||
import { UserService } from 'src/app/core/services';
|
||||
import { MenuItems, ShowAuthedDirective, SpinnerComponent, AccordionAnchorDirective, AccordionLinkDirective, AccordionDirective } from 'src/app/components/shared';
|
||||
|
||||
|
||||
/** @title Responsive sidenav */
|
||||
@Component({
|
||||
selector: 'huapp-full-layout',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule, RouterModule, RouterOutlet,
|
||||
MatBadgeModule, MatButtonModule, MatIconModule, MatListModule, MatMenuModule, MatSidenavModule, MatToolbarModule,
|
||||
ShowAuthedDirective, SpinnerComponent,
|
||||
AccordionAnchorDirective, AccordionLinkDirective, AccordionDirective
|
||||
],
|
||||
providers: [ MenuItems ],
|
||||
templateUrl: 'full.component.html',
|
||||
styleUrls: []
|
||||
})
|
||||
export class FullComponent implements OnInit, OnDestroy {
|
||||
private _currentUser: Subscription = new Subscription();
|
||||
private _mobileQueryListener: () => void;
|
||||
mobileQuery: MediaQueryList;
|
||||
currentUser: User = {} as User;
|
||||
showQCMMenu = false;
|
||||
today: number = Date.now();
|
||||
siteLink = 'https://www.rampeur.com';
|
||||
author = 'Solide Apps';
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private userService: UserService,
|
||||
changeDetectorRef: ChangeDetectorRef,
|
||||
media: MediaMatcher,
|
||||
public menuItems: MenuItems
|
||||
) {
|
||||
this.mobileQuery = media.matchMedia('(min-width: 768px)');
|
||||
this._mobileQueryListener = () => changeDetectorRef.detectChanges();
|
||||
this.mobileQuery.addListener(this._mobileQueryListener);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
const user$: Observable<User> = this.userService.currentUser;
|
||||
this._currentUser = user$.subscribe(
|
||||
(userData) => {
|
||||
this.currentUser = userData;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this._currentUser.unsubscribe();
|
||||
this.mobileQuery.removeListener(this._mobileQueryListener);
|
||||
}
|
||||
|
||||
goToGitHub() {
|
||||
window.open('https://github.com/rampeur', '_blank');
|
||||
}
|
||||
|
||||
logout() {
|
||||
this.userService.purgeAuth();
|
||||
this.router.navigateByUrl('/login');
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user