Sidebar Bottom Menu #16
|
@ -6,8 +6,8 @@ const simpleLayoutRoutes: Routes = [
|
|||
{
|
||||
path: '',
|
||||
loadComponent: () =>
|
||||
import('./pages/register-root/register-root.component').then(
|
||||
(m) => m.RegisterRootComponent
|
||||
import('./pages/welcome-root/welcome-root.component').then(
|
||||
(m) => m.WelcomeRootComponent
|
||||
),
|
||||
},
|
||||
{
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<div class="flex h-screen overflow-hidden">
|
||||
<!-- Sidebar -->
|
||||
<div
|
||||
[ngStyle]="navigation"
|
||||
[class]="
|
||||
|
@ -8,10 +7,10 @@
|
|||
: showMobileMenu
|
||||
? 'bg-primary w-64 transition-all duration-300 ease-in-out'
|
||||
: isDesktopCollapsed
|
||||
? 'bg-primary w-48 md:w-16 transition-all duration-300 ease-in-out'
|
||||
? 'bg-primary w-48 md:w-14 transition-all duration-300 ease-in-out'
|
||||
: 'bg-primary w-48 md:w-48 transition-all duration-300 ease-in-out'
|
||||
"
|
||||
class="transform h-full z-20 overflow-y-auto fixed md:relative">
|
||||
class="transform h-full z-20 overflow-y-auto fixed md:relative flex flex-col">
|
||||
<div
|
||||
[ngClass]="showMobileMenu ? 'justify-center' : 'justify-between'"
|
||||
[ngStyle]="navigation"
|
||||
|
@ -19,7 +18,7 @@
|
|||
<div class="flex items-center justify-center h-full w-full">
|
||||
<div class="flex items-center space-x-4">
|
||||
@if (!isCollapsed && !isDesktopCollapsed) {
|
||||
<div class="text-primary">Logo</div>
|
||||
<div class="text-primary">LOGO</div>
|
||||
}
|
||||
|
||||
@if (!isCollapsed && !showMobileMenu) {
|
||||
|
@ -58,15 +57,44 @@
|
|||
</div>
|
||||
<ul class="m-1">
|
||||
<li
|
||||
class="cursor-pointer rounded-btn"
|
||||
class="cursor-pointer rounded-btn mt-2"
|
||||
[ngClass]="{
|
||||
'bg-base-100 text-primary': item.active,
|
||||
'text-primary-content hover:text-base-content': !item.active
|
||||
}"
|
||||
(click)="setActive(item)"
|
||||
(keydown.enter)="setActive(item)"
|
||||
(keydown.space)="setActive(item)"
|
||||
tabindex="0"
|
||||
role="button"
|
||||
*ngFor="let item of menuItems">
|
||||
<div
|
||||
class="flex justify-center p-2"
|
||||
class="flex justify-center p-1"
|
||||
*ngIf="isDesktopCollapsed && !showMobileMenu">
|
||||
<span class="p-1" [innerHTML]="item.icon"></span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex items-center rounded-btn justify-between cursor-pointer px-1 py-2"
|
||||
*ngIf="!isDesktopCollapsed || showMobileMenu">
|
||||
<div class="flex items-center">
|
||||
<span [innerHTML]="item.icon" class="mx-2"></span>
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="m-1 mt-auto">
|
||||
<li
|
||||
class="cursor-pointer bg-base-100 text-base-content rounded-btn mb-2"
|
||||
*ngFor="let item of bottomMenuItems"
|
||||
(click)="item.action ? item.action() : null"
|
||||
(keydown.enter)="item.action ? item.action() : null"
|
||||
(keydown.space)="item.action ? item.action() : null"
|
||||
tabindex="0"
|
||||
role="button">
|
||||
<div
|
||||
class="flex justify-center p-1"
|
||||
*ngIf="isDesktopCollapsed && !showMobileMenu">
|
||||
<span class="p-1" [innerHTML]="item.icon"></span>
|
||||
</div>
|
||||
|
|
|
@ -9,15 +9,23 @@ import {
|
|||
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
|
||||
import { Router, RouterOutlet } from '@angular/router';
|
||||
|
||||
import { SuccessDtoApiModel } from '../../api';
|
||||
import { BackgroundPatternService, ThemeService } from '../../shared/service';
|
||||
import { AuthService } from '../../shared/service/auth.service';
|
||||
|
||||
interface MenuItem {
|
||||
interface TopMenuItem {
|
||||
name: string;
|
||||
icon: SafeHtml;
|
||||
route: string;
|
||||
active?: boolean;
|
||||
}
|
||||
|
||||
interface BottomMenuItem {
|
||||
name: string;
|
||||
icon: SafeHtml;
|
||||
action?: () => void;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-layout',
|
||||
standalone: true,
|
||||
|
@ -31,7 +39,7 @@ export class LayoutComponent implements OnInit {
|
|||
public isDesktopCollapsed: boolean = false;
|
||||
public showMobileMenu: boolean = false;
|
||||
public userHasInteracted: boolean = false;
|
||||
public menuItems: MenuItem[] = [
|
||||
public menuItems: TopMenuItem[] = [
|
||||
{
|
||||
name: 'Dashboard',
|
||||
route: '/dashboard',
|
||||
|
@ -41,6 +49,16 @@ export class LayoutComponent implements OnInit {
|
|||
</svg>`),
|
||||
},
|
||||
];
|
||||
public bottomMenuItems: BottomMenuItem[] = [
|
||||
{
|
||||
name: 'Logout',
|
||||
action: () => this.signout(),
|
||||
icon: this.sanitizer
|
||||
.bypassSecurityTrustHtml(`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15m-3 0-3-3m0 0 3-3m-3 3H15" />
|
||||
</svg>`),
|
||||
},
|
||||
];
|
||||
public mainContent: { 'background-image': string } | null = null;
|
||||
public navigation: { 'background-image': string } | null = null;
|
||||
|
||||
|
@ -49,7 +67,8 @@ export class LayoutComponent implements OnInit {
|
|||
private readonly router: Router,
|
||||
private readonly backgroundPatternService: BackgroundPatternService,
|
||||
private readonly themeService: ThemeService,
|
||||
private readonly el: ElementRef
|
||||
private readonly el: ElementRef,
|
||||
private readonly authService: AuthService
|
||||
) {}
|
||||
|
||||
public ngOnInit(): void {
|
||||
|
@ -122,8 +141,8 @@ export class LayoutComponent implements OnInit {
|
|||
this.isDesktopCollapsed = !this.isDesktopCollapsed;
|
||||
}
|
||||
|
||||
public setActive(item: MenuItem): void {
|
||||
this.menuItems.forEach((menu: MenuItem) => {
|
||||
public setActive(item: TopMenuItem): void {
|
||||
this.menuItems.forEach((menu: TopMenuItem) => {
|
||||
menu.active = false;
|
||||
});
|
||||
item.active = true;
|
||||
|
@ -132,8 +151,18 @@ export class LayoutComponent implements OnInit {
|
|||
private setActiveItemBasedOnRoute(): void {
|
||||
const url = this.router.url;
|
||||
|
||||
this.menuItems.forEach((item: MenuItem) => {
|
||||
this.menuItems.forEach((item: TopMenuItem) => {
|
||||
item.active = url.startsWith(item.route);
|
||||
});
|
||||
}
|
||||
|
||||
private signout(): void {
|
||||
this.authService.signout().subscribe((response: SuccessDtoApiModel) => {
|
||||
if (response.success) {
|
||||
this.router.navigate(['/welcome'], {
|
||||
queryParams: { signedOut: true },
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,38 +0,0 @@
|
|||
import { HttpErrorResponse } from '@angular/common/http';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
import { SuccessDtoApiModel } from '../../api';
|
||||
import { AuthService } from '../../shared/service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-foo',
|
||||
standalone: true,
|
||||
providers: [],
|
||||
imports: [],
|
||||
templateUrl: './home-root.component.html',
|
||||
styleUrl: './home-root.component.scss',
|
||||
})
|
||||
export class HomeComponent implements OnInit {
|
||||
public constructor(
|
||||
private readonly authService: AuthService,
|
||||
private readonly router: Router
|
||||
) {}
|
||||
|
||||
public ngOnInit(): void {
|
||||
this.authService.status().subscribe(
|
||||
(response: SuccessDtoApiModel) => {
|
||||
if (response.success) {
|
||||
this.router.navigate(['/dashboard']);
|
||||
}
|
||||
},
|
||||
(error: HttpErrorResponse) => {
|
||||
if (error.status === 401) {
|
||||
this.router.navigate(['welcome'], {
|
||||
queryParams: { login: true },
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
|
@ -25,7 +25,7 @@ import { ButtonModule } from 'primeng/button';
|
|||
import { CheckboxModule } from 'primeng/checkbox';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
import { PasswordModule } from 'primeng/password';
|
||||
import { delay, finalize, tap } from 'rxjs';
|
||||
import { delay, finalize, takeWhile, tap } from 'rxjs';
|
||||
|
||||
import {
|
||||
Configuration,
|
||||
|
@ -67,17 +67,18 @@ type AuthAction = 'signin' | 'signup';
|
|||
new ApiConfiguration({ withCredentials: true }),
|
||||
},
|
||||
],
|
||||
templateUrl: './register-root.component.html',
|
||||
styleUrl: './register-root.component.scss',
|
||||
templateUrl: './welcome-root.component.html',
|
||||
styleUrl: './welcome-root.component.scss',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class RegisterRootComponent implements OnInit {
|
||||
export class WelcomeRootComponent implements OnInit {
|
||||
public dialogBackgroundStyle: { 'background-image': string } | null = null;
|
||||
public leftBackgroundStyle: { 'background-image': string } | null = null;
|
||||
public rightBackgroundStyle: { 'background-image': string } | null = null;
|
||||
public verified: InputSignal<boolean> = input<boolean>(false);
|
||||
public login: InputSignal<boolean> = input<boolean>(false);
|
||||
public email: InputSignal<string> = input<string>('');
|
||||
public signedOut: InputSignal<boolean> = input<boolean>(true);
|
||||
public form!: FormGroup;
|
||||
public rememberMe: FormControl = new FormControl(false);
|
||||
public isSigninSignal: WritableSignal<boolean> = signal(false);
|
||||
|
@ -107,30 +108,10 @@ export class RegisterRootComponent implements OnInit {
|
|||
this.clearRouteParams();
|
||||
}
|
||||
});
|
||||
const rememberMe = this.localStorageService.getItem<boolean>('remember-me');
|
||||
|
||||
if (rememberMe) {
|
||||
this.authService
|
||||
.status()
|
||||
.pipe(delay(1500))
|
||||
.subscribe({
|
||||
next: (response: SuccessDtoApiModel) => {
|
||||
if (response.success) {
|
||||
this.router.navigate(['/dashboard']);
|
||||
} else {
|
||||
this.displaySkeleton.set(false);
|
||||
}
|
||||
},
|
||||
error: () => {
|
||||
this.displaySkeleton.set(false);
|
||||
},
|
||||
});
|
||||
} else {
|
||||
this.displaySkeleton.set(false);
|
||||
}
|
||||
}
|
||||
|
||||
public ngOnInit(): void {
|
||||
this.autologin();
|
||||
this.setBackground();
|
||||
this.initializeForm();
|
||||
this.setupValueChanges();
|
||||
|
@ -141,6 +122,30 @@ export class RegisterRootComponent implements OnInit {
|
|||
}
|
||||
}
|
||||
|
||||
public autologin(): void {
|
||||
const rememberMe = this.localStorageService.getItem<boolean>('remember-me');
|
||||
|
||||
if (rememberMe && !this.signedOut()) {
|
||||
this.authService
|
||||
.status()
|
||||
.pipe(
|
||||
delay(1500),
|
||||
takeWhile((response: SuccessDtoApiModel) => response.success, true),
|
||||
tap({
|
||||
next: (response: SuccessDtoApiModel) => {
|
||||
if (response.success) {
|
||||
this.router.navigate(['/dashboard']);
|
||||
}
|
||||
},
|
||||
finalize: () => this.displaySkeleton.set(false),
|
||||
})
|
||||
)
|
||||
.subscribe();
|
||||
} else {
|
||||
this.displaySkeleton.set(false);
|
||||
}
|
||||
}
|
||||
|
||||
public setBackground(): void {
|
||||
const theme = this.themeService.getTheme();
|
||||
let opacity: number;
|
Loading…
Reference in New Issue