From 46caa71549e463022ca43bb914742608cc023074 Mon Sep 17 00:00:00 2001
From: Igor Propisnov <info@igor-propisnov.com>
Date: Tue, 10 Sep 2024 14:49:52 +0200
Subject: [PATCH] added animations

---
 .../layout/main-layout/layout.component.html  | 248 +++++++++++++++---
 .../layout/main-layout/layout.component.ts    |  23 +-
 2 files changed, 227 insertions(+), 44 deletions(-)

diff --git a/frontend/src/app/layout/main-layout/layout.component.html b/frontend/src/app/layout/main-layout/layout.component.html
index 8af729a..b83a5ed 100644
--- a/frontend/src/app/layout/main-layout/layout.component.html
+++ b/frontend/src/app/layout/main-layout/layout.component.html
@@ -12,36 +12,89 @@
         <button
           (click)="toggleDrawer()"
           class="btn btn-square btn-ghost drawer-button">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            class="inline-block w-6 h-6 stroke-current">
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
+          <div
+            [@burgerAnimation]="isDrawerOpen ? 'open' : 'closed'"
+            class="w-6 h-6">
+            <svg
+              *ngIf="!isDrawerOpen"
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
               stroke-width="2"
-              d="M4 6h16M4 12h16M4 18h16"></path>
-          </svg>
+              stroke-linecap="round"
+              stroke-linejoin="round">
+              <line x1="3" y1="12" x2="21" y2="12"></line>
+              <line x1="3" y1="6" x2="21" y2="6"></line>
+              <line x1="3" y1="18" x2="21" y2="18"></line>
+            </svg>
+            <svg
+              *ngIf="isDrawerOpen"
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </div>
         </button>
       </div>
 
       <!-- Compact Mode Toggle Button für Desktop -->
       <div class="hidden lg:flex items-center space-x-2 mr-4">
         <button (click)="toggleCompactMode()" class="btn btn-square btn-ghost">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="inline-block w-6 h-6">
-            <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
-            <line x1="9" y1="3" x2="9" y2="21" />
-            <path d="M13 8l3 3-3 3" />
-          </svg>
+          <div
+            [@compactAnimation]="isCompact ? 'compact' : 'normal'"
+            class="relative w-6 h-6">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="absolute inset-0 w-6 h-6">
+              <!-- Sidebar outline -->
+              <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+
+              <!-- Icon representation -->
+              <circle cx="7" cy="8" r="1" />
+              <circle cx="7" cy="12" r="1" />
+              <circle cx="7" cy="16" r="1" />
+
+              <!-- Text representation -->
+              <line
+                x1="11"
+                y1="8"
+                x2="19"
+                y2="8"
+                class="transition-opacity duration-300"
+                [class.opacity-0]="isCompact" />
+              <line
+                x1="11"
+                y1="12"
+                x2="19"
+                y2="12"
+                class="transition-opacity duration-300"
+                [class.opacity-0]="isCompact" />
+              <line
+                x1="11"
+                y1="16"
+                x2="19"
+                y2="16"
+                class="transition-opacity duration-300"
+                [class.opacity-0]="isCompact" />
+            </svg>
+          </div>
         </button>
       </div>
     </header>
@@ -79,15 +132,116 @@
                       [routerLink]="item.route"
                       [class.active]="item.active"
                       class="flex items-center w-full px-4 py-3 transition-colors duration-200 ease-in-out focus:outline-none hover:bg-base-300 hover:text-primary"
-                      [class.bg-base-100]="item.active"
-                      [class.text-base-content]="item.active"
-                      [class.text-primary]="item.active"
-                      [class.font-semibold]="item.active"
+                      [ngClass]="{
+                        'bg-base-100': item.active,
+                        'text-base-content': item.active,
+                        'text-primary': item.active,
+                        'font-semibold': item.active,
+                        'justify-center': isCompact,
+                        'px-4': !isCompact
+                      }"
                       role="menuitem"
                       tabindex="0"
                       (click)="onLinkClick()">
                       <span
