ADDED Materialize theme
This commit is contained in:
Marek Lesko
35
theme/packages/authguard/src/app/app.component.spec.ts
Normal file
35
theme/packages/authguard/src/app/app.component.spec.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { RouterTestingModule } from '@angular/router/testing';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
describe('AppComponent', () => {
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [
|
||||
RouterTestingModule
|
||||
],
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
}).compileComponents();
|
||||
});
|
||||
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
it(`should have as title 'Angular20'`, () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app.title).toEqual('Angular20');
|
||||
});
|
||||
|
||||
it('should render title', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.nativeElement as HTMLElement;
|
||||
expect(compiled.querySelector('.content span')?.textContent).toContain('Angular20 app is running!');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,190 @@
|
||||
<mat-sidenav-container class="mainWrapper" autosize autoFocus [ngClass]="{
|
||||
'sidebarNav-mini': options.sidenavCollapsed && options.navPos !== 'top' && !resView,
|
||||
|
||||
'sidebarNav-horizontal': options.horizontal,
|
||||
cardBorder: options.cardBorder,
|
||||
|
||||
}" [dir]="options.dir!">
|
||||
<!-- ============================================================== -->
|
||||
<!-- Vertical Sidebar -->
|
||||
<!-- ============================================================== -->
|
||||
@if (!options.horizontal) {
|
||||
<mat-sidenav #leftsidenav [mode]="isOver ? 'over' : 'side'" [opened]="
|
||||
options.navPos === 'side' && options.sidenavOpened && !isOver && !resView
|
||||
" (openedChange)="onSidenavOpenedChange($event)" (closedStart)="onSidenavClosedStart()" class="sidebarNav">
|
||||
<div class="flex-layout">
|
||||
<app-sidebar (toggleMobileNav)="sidenav.toggle()" [showToggle]="isOver"></app-sidebar>
|
||||
<ng-scrollbar class="position-relative" style="height: 100%">
|
||||
<mat-nav-list class="sidebar-list">
|
||||
@for(item of navItems; track item) {
|
||||
<app-nav-item [item]="item" (notify)="sidenav.toggle()" class="top-parent">
|
||||
</app-nav-item>
|
||||
}
|
||||
</mat-nav-list>
|
||||
</ng-scrollbar>
|
||||
<div class="p-24 m-t-auto profile-bar">
|
||||
<div class="bg-light-secondary d-flex align-items-center rounded p-16">
|
||||
<img src="/assets/images/profile/user-1.jpg" class="rounded-circle" width="40" />
|
||||
<div class="m-l-16">
|
||||
<h4 class="f-w-600">Mathew</h4>
|
||||
<span class="f-s-12">Designer</span>
|
||||
</div>
|
||||
<div class="m-l-auto">
|
||||
<a mat-icon-button [routerLink]="['/authentication/login']" class="d-flex justify-content-center">
|
||||
<i-tabler name="power" class="text-primary icon-18 d-flex"></i-tabler>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-sidenav>
|
||||
}
|
||||
|
||||
<!-- ============================================================== -->
|
||||
<!-- horizontal Sidebar -->
|
||||
<!-- ============================================================== -->
|
||||
@if (resView) {
|
||||
<mat-sidenav #leftsidenav [mode]="'over'" [opened]="options.sidenavOpened && !isTablet"
|
||||
(openedChange)="onSidenavOpenedChange($event)" (closedStart)="onSidenavClosedStart()" class="sidebarNav">
|
||||
<app-sidebar> </app-sidebar>
|
||||
<ng-scrollbar class="position-relative" style="height: 100%">
|
||||
<mat-nav-list class="sidebar-list">
|
||||
@for(item of navItems; track item) {
|
||||
<app-nav-item [item]="item" (notify)="sidenav.toggle()"> </app-nav-item>
|
||||
}
|
||||
</mat-nav-list>
|
||||
</ng-scrollbar>
|
||||
<div class="p-24 m-t-auto profile-bar">
|
||||
<div class="bg-light-secondary d-flex align-items-center rounded p-16">
|
||||
<img src="/assets/images/profile/user-1.jpg" class="rounded-circle" width="40" />
|
||||
<div class="m-l-16">
|
||||
<h4 class="f-w-600">Mathew</h4>
|
||||
<span class="f-s-12">Designer</span>
|
||||
</div>
|
||||
<div class="m-l-auto">
|
||||
<a mat-icon-button [routerLink]="['/authentication/login']" class="d-flex justify-content-center">
|
||||
<i-tabler name="power" class="text-primary icon-18 d-flex"></i-tabler>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-sidenav>
|
||||
}
|
||||
|
||||
<!-- ============================================================== -->
|
||||
<!-- Main Content -->
|
||||
<!-- ============================================================== -->
|
||||
<mat-sidenav-content class="contentWrapper" #content>
|
||||
<!-- ============================================================== -->
|
||||
<!-- VerticalHeader -->
|
||||
<!-- ============================================================== -->
|
||||
@if (!options.horizontal) {
|
||||
<app-header [showToggle]="!isOver" (toggleCollapsed)="toggleCollapsed()" (toggleMobileNav)="sidenav.toggle()"
|
||||
(toggleMobileFilterNav)="toggleFilterNav()" (optionsChange)="receiveOptions($event)"></app-header>
|
||||
} @else {
|
||||
<!-- horizontal header -->
|
||||
<app-horizontal-header (toggleMobileNav)="sidenav.toggle()" (toggleMobileFilterNav)="toggleFilterNav()"
|
||||
(optionsChange)="receiveOptions($event)"></app-horizontal-header>
|
||||
} @if(options.horizontal) {
|
||||
<app-horizontal-sidebar></app-horizontal-sidebar>
|
||||
}
|
||||
|
||||
<main class="pageWrapper" [ngClass]="{
|
||||
maxWidth: options.boxed
|
||||
}">
|
||||
<app-breadcrumb></app-breadcrumb>
|
||||
<!-- ============================================================== -->
|
||||
<!-- Outlet -->
|
||||
<!-- ============================================================== -->
|
||||
<router-outlet></router-outlet>
|
||||
<div class="customizerBtn">
|
||||
<button mat-fab class="bg-primary text-white" (click)="customizerRight.toggle()">
|
||||
<mat-icon>settings</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- ------------------------------------------------------------------
|
||||
Mobile Apps Sidebar
|
||||
------------------------------------------------------------------ -->
|
||||
<div [class.open]="isFilterNavOpen" class="filter-sidebar">
|
||||
<div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="branding">
|
||||
@if(options.theme === 'light') {
|
||||
<a href="/">
|
||||
<img src="./assets/images/logos/dark-logo.svg" class="align-middle m-2" alt="logo" />
|
||||
</a>
|
||||
} @else {
|
||||
<a href="/">
|
||||
<img src="./assets/images/logos/light-logo.svg" class="align-middle m-2" alt="logo" />
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
<button mat-icon-button (click)="isFilterNavOpen = !isFilterNavOpen" class="d-flex justify-content-center">
|
||||
<i-tabler name="x" class="icon-18 d-flex"></i-tabler>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<mat-accordion>
|
||||
<mat-expansion-panel class="shadow-none">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title class="f-s-16 f-w-500"> Apps </mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<div>
|
||||
<div class="row">
|
||||
@for(appdd of apps; track appdd.img) {
|
||||
<div class="col-12 text-hover-primary">
|
||||
<a [routerLink]="[appdd.link]" class="d-flex align-items-center text-decoration-none m-b-24 gap-16">
|
||||
<button mat-mini-fab class="text-primary bg-light-primary shadow-none rounded">
|
||||
<img [src]="appdd.img" width="20" />
|
||||
</button>
|
||||
|
||||
<div>
|
||||
<h5 class="f-s-14 f-w-600 m-0 textprimary f-s-14 hover-text">
|
||||
{{ appdd.title }}
|
||||
</h5>
|
||||
<span class="f-s-14 f-s-12">{{ appdd.subtitle }}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<h4 class="f-s-18 f-w-600 m-b-16">Quick Links</h4>
|
||||
@for(quicklink of quicklinks; track quicklink.title) {
|
||||
<div class="text-hover-primary">
|
||||
<a [routerLink]="['quicklink.link']"
|
||||
class="hover-text text-decoration-none f-s-14 f-w-600 d-block p-y-8">{{ quicklink.title }}</a>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
|
||||
<div class="p-x-16">
|
||||
<a [routerLink]="['/']" class="d-flex align-items-center text-decoration-none f-s-14 p-y-16 gap-8">
|
||||
<span class="f-s-15 f-w-500 m-l-8">Calendar</span>
|
||||
</a>
|
||||
<a [routerLink]="['/']" class="d-flex align-items-center text-decoration-none f-s-14 p-y-16">
|
||||
<span class="f-s-15 f-w-500 m-l-8">Chat</span>
|
||||
</a>
|
||||
<a [routerLink]="['/']" class="d-flex align-items-center text-decoration-none f-s-14 p-y-16 gap-8">
|
||||
<span class="f-s-15 f-w-500 m-l-8">Email</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-sidenav-content>
|
||||
|
||||
<mat-sidenav #customizerRight mode="over" position="end" class="customizerNav">
|
||||
<div class="p-x-16 p-y-20 d-flex align-items-center justify-content-between b-b-1">
|
||||
<h3 class="f-s-21 f-w-600">Settings</h3>
|
||||
|
||||
<a mat-icon-button (click)="customizerRight.toggle()" class="d-flex justify-content-center">
|
||||
<mat-icon>close</mat-icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<app-customizer (optionsChange)="receiveOptions($event)"></app-customizer>
|
||||
</mat-sidenav>
|
||||
</mat-sidenav-container>
|
||||
@@ -0,0 +1,296 @@
|
||||
<mat-toolbar class="topbar horizontal-topbar ">
|
||||
<div class="container">
|
||||
<div class="d-none d-sm-flex">
|
||||
<app-branding></app-branding>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="toggleMobileNav.emit()"
|
||||
class="d-flex align-items-center justify-content-center d-lg-none m-x-4"
|
||||
>
|
||||
<i-tabler name="menu-2" class="icon-20 d-flex"></i-tabler>
|
||||
</button>
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- Search -->
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<button mat-icon-button (click)="openDialog()" class="d-flex align-items-center justify-content-center m-x-4">
|
||||
<i-tabler name="search" class="icon-20 d-flex"></i-tabler>
|
||||
</button>
|
||||
|
||||
<div class="d-none d-lg-flex">
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- Links -->
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<button
|
||||
mat-button
|
||||
[matMenuTriggerFor]="appsmenu"
|
||||
aria-label="Notifications"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
Apps <i-tabler name="chevron-down" class="icon-16 m-l-4"></i-tabler>
|
||||
</div>
|
||||
</button>
|
||||
<mat-menu #appsmenu="matMenu" class="apps-dd cardWithShadow">
|
||||
<div class="row">
|
||||
<div class="col-sm-8 b-r-1 p-r-0">
|
||||
<div class="p-32 p-b-0">
|
||||
<div class="row">
|
||||
@for(appdd of apps; track appdd.title) {
|
||||
<div class="col-sm-6 text-hover-primary">
|
||||
<a
|
||||
[routerLink]="[appdd.link]"
|
||||
class="d-flex align-items-center text-decoration-none m-b-24"
|
||||
>
|
||||
<span
|
||||
class="text-primary bg-light rounded icon-40 d-flex align-items-center justify-content-center"
|
||||
>
|
||||
<img [src]="appdd.img" width="20" />
|
||||
</span>
|
||||
|
||||
<div class="m-l-16">
|
||||
<h5
|
||||
class="f-s-14 f-w-600 m-0 textprimary hover-text"
|
||||
>
|
||||
{{ appdd.title }}
|
||||
</h5>
|
||||
<span class=" f-s-12">{{
|
||||
appdd.subtitle
|
||||
}}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="b-t-1 p-24 d-none d-lg-flex align-items-center justify-content-between"
|
||||
>
|
||||
<span
|
||||
class="d-flex align-items-center f-s-16 f-w-500"
|
||||
>
|
||||
<i-tabler name="help" class="icon-20 m-r-8"></i-tabler
|
||||
>Frequently Asked Questions
|
||||
</span>
|
||||
<a
|
||||
[routerLink]="['/theme-pages/faq']"
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
>Check</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="p-x-16 p-y-32">
|
||||
<h4 class="f-s-18 f-w-600 m-b-16">Quick Links</h4>
|
||||
@for(quicklink of quicklinks; track quicklink.title) {
|
||||
<div class="text-hover-primary">
|
||||
<a
|
||||
[routerLink]="[quicklink.link]"
|
||||
class="hover-text text-decoration-none f-w-600 d-block p-y-8"
|
||||
>{{ quicklink.title }}</a
|
||||
>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-menu>
|
||||
<a mat-button [routerLink]="['/']">Chat</a>
|
||||
<a mat-button [routerLink]="['/']">Calendar</a>
|
||||
<a mat-button [routerLink]="['/']">Email</a>
|
||||
</div>
|
||||
|
||||
<span class="flex-1-auto"></span>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="toggleMobileFilterNav.emit()"
|
||||
class="d-flex d-lg-none justify-content-center m-x-4"
|
||||
>
|
||||
<i-tabler name="grid-dots" class="icon-20 d-flex"></i-tabler>
|
||||
</button>
|
||||
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- langugage Dropdown -->
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<button [matMenuTriggerFor]="flags" mat-icon-button class="m-x-4">
|
||||
<img
|
||||
[src]="selectedLanguage.icon"
|
||||
class="rounded-circle object-cover icon-20"
|
||||
/>
|
||||
</button>
|
||||
<mat-menu #flags="matMenu" class="cardWithShadow">
|
||||
@for(lang of languages; track lang.icon) {
|
||||
<button mat-menu-item (click)="changeLanguage(lang)">
|
||||
<div class="d-flex align-items-center">
|
||||
<img
|
||||
[src]="lang.icon"
|
||||
class="rounded-circle object-cover m-r-8 icon-20"
|
||||
/>
|
||||
<span class=" f-s-14">{{ lang.language }}</span>
|
||||
</div>
|
||||
</button>
|
||||
}
|
||||
</mat-menu>
|
||||
|
||||
@if(options.theme=='light'){
|
||||
<button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center" (click)="setlightDark('dark')" >
|
||||
<i-tabler class="d-flex icon-22" [name]="'moon'"></i-tabler>
|
||||
</button>
|
||||
}@else{
|
||||
<button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center" (click)="setlightDark('light')">
|
||||
<i-tabler class="d-flex icon-22" [name]="'sun'"></i-tabler>
|
||||
</button>
|
||||
}
|
||||
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- Notification Dropdown -->
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<button
|
||||
mat-icon-button matBadge="5"
|
||||
[matMenuTriggerFor]="notificationmenu"
|
||||
aria-label="Notifications" class="m-x-4 notification-badge"
|
||||
>
|
||||
<i-tabler
|
||||
class="d-flex"
|
||||
name="bell"
|
||||
></i-tabler>
|
||||
</button>
|
||||
<mat-menu
|
||||
#notificationmenu="matMenu"
|
||||
xPosition="before"
|
||||
class="topbar-dd cardWithShadow"
|
||||
>
|
||||
<div class="d-flex align-items-center p-x-32 p-y-16">
|
||||
<h6 class="f-s-16 f-w-600 m-0 ">Notifications</h6>
|
||||
<span class="m-l-auto">
|
||||
<span class="bg-primary text-white p-x-8 p-y-4 f-w-500 rounded f-s-12"
|
||||
>5 new</span
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
@for(notification of notifications; track notification.title) {
|
||||
<button mat-menu-item class="p-x-32 p-y-16">
|
||||
<div class="d-flex align-items-center">
|
||||
<img [src]="notification.img" class="rounded-circle" width="48" />
|
||||
<div class="m-l-16">
|
||||
<h5 class="f-s-14 f-w-600 m-0 ">
|
||||
{{ notification.title }}
|
||||
</h5>
|
||||
<span>{{ notification.subtitle }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
}
|
||||
|
||||
<div class="p-y-12 p-x-32">
|
||||
<button mat-stroked-button color="primary" class="w-100">
|
||||
See all notifications
|
||||
</button>
|
||||
</div>
|
||||
</mat-menu>
|
||||
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- profile Dropdown -->
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<button
|
||||
mat-icon-button
|
||||
[matMenuTriggerFor]="profilemenu"
|
||||
aria-label="Notifications" class="m-l-4"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/profile/user-1.jpg"
|
||||
class="rounded-circle object-cover icon-35 profile-dd"
|
||||
width="35"
|
||||
/>
|
||||
</button>
|
||||
<mat-menu
|
||||
#profilemenu="matMenu"
|
||||
xPosition="before"
|
||||
class="topbar-dd cardWithShadow"
|
||||
>
|
||||
<div class="p-x-32 p-y-16">
|
||||
<h6 class="f-s-16 f-w-600 m-0 ">User Profile</h6>
|
||||
|
||||
<div class="d-flex align-items-center p-b-24 b-b-1 m-t-16">
|
||||
<img
|
||||
src="/assets/images/profile/user-1.jpg"
|
||||
class="rounded-circle"
|
||||
width="95"
|
||||
/>
|
||||
<div class="m-l-16">
|
||||
<h6 class="f-s-14 f-w-600 m-0 ">Mathew Anderson</h6>
|
||||
<span class="f-s-14 d-block m-b-4">Designer</span>
|
||||
<span class="d-flex align-items-center">
|
||||
<i-tabler name="mail" class="icon-15 m-r-4"></i-tabler>
|
||||
info@modernize.com
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-x-32">
|
||||
@for(profile of profiledd; track profile.title) {
|
||||
<a
|
||||
class="p-y-16 text-decoration-none d-block text-hover-primary"
|
||||
[routerLink]="[profile.link]"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
<button
|
||||
mat-mini-fab
|
||||
class="text-primary bg-light shadow-none rounded"
|
||||
>
|
||||
<img [src]="profile.img" width="20" />
|
||||
</button>
|
||||
|
||||
<div class="m-l-16">
|
||||
<h5
|
||||
class="f-s-14 f-w-600 m-0 textprimary hover-text"
|
||||
>
|
||||
{{ profile.title }}
|
||||
</h5>
|
||||
<span class="">{{ profile.subtitle }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
}
|
||||
|
||||
<!-- upgrade -->
|
||||
<div
|
||||
class="p-24 overflow-hidden bg-light-primary rounded position-relative m-y-16"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
<h5 class="f-s-18 m-0 f-w-600 m-b-12 ">
|
||||
Unlimited <br />
|
||||
Access
|
||||
</h5>
|
||||
<button mat-flat-button color="primary">Upgrade</button>
|
||||
</div>
|
||||
<div class="m-l-auto">
|
||||
<img
|
||||
src="/assets/images/backgrounds/unlimited-bg.png"
|
||||
alt="upgrade-bg"
|
||||
class="upgrade-bg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-y-12 p-x-32">
|
||||
<a
|
||||
[routerLink]="['/authentication/login']"
|
||||
mat-stroked-button
|
||||
color="primary"
|
||||
class="w-100"
|
||||
>Logout</a
|
||||
>
|
||||
</div>
|
||||
</mat-menu>
|
||||
</div>
|
||||
</mat-toolbar>
|
||||
@@ -0,0 +1,43 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Title } from '@angular/platform-browser';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { Router, NavigationEnd, ActivatedRoute, Data } from '@angular/router';
|
||||
import { filter, map, mergeMap } from 'rxjs/operators';
|
||||
import { TablerIconsModule } from 'angular-tabler-icons';
|
||||
|
||||
@Component({
|
||||
selector: 'app-breadcrumb',
|
||||
imports: [RouterModule, TablerIconsModule],
|
||||
templateUrl: './breadcrumb.component.html',
|
||||
styleUrls: [],
|
||||
})
|
||||
export class AppBreadcrumbComponent {
|
||||
// @Input() layout;
|
||||
pageInfo: Data | any = Object.create(null);
|
||||
myurl: any = this.router.url.slice(1).split('/');
|
||||
constructor(
|
||||
private router: Router,
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private titleService: Title
|
||||
) {
|
||||
this.router.events
|
||||
.pipe(filter((event) => event instanceof NavigationEnd))
|
||||
.pipe(map(() => this.activatedRoute))
|
||||
.pipe(
|
||||
map((route) => {
|
||||
while (route.firstChild) {
|
||||
route = route.firstChild;
|
||||
}
|
||||
return route;
|
||||
})
|
||||
)
|
||||
.pipe(filter((route) => route.outlet === 'primary'))
|
||||
.pipe(mergeMap((route) => route.data))
|
||||
// tslint:disable-next-line - Disables all
|
||||
.subscribe((event) => {
|
||||
// tslint:disable-next-line - Disables all
|
||||
this.titleService.setTitle(event['title'] + ' - Angular 20');
|
||||
this.pageInfo = event;
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,300 @@
|
||||
<mat-toolbar class="topbar gap-10">
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- Desktop Menu -->
|
||||
@if(showToggle) {
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="toggleCollapsed.emit()"
|
||||
class="d-flex justify-content-center"
|
||||
>
|
||||
<i-tabler name="menu-2" class="icon-20 d-flex"></i-tabler>
|
||||
</button>
|
||||
}
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
@if(!showToggle) {
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="toggleMobileNav.emit()"
|
||||
class="d-flex justify-content-center"
|
||||
>
|
||||
<i-tabler name="menu-2" class="icon-20 d-flex"></i-tabler>
|
||||
</button>
|
||||
}
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- Search -->
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="openDialog()"
|
||||
class="d-flex justify-content-center"
|
||||
>
|
||||
<i-tabler name="search" class="icon-20 d-flex"></i-tabler>
|
||||
</button>
|
||||
|
||||
<div class="d-none d-lg-flex">
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- Links -->
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<button
|
||||
mat-button
|
||||
[matMenuTriggerFor]="appsmenu"
|
||||
aria-label="Notifications"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
Apps <i-tabler name="chevron-down" class="icon-16 m-l-4"></i-tabler>
|
||||
</div>
|
||||
</button>
|
||||
<mat-menu #appsmenu="matMenu" class="apps-dd cardWithShadow">
|
||||
<div class="row">
|
||||
<div class="col-sm-8 b-r-1 p-r-0">
|
||||
<div class="p-32 p-b-0">
|
||||
<div class="row">
|
||||
@for(appdd of apps; track appdd.title) {
|
||||
<div class="col-sm-6 text-hover-primary">
|
||||
<a
|
||||
[routerLink]="[appdd.link]"
|
||||
class="d-flex align-items-center text-decoration-none m-b-24"
|
||||
>
|
||||
<span
|
||||
class="bg-light rounded icon-40 d-flex align-items-center justify-content-center"
|
||||
>
|
||||
<img [src]="appdd.img" width="20" />
|
||||
</span>
|
||||
|
||||
<div class="m-l-16">
|
||||
<h5
|
||||
class="f-s-14 f-w-600 m-0 hover-text"
|
||||
>
|
||||
{{ appdd.title }}
|
||||
</h5>
|
||||
<span class=" f-s-12 text-body">{{ appdd.subtitle }}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="b-t-1 p-24 d-none d-lg-flex align-items-center justify-content-between"
|
||||
>
|
||||
<span
|
||||
class="d-flex align-items-center f-s-16 f-w-500"
|
||||
>
|
||||
<i-tabler name="help" class="icon-20 m-r-8"></i-tabler>Frequently
|
||||
Asked Questions
|
||||
</span>
|
||||
<a
|
||||
[routerLink]="['/theme-pages/faq']"
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
>Check</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="p-x-16 p-y-32">
|
||||
<h4 class="f-s-18 f-w-600 m-b-16">Quick Links</h4>
|
||||
@for(quicklink of quicklinks; track quicklink.title) {
|
||||
<div class="text-hover-primary">
|
||||
<a
|
||||
[routerLink]="[quicklink.link]"
|
||||
class="hover-text text-decoration-none f-w-600 d-block p-y-8"
|
||||
>{{ quicklink.title }}</a
|
||||
>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-menu>
|
||||
<a mat-button [routerLink]="['/apps/chat']">Chat</a>
|
||||
<a mat-button [routerLink]="['/apps/calendar']">Calendar</a>
|
||||
<a mat-button [routerLink]="['/apps/email/inbox']">Email</a>
|
||||
</div>
|
||||
|
||||
<span class="flex-1-auto"></span>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="toggleMobileFilterNav.emit()"
|
||||
class="d-flex d-lg-none justify-content-center"
|
||||
>
|
||||
<i-tabler name="grid-dots" class="icon-20 d-flex"></i-tabler>
|
||||
</button>
|
||||
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- langugage Dropdown -->
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<button [matMenuTriggerFor]="flags" mat-icon-button class="m-r-5">
|
||||
<img
|
||||
[src]="selectedLanguage.icon"
|
||||
class="rounded-circle object-cover icon-20"
|
||||
/>
|
||||
</button>
|
||||
<mat-menu #flags="matMenu" class="cardWithShadow">
|
||||
@for(lang of languages; track lang.icon) {
|
||||
<button mat-menu-item (click)="changeLanguage(lang)">
|
||||
<div class="d-flex align-items-center">
|
||||
<img
|
||||
[src]="lang.icon"
|
||||
class="rounded-circle object-cover m-r-8 icon-20"
|
||||
/>
|
||||
<span class=" f-s-14">{{ lang.language }}</span>
|
||||
</div>
|
||||
</button>
|
||||
}
|
||||
</mat-menu>
|
||||
@if(options.theme=='light'){
|
||||
<button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center" (click)="setlightDark('dark')" >
|
||||
<i-tabler class="d-flex icon-22" [name]="'moon'"></i-tabler>
|
||||
</button>
|
||||
}@else{
|
||||
<button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center" (click)="setlightDark('light')">
|
||||
<i-tabler class="d-flex icon-22" [name]="'sun'"></i-tabler>
|
||||
</button>
|
||||
}
|
||||
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- Notification Dropdown -->
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<button
|
||||
mat-icon-button matBadge="5"
|
||||
[matMenuTriggerFor]="notificationmenu"
|
||||
aria-label="Notifications" class="notification-badge"
|
||||
>
|
||||
<i-tabler
|
||||
class="d-flex"
|
||||
name="bell"
|
||||
></i-tabler>
|
||||
</button>
|
||||
<mat-menu #notificationmenu="matMenu" class="topbar-dd cardWithShadow">
|
||||
<div class="d-flex align-items-center p-x-32 p-y-16">
|
||||
<h6 class="f-s-16 f-w-600 m-0 ">Notifications</h6>
|
||||
<span class="m-l-auto">
|
||||
<span class="bg-primary text-white p-x-8 p-y-4 f-w-500 rounded f-s-12"
|
||||
>5 new</span
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@for(notification of notifications; track notification.title) {
|
||||
<button mat-menu-item class="p-x-32 p-y-16">
|
||||
<div class="d-flex align-items-center">
|
||||
<img [src]="notification.img" class="rounded-circle" width="48" />
|
||||
<div class="m-l-16">
|
||||
<h5 class="f-s-14 f-w-600 m-0 ">
|
||||
{{ notification.title }}
|
||||
</h5>
|
||||
<span>{{ notification.subtitle }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
}
|
||||
|
||||
<div class="p-y-12 p-x-32">
|
||||
<button mat-stroked-button color="primary" class="w-100">
|
||||
See all notifications
|
||||
</button>
|
||||
</div>
|
||||
</mat-menu>
|
||||
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<!-- profile Dropdown -->
|
||||
<!-- --------------------------------------------------------------- -->
|
||||
<button
|
||||
mat-icon-button
|
||||
[matMenuTriggerFor]="profilemenu"
|
||||
aria-label="Notifications"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/profile/user-1.jpg"
|
||||
class="rounded-circle object-cover icon-35 profile-dd"
|
||||
width="35"
|
||||
/>
|
||||
</button>
|
||||
<mat-menu #profilemenu="matMenu" class="topbar-dd cardWithShadow">
|
||||
<ng-scrollbar class="position-relative" style="height: 647px">
|
||||
<div class="p-x-32 p-y-16">
|
||||
<h6 class="f-s-16 f-w-600 m-0 ">User Profile</h6>
|
||||
|
||||
<div class="d-flex align-items-center p-b-24 b-b-1 m-t-16">
|
||||
<img
|
||||
src="/assets/images/profile/user-1.jpg"
|
||||
class="rounded-circle"
|
||||
width="95"
|
||||
/>
|
||||
<div class="m-l-16">
|
||||
<h6 class="f-s-14 f-w-600 m-0 ">Mathew Anderson</h6>
|
||||
<span class="f-s-14 d-block m-b-4">Designer</span>
|
||||
<span class="d-flex align-items-center">
|
||||
<i-tabler name="mail" class="icon-15 m-r-4"></i-tabler>
|
||||
info@modernize.com
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-x-32">
|
||||
@for(profile of profiledd; track profile.title) {
|
||||
<a
|
||||
class="p-y-16 text-decoration-none d-block text-hover-primary"
|
||||
[routerLink]="[profile.link]"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
<button
|
||||
mat-mini-fab
|
||||
class="text-primary bg-light shadow-none rounded"
|
||||
>
|
||||
<img [src]="profile.img" width="20" />
|
||||
</button>
|
||||
|
||||
<div class="m-l-16">
|
||||
<h5
|
||||
class="f-s-14 f-w-600 m-0 textprimary hover-text"
|
||||
>
|
||||
{{ profile.title }}
|
||||
</h5>
|
||||
<span class="text-body">{{ profile.subtitle }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
}
|
||||
|
||||
<!-- upgrade -->
|
||||
<div
|
||||
class="p-24 overflow-hidden bg-light rounded position-relative m-y-16"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
<h5 class="f-s-18 m-0 f-w-600 m-b-12 ">
|
||||
Unlimited <br />
|
||||
Access
|
||||
</h5>
|
||||
<button mat-flat-button color="primary">Upgrade</button>
|
||||
</div>
|
||||
<div class="m-l-auto">
|
||||
<img
|
||||
src="/assets/images/backgrounds/unlimited-bg.png"
|
||||
alt="upgrade-bg"
|
||||
class="upgrade-bg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-y-12 p-x-32">
|
||||
<a
|
||||
[routerLink]="['/authentication/login']"
|
||||
mat-stroked-button
|
||||
color="primary"
|
||||
class="w-100"
|
||||
>Logout</a
|
||||
>
|
||||
</div>
|
||||
</ng-scrollbar>
|
||||
</mat-menu>
|
||||
</mat-toolbar>
|
||||
153
theme/packages/authguard/src/assets/scss/_container.scss
Normal file
153
theme/packages/authguard/src/assets/scss/_container.scss
Normal file
@@ -0,0 +1,153 @@
|
||||
@use "variables" as *;
|
||||
|
||||
*,
|
||||
:after,
|
||||
:before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $font-family;
|
||||
line-height: 1.334rem;
|
||||
overflow-x: hidden;
|
||||
color: var(--mat-sys-on-background);
|
||||
}
|
||||
|
||||
.mainWrapper {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
margin: 0 auto;
|
||||
|
||||
&.full-width {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.pageWrapper {
|
||||
padding: 24px;
|
||||
min-height: calc(100vh - 70px);
|
||||
|
||||
margin: 0 auto;
|
||||
|
||||
&.maxWidth {
|
||||
max-width: $boxedWidth;
|
||||
}
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.h-100 {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.shadow-none {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: $border-radius !important;
|
||||
}
|
||||
|
||||
.rounded-circle {
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
|
||||
.rounded-pill {
|
||||
border-radius: 25px !important;
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.text-decoration-none {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.position-relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
|
||||
td,
|
||||
mat-cell {
|
||||
white-space: nowrap;
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.op-5 {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.avatar-group {
|
||||
img {
|
||||
border: 2px solid $white;
|
||||
margin-right: -5px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--mat-sys-on-background);
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-sidebar {
|
||||
width: 290px;
|
||||
position: fixed;
|
||||
right: -290px;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
height: 100%;
|
||||
transition: all 0.3s ease-in-out;
|
||||
box-shadow: var(--mat-sys-level3);
|
||||
background-color: var(--mat-sys-background);
|
||||
&.open {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
td.hljs-ln-line.hljs-ln-numbers {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
html .flex-sm-row {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-drawer[style*="visibility: hidden"] {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
@use "../variables" as *;
|
||||
|
||||
html .topbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 9;
|
||||
height: $header-height;
|
||||
|
||||
.notification-badge{
|
||||
.mat-badge-content{
|
||||
left: 80%;
|
||||
bottom: 85%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topbar-dd {
|
||||
min-width: 360px !important;
|
||||
}
|
||||
|
||||
.apps-dd {
|
||||
min-width: 830px !important;
|
||||
overflow: unset !important;
|
||||
|
||||
.mat-mdc-menu-content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.text-hover-primary:hover {
|
||||
.hover-text {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.upgrade-bg {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.object-cover {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.profile-dd {
|
||||
margin-top: -5px;
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
.dark-theme {
|
||||
.topbar {
|
||||
.mat-mdc-icon-button {
|
||||
color: $dark-text-secondary !important;
|
||||
}
|
||||
|
||||
.mdc-button {
|
||||
--mdc-text-button-label-text-color: $dark-text-secondary !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user