From da92256699853e00d80af4b04f94ad2c44d56a4b Mon Sep 17 00:00:00 2001
From: Igor Propisnov <info@igor-propisnov.com>
Date: Tue, 10 Sep 2024 16:46:20 +0200
Subject: [PATCH] w.i.p

---
 .../layout/main-layout/layout.component.html  | 297 ++++++++++++------
 1 file changed, 200 insertions(+), 97 deletions(-)

diff --git a/frontend/src/app/layout/main-layout/layout.component.html b/frontend/src/app/layout/main-layout/layout.component.html
index 81ef160..83ddb7b 100644
--- a/frontend/src/app/layout/main-layout/layout.component.html
+++ b/frontend/src/app/layout/main-layout/layout.component.html
@@ -123,112 +123,209 @@
         }">
         <aside class="h-full flex flex-col">
           <!-- Drawer-Inhalt -->
-          <div class="flex-1 pt-16 lg:pt-0">
+          <div class="relative flex-1 pt-16 lg:pt-0">
             <ul class="w-full p-0 m-0 [&_li>*]:rounded-none">
               <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"
+                    <div
                       [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
+                        'tooltip tooltip-right  w-full': isCompact
                       }"
-                      role="menuitem"
-                      tabindex="0"
-                      (click)="onLinkClick()">
+                      [attr.data-tip]="item.name">
+                      <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,
+                          'justify-center': isCompact,
+                          'px-4': !isCompact
+                        }"
+                        role="menuitem"
+                        tabindex="0"
+                        (click)="onLinkClick()">
+                        <!-- Icon für Compact Mode -->
+                        <span
+                          *ngIf="isCompact"
+                          class="flex-shrink-0 w-6 h-6"
+                          [innerHTML]="item.icon"></span>
+
+                        <!-- Icon und Text für normalen Modus -->
+                        <span
+                          *ngIf="!isCompact"
+                          class="flex items-center space-x-2">
+                          <span
+                            class="flex-shrink-0 w-6 h-6 mr-3"
+                            [innerHTML]="item.icon"></span>
+                          <span>{{ item.name }}</span>
+                        </span>
+                      </a>
+                    </div>
+                  </ng-container>
+
+                  <ng-template #submenu>
+                    <!-- Wrapper für Submenu im Compact Mode -->
+                    <div
+                      *ngIf="isCompact"
+                      [ngClass]="{
+                        'tooltip tooltip-right w-full': isCompact
+                      }"
+                      [attr.data-tip]="item.name"
+                      class="relative">
+                      <!-- Hauptcontainer für den Menüpunkt -->
                       <div
-                        *ngIf="isCompact"
-                        class="tooltip tooltip-right"
-                        [attr.data-tip]="item.name"
-                        style="position: relative; z-index: 50">
-                        <!-- Positioning for tooltip -->
+                        (click)="toggleSubmenu(item, $event)"
+                        (keydown.enter)="toggleSubmenu(item, $event)"
+                        (keydown.space)="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
+                        }"
+                        role="button"
+                        tabindex="0"
+                        [attr.aria-expanded]="item.isOpen">
+                        <span
+                          class="flex-shrink-0 w-6 h-6"
+                          [innerHTML]="item.icon"
+                          aria-hidden="true"></span>
+
+                        <!-- Normale Darstellung für nicht Compact Mode -->
+                        <span
+                          *ngIf="!isCompact"
+                          class="flex items-center space-x-2">
+                          <span
+                            class="flex-shrink-0 w-6 h-6 mr-3"
+                            [innerHTML]="item.icon"
+                            aria-hidden="true"></span>
+                          <span>{{ item.name }}</span>
+                        </span>
+
+                        <!-- Pfeil-Icon für normalen Modus -->
+                        <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"
+                          aria-hidden="true">
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+                        </svg>
+                      </div>
+
+                      <!-- Submenu Box nur im Compact Mode -->
+                      <div
+                        *ngIf="isCompact && item.isOpen"
+                        class="absolute left-16 border-2 border-base-300 mx-0.5 bg-base-100 text-base-content"
+                        style="top: 0; z-index: 50; width: 200px">
+                        <div
+                          [ngClass]="{
+                            'bg-base-100': item.active,
+                            'text-base-content': item.active,
+                            'text-primary': item.active,
+                            'font-semibold': item.active
+                          }"
+                          class="font-semibold bg-base-300 px-2 py-[11px]">
+                          {{ item.name }}
+                        </div>
+
+                        <ul>
+                          <li *ngFor="let subItem of item.subitems">
+                            <a
+                              [routerLink]="subItem.route"
+                              [class.active]="subItem.active"
+                              class="block py-2 px-2 rounded transition-colors duration-200 ease-in-out hover:bg-base-200 hover:text-primary"
+                              [ngClass]="{
+                                'bg-base-300': subItem.active,
+                                'text-primary': subItem.active,
+                                'font-semibold': subItem.active
+                              }"
+                              (click)="onLinkClick()">
+                              {{ subItem.name }}
+                            </a>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+
+                    <!-- Original Submenu für normalen Modus -->
+                    <div *ngIf="!isCompact" class="overflow-hidden">
+                      <div
+                        (click)="toggleSubmenu(item, $event)"
+                        (keydown.enter)="toggleSubmenu(item, $event)"
+                        (keydown.space)="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
+                        }"
+                        role="button"
+                        tabindex="0"
+                        [attr.aria-expanded]="item.isOpen"
+                        [attr.aria-controls]="'submenu-' + item.name">
                         <span
                           class="flex-shrink-0 w-6 h-6"
                           [ngClass]="{ 'mr-3': !isCompact }"
-                          [innerHTML]="item.icon"></span>
+                          [innerHTML]="item.icon"
+                          aria-hidden="true"></span>
+                        <span class="flex-grow">{{ 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"
+                          aria-hidden="true">
+                          <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">
+                            <a
+                              [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 text-base-content focus:outline-none hover:bg-base-300 hover:text-primary"
+                              [ngClass]="{
+                                'bg-base-300': subItem.active,
+                                'text-primary': subItem.active,
+                                'font-semibold': subItem.active
+                              }"
+                              (click)="onLinkClick()">
+                              <span
+                                class="flex-shrink-0 w-5 h-5 mr-2"
+                                [innerHTML]="subItem.icon"></span>
+                              {{ subItem.name }}
+                            </a>
+                          </li>
+                        </ul>
                       </div>
-                      <span
-                        *ngIf="!isCompact"
-                        class="flex-shrink-0 w-6 h-6 mr-3"
-                        [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>
@@ -248,7 +345,7 @@
                     tabindex="0">
                     <div
                       *ngIf="isCompact"
-                      class="tooltip tooltip-right"
+                      class="tooltip tooltip-right pr-4"
                       [attr.data-tip]="item.name">
                       <span [innerHTML]="item.icon"></span>
                     </div>
@@ -269,7 +366,13 @@
         [@backdropAnimation]="isDrawerOpen && !isCompact ? 'visible' : 'hidden'"
         *ngIf="isDrawerOpen && !isCompact && isMobile"
         class="fixed inset-0 bg-black bg-opacity-50 z-20"
-        (click)="toggleDrawer()"></div>
+        (click)="toggleDrawer()"
+        (keydown.escape)="toggleDrawer()"
+        tabindex="0"
+        role="button"
+        aria-label="Close drawer"
+        (keydown.enter)="toggleDrawer()"
+        (keydown.space)="toggleDrawer()"></div>
 
       <!-- Hauptinhalt -->
       <div