set backgrounds
This commit is contained in:
parent
da92256699
commit
17ba5c9640
|
@ -1,7 +1,9 @@
|
||||||
<div class="flex h-screen w-screen bg-base-200">
|
<div class="flex h-screen w-screen bg-base-200">
|
||||||
<div class="flex flex-col w-full lg:w-full bg-base-100 h-screen">
|
<div class="flex flex-col w-full lg:w-full bg-base-100 h-screen">
|
||||||
<!-- Header mit dem Burger-Menü -->
|
<!-- Header mit dem Burger-Menü -->
|
||||||
<header class="w-full navbar bg-primary text-primary-content z-40">
|
<header
|
||||||
|
[ngStyle]="navigation"
|
||||||
|
class="w-full navbar bg-primary text-primary-content z-40">
|
||||||
<div class="flex-1">
|
<div class="flex-1">
|
||||||
<a class="btn btn-ghost normal-case text-xl text-primary-content">
|
<a class="btn btn-ghost normal-case text-xl text-primary-content">
|
||||||
[APP-NAME]
|
[APP-NAME]
|
||||||
|
@ -384,7 +386,7 @@
|
||||||
'lg:ml-16': isCompact && !isDrawerOpen,
|
'lg:ml-16': isCompact && !isDrawerOpen,
|
||||||
'ml-0': !isDrawerOpen || isCompact
|
'ml-0': !isDrawerOpen || isCompact
|
||||||
}">
|
}">
|
||||||
<main class="flex-1">
|
<main [ngStyle]="mainContent" class="flex-1 w-full h-full">
|
||||||
<div class="w-full h-full flex items-center justify-center">
|
<div class="w-full h-full flex items-center justify-center">
|
||||||
<div class="w-full max-w-5xl">
|
<div class="w-full max-w-5xl">
|
||||||
<router-outlet></router-outlet>
|
<router-outlet></router-outlet>
|
||||||
|
|
|
@ -100,13 +100,13 @@ interface BottomMenuItem {
|
||||||
state(
|
state(
|
||||||
'open',
|
'open',
|
||||||
style({
|
style({
|
||||||
width: '16rem', // 256px
|
width: '16rem',
|
||||||
})
|
})
|
||||||
),
|
),
|
||||||
state(
|
state(
|
||||||
'compact',
|
'compact',
|
||||||
style({
|
style({
|
||||||
width: '4rem', // 64px
|
width: '4rem',
|
||||||
})
|
})
|
||||||
),
|
),
|
||||||
state(
|
state(
|
||||||
|
@ -221,12 +221,13 @@ export class LayoutComponent implements OnInit, OnDestroy {
|
||||||
) {}
|
) {}
|
||||||
|
|
||||||
@HostListener('window:resize', ['$event'])
|
@HostListener('window:resize', ['$event'])
|
||||||
public onResize(event: any): void {
|
public onResize(event: Event): void {
|
||||||
this.isMobile = event.target.innerWidth < 1024;
|
this.isMobile = (event.target as Window).innerWidth < 1024;
|
||||||
this.adjustDrawerState(event.target.innerWidth);
|
this.adjustDrawerState((event.target as Window).innerWidth);
|
||||||
}
|
}
|
||||||
|
|
||||||
public ngOnInit(): void {
|
public ngOnInit(): void {
|
||||||
|
this.setBackground();
|
||||||
this.adjustDrawerState(window.innerWidth);
|
this.adjustDrawerState(window.innerWidth);
|
||||||
|
|
||||||
window.addEventListener('resize', this.onResize.bind(this));
|
window.addEventListener('resize', this.onResize.bind(this));
|
||||||
|
@ -260,21 +261,21 @@ export class LayoutComponent implements OnInit, OnDestroy {
|
||||||
|
|
||||||
public toggleDrawer(): void {
|
public toggleDrawer(): void {
|
||||||
this.isDrawerOpen = !this.isDrawerOpen;
|
this.isDrawerOpen = !this.isDrawerOpen;
|
||||||
this.isCompact = !this.isDrawerOpen; // Wechsel zwischen kompaktem und vollem Zustand
|
this.isCompact = !this.isDrawerOpen;
|
||||||
}
|
}
|
||||||
|
|
||||||
public toggleCompactMode(): void {
|
public toggleCompactMode(): void {
|
||||||
this.isCompact = !this.isCompact;
|
this.isCompact = !this.isCompact;
|
||||||
this.isDrawerOpen = !this.isCompact; // Wenn kompaktes Mode aktiviert wird, Drawer geschlossen
|
this.isDrawerOpen = !this.isCompact;
|
||||||
}
|
}
|
||||||
|
|
||||||
public adjustDrawerState(width: number): void {
|
public adjustDrawerState(width: number): void {
|
||||||
if (width < 1024) {
|
if (width < 1024) {
|
||||||
this.isCompact = true;
|
this.isCompact = true;
|
||||||
this.isDrawerOpen = false; // Kompaktmodus auf mobilen Geräten
|
this.isDrawerOpen = false;
|
||||||
} else {
|
} else {
|
||||||
this.isCompact = false;
|
this.isCompact = false;
|
||||||
this.isDrawerOpen = true; // Vollmodus auf Desktop
|
this.isDrawerOpen = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -294,6 +295,41 @@ export class LayoutComponent implements OnInit, OnDestroy {
|
||||||
item.isOpen = !item.isOpen;
|
item.isOpen = !item.isOpen;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public setBackground(): void {
|
||||||
|
const theme = this.themeService.getTheme();
|
||||||
|
let opacity: number;
|
||||||
|
|
||||||
|
if (theme === 'dark') {
|
||||||
|
opacity = 0.05;
|
||||||
|
} else {
|
||||||
|
opacity = 0.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
const colorPrimary = getComputedStyle(
|
||||||
|
this.el.nativeElement
|
||||||
|
).getPropertyValue('--p');
|
||||||
|
|
||||||
|
const colorPrimaryC = getComputedStyle(
|
||||||
|
this.el.nativeElement
|
||||||
|
).getPropertyValue('--pc');
|
||||||
|
|
||||||
|
const svgUrlMainContent = this.backgroundPatternService.getPlusPattern(
|
||||||
|
colorPrimary,
|
||||||
|
opacity
|
||||||
|
);
|
||||||
|
const svgUrlNavigation = this.backgroundPatternService.getBankNotePattern(
|
||||||
|
colorPrimaryC,
|
||||||
|
opacity
|
||||||
|
);
|
||||||
|
|
||||||
|
this.mainContent = {
|
||||||
|
'background-image': `url("${svgUrlMainContent}")`,
|
||||||
|
};
|
||||||
|
this.navigation = {
|
||||||
|
'background-image': `url("${svgUrlNavigation}")`,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
private updateMenuState(currentRoute: string): void {
|
private updateMenuState(currentRoute: string): void {
|
||||||
this.menuItems.forEach((item: TopMenuItem) => {
|
this.menuItems.forEach((item: TopMenuItem) => {
|
||||||
// Set top-level items active state
|
// Set top-level items active state
|
||||||
|
@ -320,76 +356,6 @@ export class LayoutComponent implements OnInit, OnDestroy {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// @HostListener('window:resize', ['$event'])
|
|
||||||
// public onResize(): void {
|
|
||||||
// if (window.innerWidth >= 768) {
|
|
||||||
// this.showMobileMenu = false;
|
|
||||||
// this.isCollapsed = false;
|
|
||||||
// } else {
|
|
||||||
// this.isDesktopCollapsed = false;
|
|
||||||
// this.isCollapsed = true;
|
|
||||||
// this.showMobileMenu = false;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// public setBackground(): void {
|
|
||||||
// const theme = this.themeService.getTheme();
|
|
||||||
// let opacity: number;
|
|
||||||
|
|
||||||
// if (theme === 'dark') {
|
|
||||||
// opacity = 0.05;
|
|
||||||
// } else {
|
|
||||||
// opacity = 0.1;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// const colorPrimary = getComputedStyle(
|
|
||||||
// this.el.nativeElement
|
|
||||||
// ).getPropertyValue('--p');
|
|
||||||
|
|
||||||
// const colorPrimaryC = getComputedStyle(
|
|
||||||
// this.el.nativeElement
|
|
||||||
// ).getPropertyValue('--pc');
|
|
||||||
|
|
||||||
// const svgUrlMainContent = this.backgroundPatternService.getPlusPattern(
|
|
||||||
// colorPrimary,
|
|
||||||
// opacity
|
|
||||||
// );
|
|
||||||
// const svgUrlNavigation = this.backgroundPatternService.getBankNotePattern(
|
|
||||||
// colorPrimaryC,
|
|
||||||
// opacity
|
|
||||||
// );
|
|
||||||
|
|
||||||
// this.mainContent = {
|
|
||||||
// 'background-image': `url("${svgUrlMainContent}")`,
|
|
||||||
// };
|
|
||||||
// this.navigation = {
|
|
||||||
// 'background-image': `url("${svgUrlNavigation}")`,
|
|
||||||
// };
|
|
||||||
// }
|
|
||||||
|
|
||||||
// public toggleSidebar(): void {
|
|
||||||
// if (window.innerWidth < 768) {
|
|
||||||
// this.showMobileMenu = !this.showMobileMenu;
|
|
||||||
// this.isCollapsed = !this.showMobileMenu;
|
|
||||||
// } else {
|
|
||||||
// this.isDesktopCollapsed = !this.isDesktopCollapsed;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// public toggleDesktopSidebar(): void {
|
|
||||||
// this.isDesktopCollapsed = !this.isDesktopCollapsed;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// public setActive(item: TopMenuItem): void {
|
|
||||||
// this.menuItems.forEach((menu: TopMenuItem) => {
|
|
||||||
// menu.active = false;
|
|
||||||
// });
|
|
||||||
// this.router.navigate([item.route]);
|
|
||||||
// if (!this.isCollapsed && this.showMobileMenu) {
|
|
||||||
// this.toggleSidebar();
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
private signout(): void {
|
private signout(): void {
|
||||||
this.authService.signout().subscribe((response: SuccessDtoApiModel) => {
|
this.authService.signout().subscribe((response: SuccessDtoApiModel) => {
|
||||||
if (response.success) {
|
if (response.success) {
|
||||||
|
|
Loading…
Reference in New Issue