-                        class="flex-shrink-0 w-6 h-6 mr-3"
+                        class="flex-shrink-0 w-6 h-6"
+                        [ngClass]="{ 'mr-3': !isCompact }"
+                        [innerHTML]="item.icon"></span>
+                      <span class="flex-grow" *ngIf="!isCompact">
+                        {{ item.name }}
+                      </span>
+                    </a>
+                  </ng-container>
+                  <ng-template #submenu>
+                    <div
+                      (click)="toggleSubmenu(item, $event)"
+                      class="flex items-center w-full px-4 py-3 transition-colors duration-200 ease-in-out focus:outline-none hover:bg-base-300 hover:text-primary cursor-pointer"
+                      [ngClass]="{
+                        'bg-base-300': item.active,
+                        'text-primary': item.active,
+                        'font-semibold': item.active,
+                        'bg-base-100': item.isOpen,
+                        'text-base-content': item.isOpen,
+                        'justify-center': isCompact,
+                        'px-4': !isCompact
+                      }">
+                      <span
+                        class="flex-shrink-0 w-6 h-6"
+                        [ngClass]="{ 'mr-3': !isCompact }"
+                        [innerHTML]="item.icon"></span>
+                      <span class="flex-grow" *ngIf="!isCompact">
+                        {{ item.name }}
+                      </span>
+                      <svg
+                        *ngIf="!isCompact"
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke-width="1.5"
+                        stroke="currentColor"
+                        class="w-4 h-4 transition-transform"
+                        [class.rotate-180]="item.isOpen">
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+                      </svg>
+                    </div>
+                    <div
+                      [@submenuAnimation]="item.isOpen ? 'open' : 'closed'"
+                      class="overflow-hidden">
+                      <ul class="bg-base-100">
+                        <li
+                          *ngFor="let subItem of item.subitems"
+                          class="w-full">
+                          <a
+                            [routerLink]="subItem.route"
+                            [class.active]="subItem.active"
+                            class="flex items-center w-full px-4 py-2 transition-colors duration-200 ease-in-out focus:outline-none hover:bg-base-300 hover:text-primary"
+                            [ngClass]="{
+                              'bg-base-300': subItem.active,
+                              'text-primary': subItem.active,
+                              'font-semibold': subItem.active,
+                              'bg-base-100': item.isOpen,
+                              'text-base-content': item.isOpen,
+                              'justify-center': isCompact,
+                              'px-4 pl-8': !isCompact
+                            }"
+                            role="menuitem"
+                            tabindex="0"
+                            (click)="onLinkClick()">
+                            <span
+                              class="flex-shrink-0 w-5 h-5"
+                              [ngClass]="{ 'mr-2': !isCompact }"
+                              [innerHTML]="subItem.icon"></span>
+                            <span *ngIf="!isCompact">{{ subItem.name }}</span>
+                          </a>
+                        </li>
+                      </ul>
+                    </div>
+                  </ng-template>
+                </li>
+              </ng-container>
+              <!-- <ng-container *ngFor="let item of menuItems">
+                <li class="w-full">
+                  <ng-container *ngIf="!item.subitems; else submenu">
+                    <a
+                      [routerLink]="item.route"
+                      [class.active]="item.active"
+                      class="flex items-center w-full px-4 py-3 transition-colors duration-200 ease-in-out focus:outline-none hover:bg-base-300 hover:text-primary"
+                      [ngClass]="{
+                        'bg-base-100': item.active,
+                        'text-base-content': item.active,
+                        'text-primary': item.active,
+                        'font-semibold': item.active,
+                        'flex justify-center': isCompact
+                      }"
+                      role="menuitem"
+                      tabindex="0"
+                      (click)="onLinkClick()">
+                      <span
+                        class="flex-shrink-0 w-6 h-6"
+                        [ngClass]="{ 'mr-3': !isCompact }"
                         [innerHTML]="item.icon"></span>
                       <span class="flex-grow" *ngIf="isDrawerOpen">
                         {{ item.name }}
@@ -99,13 +253,17 @@
                     <div
                       (click)="toggleSubmenu(item, $event)"
                       class="flex items-center w-full px-4 py-3 transition-colors duration-200 ease-in-out focus:outline-none hover:bg-base-300 hover:text-primary cursor-pointer"
-                      [class.bg-base-300]="item.active"
-                      [class.text-primary]="item.active"
-                      [class.font-semibold]="item.active"
-                      [class.bg-base-100]="item.isOpen"
-                      [class.text-base-content]="item.isOpen">
+                      [ngClass]="{
+                        'bg-base-300': item.active,
+                        'text-primary': item.active,
+                        'font-semibold': item.active,
+                        'bg-base-100': item.isOpen,
+                        'text-base-content': item.isOpen,
+                        'flex justify-center': isCompact
+                      }">
                       <span
