set active state to nav
This commit is contained in:
parent
5246b374c4
commit
062344f65d
|
@ -56,7 +56,12 @@
|
|||
</div>
|
||||
<ul class="m-1">
|
||||
<li
|
||||
class="hover:bg-accent-content cursor-pointer hover:text-accent text-primary-content rounded-btn"
|
||||
class="cursor-pointer rounded-btn"
|
||||
[ngClass]="{
|
||||
'bg-base-100 text-primary': item.active,
|
||||
'text-primary-content hover:text-base-content': !item.active
|
||||
}"
|
||||
(click)="setActive(item)"
|
||||
*ngFor="let item of menuItems">
|
||||
<div
|
||||
class="flex justify-center p-2"
|
||||
|
@ -65,9 +70,9 @@
|
|||
</div>
|
||||
|
||||
<div
|
||||
class="flex items-center rounded-btn justify-between cursor-pointer px-1 py-2 hover:bg-accent-content hover:text-accent text-primary-content"
|
||||
class="flex items-center rounded-btn justify-between cursor-pointer px-1 py-2"
|
||||
*ngIf="!isDesktopCollapsed || showMobileMenu">
|
||||
<div class="flex items-center hover:bold">
|
||||
<div class="flex items-center">
|
||||
<span [innerHTML]="item.icon" class="mx-2"></span>
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
|
|
|
@ -6,11 +6,12 @@ import {
|
|||
OnInit,
|
||||
} from '@angular/core';
|
||||
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
|
||||
import { Router, ActivatedRoute } from '@angular/router';
|
||||
|
||||
interface MenuItem {
|
||||
name: string;
|
||||
icon: SafeHtml;
|
||||
open?: boolean;
|
||||
route: string;
|
||||
active?: boolean;
|
||||
}
|
||||
|
||||
|
@ -31,6 +32,7 @@ export class DashboardRootComponent implements OnInit {
|
|||
public menuItems: MenuItem[] = [
|
||||
{
|
||||
name: 'Dashboard',
|
||||
route: '/dashboard',
|
||||
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="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
|
||||
|
@ -38,9 +40,19 @@ export class DashboardRootComponent implements OnInit {
|
|||
},
|
||||
];
|
||||
|
||||
public constructor(private sanitizer: DomSanitizer) {}
|
||||
public constructor(
|
||||
private readonly sanitizer: DomSanitizer,
|
||||
private readonly router: Router,
|
||||
private readonly route: ActivatedRoute
|
||||
) {}
|
||||
|
||||
public ngOnInit(): void {
|
||||
this.setActiveItemBasedOnRoute();
|
||||
this.router.events.subscribe(() => {
|
||||
console.log('router event');
|
||||
|
||||
this.setActiveItemBasedOnRoute();
|
||||
});
|
||||
this.onResize();
|
||||
}
|
||||
|
||||
|
@ -69,4 +81,19 @@ export class DashboardRootComponent implements OnInit {
|
|||
public toggleDesktopSidebar(): void {
|
||||
this.isDesktopCollapsed = !this.isDesktopCollapsed;
|
||||
}
|
||||
|
||||
public setActive(item: MenuItem): void {
|
||||
this.menuItems.forEach((menu: MenuItem) => {
|
||||
menu.active = false;
|
||||
});
|
||||
item.active = true;
|
||||
}
|
||||
|
||||
private setActiveItemBasedOnRoute(): void {
|
||||
const url = this.router.url;
|
||||
|
||||
this.menuItems.forEach((item: MenuItem) => {
|
||||
item.active = url.startsWith(item.route);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue