added tool tip
This commit is contained in:
parent
46caa71549
commit
217afa9465
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue