added shadow, and new root page for event managment
This commit is contained in:
parent
2447019b11
commit
44c163703c
|
@ -26,7 +26,13 @@ const protectedRoutes: Routes = [
|
||||||
import('./pages/dashboard-root/dashboard-root.component').then(
|
import('./pages/dashboard-root/dashboard-root.component').then(
|
||||||
(m) => m.DashboardRootComponent
|
(m) => m.DashboardRootComponent
|
||||||
),
|
),
|
||||||
canActivate: [],
|
},
|
||||||
|
{
|
||||||
|
path: 'event',
|
||||||
|
loadComponent: () =>
|
||||||
|
import('./pages/event-root/event-root.component').then(
|
||||||
|
(m) => m.EventRootComponent
|
||||||
|
),
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
@ -3,18 +3,18 @@
|
||||||
[ngStyle]="navigation"
|
[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 shadow-[5px_0_20px_rgba(0,0,0,0.5)]'
|
||||||
: showMobileMenu
|
: showMobileMenu
|
||||||
? 'bg-primary w-64 transition-all duration-300 ease-in-out'
|
? 'bg-primary w-64 transition-all duration-300 ease-in-out shadow-[5px_0_20px_rgba(0,0,0,0.5)]'
|
||||||
: isDesktopCollapsed
|
: isDesktopCollapsed
|
||||||
? 'bg-primary w-48 md:w-14 transition-all duration-300 ease-in-out'
|
? 'bg-primary w-48 md:w-14 transition-all duration-300 ease-in-out shadow-[5px_0_20px_rgba(0,0,0,0.5)]'
|
||||||
: 'bg-primary w-48 md:w-48 transition-all duration-300 ease-in-out'
|
: 'bg-primary w-48 md:w-48 transition-all duration-300 ease-in-out shadow-[5px_0_20px_rgba(0,0,0,0.5)]'
|
||||||
"
|
"
|
||||||
class="transform h-full z-20 overflow-y-auto fixed md:relative flex flex-col">
|
class="transform h-full z-20 overflow-y-auto fixed md:relative flex flex-col">
|
||||||
<div
|
<div
|
||||||
[ngClass]="showMobileMenu ? 'justify-center' : 'justify-between'"
|
[ngClass]="showMobileMenu ? 'justify-center' : 'justify-between'"
|
||||||
[ngStyle]="navigation"
|
[ngStyle]="navigation"
|
||||||
class="p-1 w-full h-16 bg-base-100 flex items-center relative">
|
class="p-1 w-full h-16 z-50 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">
|
||||||
@if (!isCollapsed && !isDesktopCollapsed) {
|
@if (!isCollapsed && !isDesktopCollapsed) {
|
||||||
|
@ -60,7 +60,8 @@
|
||||||
class="cursor-pointer rounded-btn mt-2"
|
class="cursor-pointer rounded-btn mt-2"
|
||||||
[ngClass]="{
|
[ngClass]="{
|
||||||
'bg-base-100 text-primary': item.active,
|
'bg-base-100 text-primary': item.active,
|
||||||
'text-primary-content hover:text-base-content': !item.active
|
'text-primary-content hover:text-accent-content hover:bg-accent':
|
||||||
|
!item.active
|
||||||
}"
|
}"
|
||||||
(click)="setActive(item)"
|
(click)="setActive(item)"
|
||||||
(keydown.enter)="setActive(item)"
|
(keydown.enter)="setActive(item)"
|
||||||
|
@ -114,7 +115,7 @@
|
||||||
<div class="flex flex-col flex-grow">
|
<div class="flex flex-col flex-grow">
|
||||||
<header
|
<header
|
||||||
[ngStyle]="navigation"
|
[ngStyle]="navigation"
|
||||||
class="p-4 bg-primary text-primary-content flex items-center h-16">
|
class="p-4 z-0 md:z-20 relative bg-primary text-primary-content flex items-center h-16 shadow-[0_5px_20px_rgba(0,0,0,0.5)]">
|
||||||
<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
|
||||||
|
@ -144,6 +145,9 @@
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div [ngStyle]="mainContent" class="px-8 py-4 flex-grow text-2xl p-4">
|
<div [ngStyle]="mainContent" class="px-8 py-4 flex-grow text-2xl p-4">
|
||||||
|
<p>isCollapsed: {{ isCollapsed }}</p>
|
||||||
|
<P>isDesktopCollapsed: {{ isDesktopCollapsed }}</P>
|
||||||
|
<P>showMobileMenu: {{ showMobileMenu }}</P>
|
||||||
<router-outlet></router-outlet>
|
<router-outlet></router-outlet>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -38,7 +38,6 @@ export class LayoutComponent implements OnInit {
|
||||||
public isCollapsed: boolean = false;
|
public isCollapsed: boolean = false;
|
||||||
public isDesktopCollapsed: boolean = false;
|
public isDesktopCollapsed: boolean = false;
|
||||||
public showMobileMenu: boolean = false;
|
public showMobileMenu: boolean = false;
|
||||||
public userHasInteracted: boolean = false;
|
|
||||||
public menuItems: TopMenuItem[] = [
|
public menuItems: TopMenuItem[] = [
|
||||||
{
|
{
|
||||||
name: 'Dashboard',
|
name: 'Dashboard',
|
||||||
|
@ -48,6 +47,14 @@ export class LayoutComponent implements OnInit {
|
||||||
<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" />
|
<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" />
|
||||||
</svg>`),
|
</svg>`),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: 'Event',
|
||||||
|
route: '/event',
|
||||||
|
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="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 0 1 0 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 0 1 0-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375Z" />
|
||||||
|
</svg>`),
|
||||||
|
},
|
||||||
];
|
];
|
||||||
public bottomMenuItems: BottomMenuItem[] = [
|
public bottomMenuItems: BottomMenuItem[] = [
|
||||||
{
|
{
|
||||||
|
@ -134,7 +141,6 @@ export class LayoutComponent implements OnInit {
|
||||||
} else {
|
} else {
|
||||||
this.isDesktopCollapsed = !this.isDesktopCollapsed;
|
this.isDesktopCollapsed = !this.isDesktopCollapsed;
|
||||||
}
|
}
|
||||||
this.userHasInteracted = true;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public toggleDesktopSidebar(): void {
|
public toggleDesktopSidebar(): void {
|
||||||
|
@ -145,7 +151,10 @@ export class LayoutComponent implements OnInit {
|
||||||
this.menuItems.forEach((menu: TopMenuItem) => {
|
this.menuItems.forEach((menu: TopMenuItem) => {
|
||||||
menu.active = false;
|
menu.active = false;
|
||||||
});
|
});
|
||||||
item.active = true;
|
this.router.navigate([item.route]);
|
||||||
|
if (!this.isCollapsed && this.showMobileMenu) {
|
||||||
|
this.toggleSidebar();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private setActiveItemBasedOnRoute(): void {
|
private setActiveItemBasedOnRoute(): void {
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
<h1>Event Root Works</h1>
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { Component, ChangeDetectionStrategy } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-event-root',
|
||||||
|
standalone: true,
|
||||||
|
imports: [CommonModule],
|
||||||
|
providers: [],
|
||||||
|
templateUrl: './event-root.component.html',
|
||||||
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
|
})
|
||||||
|
export class EventRootComponent {}
|
Loading…
Reference in New Issue