Feature: Create Event - First Step Frontend #17
|
@ -26,7 +26,13 @@ const protectedRoutes: Routes = [
|
|||
import('./pages/dashboard-root/dashboard-root.component').then(
|
||||
(m) => m.DashboardRootComponent
|
||||
),
|
||||
canActivate: [],
|
||||
},
|
||||
{
|
||||
path: 'event',
|
||||
loadComponent: () =>
|
||||
import('./pages/event-root/event-root.component').then(
|
||||
(m) => m.EventRootComponent
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
|
|
|
@ -3,18 +3,18 @@
|
|||
[ngStyle]="navigation"
|
||||
[class]="
|
||||
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
|
||||
? '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
|
||||
? 'bg-primary w-48 md:w-14 transition-all duration-300 ease-in-out'
|
||||
: 'bg-primary w-48 md:w-48 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 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">
|
||||
<div
|
||||
[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 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 space-x-4">
|
||||
@if (!isCollapsed && !isDesktopCollapsed) {
|
||||
|
@ -60,7 +60,8 @@
|
|||
class="cursor-pointer rounded-btn mt-2"
|
||||
[ngClass]="{
|
||||
'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)"
|
||||
(keydown.enter)="setActive(item)"
|
||||
|
@ -114,7 +115,7 @@
|
|||
<div class="flex flex-col flex-grow">
|
||||
<header
|
||||
[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">
|
||||
<label class="btn btn-ghost swap swap-rotate">
|
||||
<input
|
||||
|
@ -144,6 +145,9 @@
|
|||
</header>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -38,7 +38,6 @@ export class LayoutComponent implements OnInit {
|
|||
public isCollapsed: boolean = false;
|
||||
public isDesktopCollapsed: boolean = false;
|
||||
public showMobileMenu: boolean = false;
|
||||
public userHasInteracted: boolean = false;
|
||||
public menuItems: TopMenuItem[] = [
|
||||
{
|
||||
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" />
|
||||
</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[] = [
|
||||
{
|
||||
|
@ -134,7 +141,6 @@ export class LayoutComponent implements OnInit {
|
|||
} else {
|
||||
this.isDesktopCollapsed = !this.isDesktopCollapsed;
|
||||
}
|
||||
this.userHasInteracted = true;
|
||||
}
|
||||
|
||||
public toggleDesktopSidebar(): void {
|
||||
|
@ -145,7 +151,10 @@ export class LayoutComponent implements OnInit {
|
|||
this.menuItems.forEach((menu: TopMenuItem) => {
|
||||
menu.active = false;
|
||||
});
|
||||
item.active = true;
|
||||
this.router.navigate([item.route]);
|
||||
if (!this.isCollapsed && this.showMobileMenu) {
|
||||
this.toggleSidebar();
|
||||
}
|
||||
}
|
||||
|
||||
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