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