-                        class="flex-shrink-0 w-6 h-6 mr-3"
+                        class="flex-shrink-0 w-6 h-6"
+                        [ngClass]="{ 'mr-3': !isCompact }"
                         [innerHTML]="item.icon"></span>
                       <span class="flex-grow" *ngIf="isDrawerOpen">
                         {{ item.name }}
@@ -135,16 +293,20 @@
                             [routerLink]="subItem.route"
                             [class.active]="subItem.active"
                             class="flex items-center w-full px-4 pl-8 py-2 transition-colors duration-200 ease-in-out focus:outline-none hover:bg-base-300 hover:text-primary"
-                            [class.bg-base-300]="subItem.active"
-                            [class.text-primary]="subItem.active"
-                            [class.font-semibold]="subItem.active"
-                            [class.bg-base-100]="item.isOpen"
-                            [class.text-base-content]="item.isOpen"
+                            [ngClass]="{
+                              'bg-base-300': subItem.active,
+                              'text-primary': subItem.active,
+                              'font-semibold': subItem.active,
+                              'bg-base-100': item.isOpen,
+                              'text-base-content': item.isOpen,
+                              'flex justify-center': isCompact
+                            }"
                             role="menuitem"
                             tabindex="0"
                             (click)="onLinkClick()">
                             <span
-                              class="flex-shrink-0 w-5 h-5 mr-2"
+                              class="flex-shrink-0 w-5 h-5"
+                              [ngClass]="{ 'mr-2': !isCompact }"
                               [innerHTML]="subItem.icon"></span>
                             {{ subItem.name }}
                           </a>
@@ -153,13 +315,13 @@
                     </div>
                   </ng-template>
                 </li>
-              </ng-container>
+              </ng-container> -->
             </ul>
           </div>
           <hr class="border-t border-base-100" />
 
-          <div style="background-color: rgba(0, 0, 0, 0.2)">
-            <ul class="w-full px-2 py-4">
+          <div style="background-color: rgba(0, 0, 0, 0.25)">
+            <ul class="w-full px-2 py-2">
               <ng-container *ngFor="let item of bottomMenuItems">
                 <li>
                   <button
diff --git a/frontend/src/app/layout/main-layout/layout.component.ts b/frontend/src/app/layout/main-layout/layout.component.ts
index 6eaa547..fb858b0 100644
--- a/frontend/src/app/layout/main-layout/layout.component.ts
+++ b/frontend/src/app/layout/main-layout/layout.component.ts
@@ -59,6 +59,26 @@ interface BottomMenuItem {
   templateUrl: './layout.component.html',
   changeDetection: ChangeDetectionStrategy.Default,
   animations: [
+    trigger('compactAnimation', [
+      state(
+        'normal',
+        style({
+          transform: 'scaleX(1)',
+        })
+      ),
+      state(
+        'compact',
+        style({
+          transform: 'scaleX(1)',
+        })
+      ),
+      transition('normal <=> compact', [animate('300ms ease-in-out')]),
+    ]),
+    trigger('burgerAnimation', [
+      state('closed', style({ transform: 'rotate(0deg)' })),
+      state('open', style({ transform: 'rotate(180deg)' })),
+      transition('closed <=> open', [animate('0.3s ease-in-out')]),
+    ]),
     trigger('submenuAnimation', [
       state(
         'closed',
@@ -95,7 +115,7 @@ interface BottomMenuItem {
           width: '0',
         })
       ),
-      transition('closed <=> open', [animate('300ms ease-in-out')]),
+      transition('closed <=> open', [animate('200ms ease-in-out')]),
       transition('open <=> compact', [animate('200ms ease-in-out')]),
       transition('compact <=> closed', [animate('200ms ease-in-out')]),
     ]),
@@ -234,6 +254,7 @@ export class LayoutComponent implements OnInit, OnDestroy {
   public onLinkClick(): void {
     if (window.innerWidth < 1024 && this.isDrawerOpen) {
       this.isDrawerOpen = false;
+      this.isCompact = true;
     }
   }