feature/refactor-login #19
|
@ -48,6 +48,15 @@
|
|||
<div class="flex-1 flex overflow-hidden">
|
||||
<!-- Drawer -->
|
||||
<div
|
||||
[@drawerAnimation]="
|
||||
isDrawerOpen
|
||||
? isCompact
|
||||
? 'compact'
|
||||
: 'open'
|
||||
: isCompact
|
||||
? 'compact'
|
||||
: 'closed'
|
||||
"
|
||||
class="h-full transition-transform duration-300 ease-in-out bg-primary text-primary-content flex flex-col lg:translate-x-0"
|
||||
[ngClass]="{
|
||||
'w-16': isCompact && !isDrawerOpen,
|
||||
|
@ -167,15 +176,18 @@
|
|||
</aside>
|
||||
</div>
|
||||
|
||||
<!-- Backdrop -->
|
||||
<!-- Backdrop -->
|
||||
<div
|
||||
[@backdropAnimation]="isDrawerOpen && !isCompact ? 'visible' : 'hidden'"
|
||||
*ngIf="isDrawerOpen && !isCompact && isMobile"
|
||||
class="fixed inset-0 bg-black bg-opacity-50 z-20"
|
||||
(click)="toggleDrawer()"></div>
|
||||
|
||||
<!-- Hauptinhalt -->
|
||||
<div
|
||||
[@mainContentAnimation]="
|
||||
isCompact && !isDrawerOpen ? 'shifted' : 'normal'
|
||||
"
|
||||
class="flex-1 overflow-y-auto p-4 bg-base-100"
|
||||
[ngClass]="{
|
||||
'lg:ml-16': isCompact && !isDrawerOpen,
|
||||
|
|
|
@ -76,6 +76,49 @@ interface BottomMenuItem {
|
|||
),
|
||||
transition('closed <=> open', [animate('200ms ease-in-out')]),
|
||||
]),
|
||||
trigger('drawerAnimation', [
|
||||
state(
|
||||
'open',
|
||||
style({
|
||||
width: '16rem', // 256px
|
||||
})
|
||||
),
|
||||
state(
|
||||
'compact',
|
||||
style({
|
||||
width: '4rem', // 64px
|
||||
})
|
||||
),
|
||||
state(
|
||||
'closed',
|
||||
style({
|
||||
width: '0',
|
||||
})
|
||||
),
|
||||
transition('closed <=> open', [animate('300ms ease-in-out')]),
|
||||
transition('open <=> compact', [animate('200ms ease-in-out')]),
|
||||
transition('compact <=> closed', [animate('200ms ease-in-out')]),
|
||||
]),
|
||||
trigger('backdropAnimation', [
|
||||
state('visible', style({ opacity: 1 })),
|
||||
state('hidden', style({ opacity: 0 })),
|
||||
transition('hidden <=> visible', [animate('200ms ease-in-out')]),
|
||||
]),
|
||||
trigger('mainContentAnimation', [
|
||||
state(
|
||||
'shifted',
|
||||
style({
|
||||
marginLeft: '4rem',
|
||||
})
|
||||
),
|
||||
state(
|
||||
'normal',
|
||||
style({
|
||||
marginLeft: '0',
|
||||
})
|
||||
),
|
||||
transition('shifted <=> normal', [animate('200ms ease-in-out')]),
|
||||
]),
|
||||
],
|
||||
})
|
||||
export class LayoutComponent implements OnInit, OnDestroy {
|
||||
|
|
Loading…
Reference in New Issue