From 8862ff5cc46f0ae1605053844eb80ff37b694fa2 Mon Sep 17 00:00:00 2001
From: Igor Propisnov <info@igor-propisnov.com>
Date: Tue, 10 Sep 2024 13:47:05 +0200
Subject: [PATCH] added animation

---
 .../layout/main-layout/layout.component.html  | 14 +++++-
 .../layout/main-layout/layout.component.ts    | 43 +++++++++++++++++++
 2 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/layout/main-layout/layout.component.html b/frontend/src/app/layout/main-layout/layout.component.html
index 7346e4a..c6b1df0 100644
--- a/frontend/src/app/layout/main-layout/layout.component.html
+++ b/frontend/src/app/layout/main-layout/layout.component.html
@@ -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,
diff --git a/frontend/src/app/layout/main-layout/layout.component.ts b/frontend/src/app/layout/main-layout/layout.component.ts
index 0cf1a41..6eaa547 100644
--- a/frontend/src/app/layout/main-layout/layout.component.ts
+++ b/frontend/src/app/layout/main-layout/layout.component.ts
@@ -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 {