From 217afa9465fb42e67130c86220ce628d0f2c01d7 Mon Sep 17 00:00:00 2001
From: Igor Propisnov <info@igor-propisnov.com>
Date: Tue, 10 Sep 2024 15:10:32 +0200
Subject: [PATCH] added tool tip

---
 .../layout/main-layout/layout.component.html  | 124 ++++--------------
 1 file changed, 25 insertions(+), 99 deletions(-)

diff --git a/frontend/src/app/layout/main-layout/layout.component.html b/frontend/src/app/layout/main-layout/layout.component.html
index b83a5ed..e306d4f 100644
--- a/frontend/src/app/layout/main-layout/layout.component.html
+++ b/frontend/src/app/layout/main-layout/layout.component.html
@@ -123,7 +123,7 @@
         }">
         <aside class="h-full flex flex-col">
           <!-- Drawer-Inhalt -->
-          <div class="flex-1 overflow-y-auto pt-16 lg:pt-0">
+          <div class="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">
@@ -143,9 +143,20 @@
                       role="menuitem"
                       tabindex="0"
                       (click)="onLinkClick()">
+                      <div
+                        *ngIf="isCompact"
+                        class="tooltip tooltip-right"
+                        [attr.data-tip]="item.name"
+                        style="position: relative; z-index: 50">
+                        <!-- Positioning for tooltip -->
+                        <span
+                          class="flex-shrink-0 w-6 h-6"
+                          [ngClass]="{ 'mr-3': !isCompact }"
+                          [innerHTML]="item.icon"></span>
+                      </div>
                       <span
-                        class="flex-shrink-0 w-6 h-6"
-                        [ngClass]="{ 'mr-3': !isCompact }"
+                        *ngIf="!isCompact"
+                        class="flex-shrink-0 w-6 h-6 mr-3"
                         [innerHTML]="item.icon"></span>
                       <span class="flex-grow" *ngIf="!isCompact">
                         {{ item.name }}
@@ -222,100 +233,6 @@
                   </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 }}
-                      </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,
-                        'flex justify-center': isCompact
-                      }">
-                      <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 }}
-                      </span>
-                      <svg
-                        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 pl-8 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,
-                              'flex justify-center': isCompact
-                            }"
-                            role="menuitem"
-                            tabindex="0"
-                            (click)="onLinkClick()">
-                            <span
-                              class="flex-shrink-0 w-5 h-5"
-                              [ngClass]="{ 'mr-2': !isCompact }"
-                              [innerHTML]="subItem.icon"></span>
-                            {{ subItem.name }}
-                          </a>
-                        </li>
-                      </ul>
-                    </div>
-                  </ng-template>
-                </li>
-              </ng-container> -->
             </ul>
           </div>
           <hr class="border-t border-base-100" />
@@ -330,8 +247,17 @@
                     class="py-2 px-4 rounded flex items-center space-x-2 bg-base-300 text-base-content hover:text-primary hover:font-semibold w-full text-left"
                     role="menuitem"
                     tabindex="0">
-                    <span [innerHTML]="item.icon"></span>
-                    <span *ngIf="isDrawerOpen">{{ item.name }}</span>
+                    <div
+                      *ngIf="isCompact"
+                      class="tooltip tooltip-right"
+                      [attr.data-tip]="item.name"
+                      style="position: relative; z-index: 50">
+                      <span [innerHTML]="item.icon"></span>
+                    </div>
+                    <span [innerHTML]="item.icon" *ngIf="!isCompact"></span>
+                    <span *ngIf="!isCompact && isDrawerOpen">
+                      {{ item.name }}
+                    </span>
                   </button>
                 </li>
               </ng-container>