Basic Dashboard #14
|
@ -1,6 +1,7 @@
|
|||
<div class="flex h-screen overflow-hidden">
|
||||
<!-- Sidebar -->
|
||||
<div
|
||||
[ngStyle]="navigation"
|
||||
[class]="
|
||||
isCollapsed
|
||||
? 'bg-primary w-0 md:w-20 transition-all duration-300 ease-in-out'
|
||||
|
@ -13,6 +14,7 @@
|
|||
class="transform h-full z-20 overflow-y-auto fixed md:relative">
|
||||
<div
|
||||
[ngClass]="showMobileMenu ? 'justify-center' : 'justify-between'"
|
||||
[ngStyle]="navigation"
|
||||
class="p-1 w-full h-16 bg-base-100 flex items-center relative">
|
||||
<div class="flex items-center justify-center h-full w-full">
|
||||
<div class="flex items-center space-x-4">
|
||||
|
@ -82,7 +84,9 @@
|
|||
</div>
|
||||
|
||||
<div class="flex flex-col flex-grow">
|
||||
<header class="p-4 bg-primary text-primary-content flex items-center h-16">
|
||||
<header
|
||||
[ngStyle]="navigation"
|
||||
class="p-4 bg-primary text-primary-content flex items-center h-16">
|
||||
<div class="w-10 flex items-center justify-center md:hidden">
|
||||
<label class="btn btn-ghost swap swap-rotate">
|
||||
<input
|
||||
|
@ -111,7 +115,9 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<div class="flex-grow p-10 text-2xl font-bold overflow-y-auto">
|
||||
<div
|
||||
[ngStyle]="mainContent"
|
||||
class="flex-grow p-10 text-2xl font-bold overflow-y-auto">
|
||||
<p>isCollapsed: {{ isCollapsed }}</p>
|
||||
<p>showMobileMenu: {{ showMobileMenu }}</p>
|
||||
<p>isDesktopCollapsed: {{ isDesktopCollapsed }}</p>
|
||||
|
|
|
@ -2,11 +2,14 @@ import { CommonModule } from '@angular/common';
|
|||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
ElementRef,
|
||||
HostListener,
|
||||
OnInit,
|
||||
} from '@angular/core';
|
||||
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
|
||||
import { Router, ActivatedRoute } from '@angular/router';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
import { BackgroundPatternService, ThemeService } from '../../shared/service';
|
||||
|
||||
interface MenuItem {
|
||||
name: string;
|
||||
|
@ -39,20 +42,23 @@ export class DashboardRootComponent implements OnInit {
|
|||
</svg>`),
|
||||
},
|
||||
];
|
||||
public mainContent: { 'background-image': string } | null = null;
|
||||
public navigation: { 'background-image': string } | null = null;
|
||||
|
||||
public constructor(
|
||||
private readonly sanitizer: DomSanitizer,
|
||||
private readonly router: Router,
|
||||
private readonly route: ActivatedRoute
|
||||
private readonly backgroundPatternService: BackgroundPatternService,
|
||||
private readonly themeService: ThemeService,
|
||||
private readonly el: ElementRef
|
||||
) {}
|
||||
|
||||
public ngOnInit(): void {
|
||||
this.setActiveItemBasedOnRoute();
|
||||
this.router.events.subscribe(() => {
|
||||
console.log('router event');
|
||||
|
||||
this.setActiveItemBasedOnRoute();
|
||||
});
|
||||
this.setBackground();
|
||||
this.onResize();
|
||||
}
|
||||
|
||||
|
@ -68,6 +74,43 @@ export class DashboardRootComponent implements OnInit {
|
|||
}
|
||||
}
|
||||
|
||||
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
|
||||
);
|
||||
|
||||
console.log(this.mainContent, this.navigation);
|
||||
|
||||
this.mainContent = {
|
||||
'background-image': `url("${svgUrlMainContent}")`,
|
||||
};
|
||||
this.navigation = {
|
||||
'background-image': `url("${svgUrlNavigation}")`,
|
||||
};
|
||||
}
|
||||
|
||||
public toggleSidebar(): void {
|
||||
if (window.innerWidth < 768) {
|
||||
this.showMobileMenu = !this.showMobileMenu;
|
||||
|
|
Loading…
Reference in New Issue