first commit
This commit is contained in:
@@ -0,0 +1,64 @@
|
||||
.navbar-spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.navbar-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.navbar-is-mobile .navbar {
|
||||
position: fixed;
|
||||
/* Make sure the toolbar will stay on top of the content as it scrolls past. */
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.navbar-sidenav-container {
|
||||
/* When the sidenav is not fixed, stretch the sidenav container to fill the available space. This
|
||||
causes `<mat-sidenav-content>` to act as our scrolling element for desktop layouts. */
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.navbar-is-mobile .navbar-sidenav-container {
|
||||
/* When the sidenav is fixed, don't constrain the height of the sidenav container. This allows the
|
||||
`<body>` to be our scrolling element for mobile layouts. */
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
/*Set sidenav width*/
|
||||
|
||||
mat-sidenav {
|
||||
min-width: 180px !important;
|
||||
border-right: 1px solid #eee;
|
||||
box-shadow: 6px 0 6px rgba(0, 0, 0, .1);
|
||||
/* background-color:rgb(63, 81, 181); */
|
||||
}
|
||||
|
||||
/* Set height of wrapper to stop content from moving up & down */
|
||||
|
||||
.progress-bar-container {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
a.mat-list-item.active {
|
||||
background: rgba(0, 0, 0, .04);
|
||||
}
|
||||
|
||||
#push-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
<div class="navbar-container" [class.example-is-mobile]="mobileQuery.matches">
|
||||
|
||||
<!-- Top navbar -->
|
||||
<mat-toolbar class="navbar" color="primary">
|
||||
|
||||
<button mat-icon-button (click)="snav.toggle()">
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
|
||||
<a class="navbar-brand" [routerLink]="['/']" matTooltip="Home">
|
||||
<h1>
|
||||
Jucundus
|
||||
</h1>
|
||||
</a>
|
||||
|
||||
<span class="navbar-spacer"></span>
|
||||
|
||||
<button mat-icon-button [matMenuTriggerFor]="notificationMenu">
|
||||
<mat-icon matBadge="2" matBadgeColor="accent">notifications</mat-icon>
|
||||
</button>
|
||||
<mat-menu #notificationMenu="matMenu" xPosition="before" yPosition="above" [overlapTrigger]="false">
|
||||
|
||||
<a mat-menu-item>
|
||||
<span>You have new tasks</span>
|
||||
</a>
|
||||
<a mat-menu-item>
|
||||
<span>You have a new message</span>
|
||||
</a>
|
||||
|
||||
</mat-menu>
|
||||
|
||||
<button mat-button [matMenuTriggerFor]="userMenu">
|
||||
<mat-icon>person</mat-icon>
|
||||
<span fxShow fxHide.xs>
|
||||
{{userName}}
|
||||
</span>
|
||||
</button>
|
||||
<mat-menu #userMenu="matMenu" xPosition="before" yPosition="above" [overlapTrigger]="false">
|
||||
|
||||
<a mat-menu-item [routerLink]="['/account/profile']">
|
||||
<mat-icon>person</mat-icon>
|
||||
<span>Account</span>
|
||||
</a>
|
||||
|
||||
<a mat-menu-item [routerLink]="['/auth/login']">
|
||||
<mat-icon>exit_to_app</mat-icon>
|
||||
<span>Log out</span>
|
||||
</a>
|
||||
|
||||
</mat-menu>
|
||||
|
||||
</mat-toolbar>
|
||||
|
||||
<mat-sidenav-container class="navbar-sidenav-container">
|
||||
<!-- Side nav -->
|
||||
<mat-sidenav #snav [opened]="!mobileQuery.matches" [mode]="mobileQuery.matches ? 'over' : 'side'"
|
||||
[fixedInViewport]="mobileQuery.matches" fixedTopGap="56" class="sidenav">
|
||||
|
||||
<mat-nav-list>
|
||||
<h3 mat-subheader>Home</h3>
|
||||
|
||||
<a mat-list-item [routerLink]="['/dashboard']" routerLinkActive="active">
|
||||
<mat-icon matListItemIcon>
|
||||
dashboard
|
||||
</mat-icon>
|
||||
<p mat-line> Dashboard </p>
|
||||
</a>
|
||||
<a mat-list-item [routerLink]="['/sales']" routerLinkActive="active">
|
||||
<mat-icon matListItemIcon>
|
||||
today
|
||||
</mat-icon>
|
||||
<p mat-line> Sales </p>
|
||||
</a>
|
||||
<a mat-list-item [routerLink]="['/favorites']" routerLinkActive="active">
|
||||
<mat-icon matListItemIcon>
|
||||
bookmark
|
||||
</mat-icon>
|
||||
<p mat-line> Favorites </p>
|
||||
</a>
|
||||
<a mat-list-item [routerLink]="['/pictures']" routerLinkActive="active">
|
||||
<mat-icon matListItemIcon>
|
||||
image
|
||||
</mat-icon>
|
||||
<p mat-line> Pictures </p>
|
||||
</a>
|
||||
|
||||
|
||||
<!-- <a mat-list-item [routerLink]="['/customers']" routerLinkActive="active">
|
||||
<mat-icon matListItemIcon>
|
||||
business
|
||||
</mat-icon>
|
||||
<p mat-line> Customers </p>
|
||||
</a>
|
||||
<a mat-list-item [routerLink]="['/users']" routerLinkActive="active">
|
||||
<mat-icon matListItemIcon>
|
||||
people
|
||||
</mat-icon>
|
||||
<p mat-line> Users </p>
|
||||
</a> -->
|
||||
|
||||
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
<h3 mat-subheader>User</h3>
|
||||
<a mat-list-item [routerLink]="['/account/profile']">
|
||||
<mat-icon matListItemIcon>person</mat-icon>
|
||||
<p mat-line> Account </p>
|
||||
</a>
|
||||
|
||||
<a mat-list-item [routerLink]="['/auth/login']">
|
||||
<mat-icon matListItemIcon>exit_to_app</mat-icon>
|
||||
<p mat-line> Log out </p>
|
||||
</a>
|
||||
|
||||
<a id="push-bottom" mat-list-item [routerLink]="['/about']" routerLinkActive="active">
|
||||
<mat-icon matListItemIcon>
|
||||
info_outline
|
||||
</mat-icon>
|
||||
<p mat-line> About </p>
|
||||
</a>
|
||||
</mat-nav-list>
|
||||
|
||||
</mat-sidenav>
|
||||
|
||||
<!-- Main content -->
|
||||
<mat-sidenav-content class="sidenav-content">
|
||||
|
||||
<div class="progress-bar-container">
|
||||
<mat-progress-bar color="accent" mode="indeterminate" *ngIf="spinnerService.visibility | async">
|
||||
</mat-progress-bar>
|
||||
<!-- <mat-spinner class="spinner" [diameter]="50" *ngIf="showSpinner"></mat-spinner> -->
|
||||
</div>
|
||||
|
||||
|
||||
<router-outlet></router-outlet>
|
||||
|
||||
</mat-sidenav-content>
|
||||
</mat-sidenav-container>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,59 @@
|
||||
import { Component, OnInit, ChangeDetectorRef, OnDestroy, AfterViewInit } from '@angular/core';
|
||||
import { MediaMatcher } from '@angular/cdk/layout';
|
||||
import { timer } from 'rxjs';
|
||||
import { Subscription } from 'rxjs';
|
||||
|
||||
import { AuthenticationService } from 'src/app/core/services/auth.service';
|
||||
import { SpinnerService } from '../../core/services/spinner.service';
|
||||
import { AuthGuard } from 'src/app/core/guards/auth.guard';
|
||||
|
||||
@Component({
|
||||
selector: 'app-layout',
|
||||
templateUrl: './layout.component.html',
|
||||
styleUrls: ['./layout.component.css']
|
||||
})
|
||||
export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit {
|
||||
|
||||
private _mobileQueryListener: () => void;
|
||||
mobileQuery: MediaQueryList;
|
||||
showSpinner: boolean = false;
|
||||
userName: string = "";
|
||||
isAdmin: boolean = false;
|
||||
|
||||
private autoLogoutSubscription: Subscription = new Subscription;
|
||||
|
||||
constructor(private changeDetectorRef: ChangeDetectorRef,
|
||||
private media: MediaMatcher,
|
||||
public spinnerService: SpinnerService,
|
||||
private authService: AuthenticationService,
|
||||
private authGuard: AuthGuard) {
|
||||
|
||||
this.mobileQuery = this.media.matchMedia('(max-width: 1000px)');
|
||||
this._mobileQueryListener = () => changeDetectorRef.detectChanges();
|
||||
// tslint:disable-next-line: deprecation
|
||||
this.mobileQuery.addListener(this._mobileQueryListener);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
const user = this.authService.getCurrentUser();
|
||||
|
||||
this.isAdmin = user.isAdmin;
|
||||
this.userName = user.fullName;
|
||||
|
||||
// Auto log-out subscription
|
||||
const timer$ = timer(2000, 5000);
|
||||
this.autoLogoutSubscription = timer$.subscribe(() => {
|
||||
this.authGuard.canActivate();
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
// tslint:disable-next-line: deprecation
|
||||
this.mobileQuery.removeListener(this._mobileQueryListener);
|
||||
this.autoLogoutSubscription.unsubscribe();
|
||||
}
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
this.changeDetectorRef.detectChanges();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user