Basic Dashboard #14
|
@ -1 +1,41 @@
|
||||||
<h1>Hello World</h1>
|
<div class="flex h-screen overflow-hidden">
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<div
|
||||||
|
[class]="
|
||||||
|
isCollapsed
|
||||||
|
? 'bg-primary w-20 transition-all duration-300 ease-in-out'
|
||||||
|
: 'bg-primary w-48 transition-all duration-300 ease-in-out'
|
||||||
|
"
|
||||||
|
class="transform">
|
||||||
|
<div class="p-5 text-primary-content">Logo</div>
|
||||||
|
<ul>
|
||||||
|
<li class="p-4" *ngFor="let item of menuItems">
|
||||||
|
<span class="cursor-pointer text-primary-content" *ngIf="isCollapsed">
|
||||||
|
{{ item.icon }}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="cursor-pointer text-primary-content"
|
||||||
|
*ngIf="!isCollapsed"
|
||||||
|
(click)="toggleSubMenu(item)">
|
||||||
|
{{ item.name }}
|
||||||
|
</span>
|
||||||
|
<ul
|
||||||
|
*ngIf="!isCollapsed && item.open"
|
||||||
|
class="transition-all duration-300 ease-in-out">
|
||||||
|
<li
|
||||||
|
class="pl-8 py-2 cursor-pointer text-primary-content"
|
||||||
|
*ngFor="let subItem of item.subItems">
|
||||||
|
{{ subItem }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- Toggle Button -->
|
||||||
|
<button class="p-2 text-xl" (click)="toggleSidebar()">
|
||||||
|
{{ isCollapsed ? '👉' : '👈' }}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Main content -->
|
||||||
|
<div class="flex-1 p-10 text-2xl font-bold">Hauptinhalt hier</div>
|
||||||
|
</div>
|
||||||
|
|
|
@ -1,14 +1,64 @@
|
||||||
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
import { CommonModule } from '@angular/common';
|
||||||
|
import {
|
||||||
|
ChangeDetectionStrategy,
|
||||||
|
Component,
|
||||||
|
HostListener,
|
||||||
|
} from '@angular/core';
|
||||||
|
|
||||||
|
interface MenuItem {
|
||||||
|
name: string;
|
||||||
|
icon: string;
|
||||||
|
subItems: string[];
|
||||||
|
open?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-dashboard-root',
|
selector: 'app-dashboard-root',
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [],
|
imports: [CommonModule],
|
||||||
providers: [],
|
providers: [],
|
||||||
templateUrl: './dashboard-root.component.html',
|
templateUrl: './dashboard-root.component.html',
|
||||||
styleUrl: './dashboard-root.component.scss',
|
styleUrl: './dashboard-root.component.scss',
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
})
|
})
|
||||||
export class DashboardRootComponent {
|
export class DashboardRootComponent {
|
||||||
|
public isCollapsed: boolean = false;
|
||||||
|
public showMobileMenu: boolean = false;
|
||||||
|
public userHasInteracted: boolean = false;
|
||||||
|
public menuItems: MenuItem[] = [
|
||||||
|
{ name: 'Home', icon: '🏠', subItems: [] },
|
||||||
|
{ name: 'About', icon: 'ℹ️', subItems: [] },
|
||||||
|
{
|
||||||
|
name: 'Services',
|
||||||
|
icon: '🛠️',
|
||||||
|
subItems: ['Web Design', 'SEO', 'Development'],
|
||||||
|
open: false,
|
||||||
|
},
|
||||||
|
{ name: 'Contact', icon: '📞', subItems: [] },
|
||||||
|
];
|
||||||
|
|
||||||
public constructor() {}
|
public constructor() {}
|
||||||
|
|
||||||
|
@HostListener('window:resize', ['$event'])
|
||||||
|
public onResize(): void {
|
||||||
|
if (!this.userHasInteracted) {
|
||||||
|
this.isCollapsed = window.innerWidth < 768;
|
||||||
|
} else {
|
||||||
|
if (window.innerWidth > 768) {
|
||||||
|
this.isCollapsed = false;
|
||||||
|
this.userHasInteracted = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public toggleSidebar(): void {
|
||||||
|
this.isCollapsed = !this.isCollapsed;
|
||||||
|
this.userHasInteracted = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
public toggleSubMenu(item: any): void {
|
||||||
|
if (item.subItems.length) {
|
||||||
|
item.open = !item.open;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue