w.i.p
This commit is contained in:
parent
98ce43781b
commit
da92256699
|
|
@ -123,112 +123,209 @@
|
||||||
}">
|
}">
|
||||||
<aside class="h-full flex flex-col">
|
<aside class="h-full flex flex-col">
|
||||||
<!-- Drawer-Inhalt -->
|
<!-- 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">
|
<ul class="w-full p-0 m-0 [&_li>*]:rounded-none">
|
||||||
<ng-container *ngFor="let item of menuItems">
|
<ng-container *ngFor="let item of menuItems">
|
||||||
<li class="w-full">
|
<li class="w-full">
|
||||||
<ng-container *ngIf="!item.subitems; else submenu">
|
<ng-container *ngIf="!item.subitems; else submenu">
|
||||||
<a
|
<div
|
||||||
[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]="{
|
[ngClass]="{
|
||||||
'bg-base-100': item.active,
|
'tooltip tooltip-right w-full': isCompact
|
||||||
'text-base-content': item.active,
|
|
||||||
'text-primary': item.active,
|
|
||||||
'font-semibold': item.active,
|
|
||||||
'justify-center': isCompact,
|
|
||||||
'px-4': !isCompact
|
|
||||||
}"
|
}"
|
||||||
role="menuitem"
|
[attr.data-tip]="item.name">
|
||||||
tabindex="0"
|
<a
|
||||||
(click)="onLinkClick()">
|
[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
|
<div
|
||||||
*ngIf="isCompact"
|
(click)="toggleSubmenu(item, $event)"
|
||||||
class="tooltip tooltip-right"
|
(keydown.enter)="toggleSubmenu(item, $event)"
|
||||||
[attr.data-tip]="item.name"
|
(keydown.space)="toggleSubmenu(item, $event)"
|
||||||
style="position: relative; z-index: 50">
|
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"
|
||||||
<!-- Positioning for tooltip -->
|
[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
|
<span
|
||||||
class="flex-shrink-0 w-6 h-6"
|
class="flex-shrink-0 w-6 h-6"
|
||||||
[ngClass]="{ 'mr-3': !isCompact }"
|
[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>
|
</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>
|
</div>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
</li>
|
</li>
|
||||||
|
|
@ -248,7 +345,7 @@
|
||||||
tabindex="0">
|
tabindex="0">
|
||||||
<div
|
<div
|
||||||
*ngIf="isCompact"
|
*ngIf="isCompact"
|
||||||
class="tooltip tooltip-right"
|
class="tooltip tooltip-right pr-4"
|
||||||
[attr.data-tip]="item.name">
|
[attr.data-tip]="item.name">
|
||||||
<span [innerHTML]="item.icon"></span>
|
<span [innerHTML]="item.icon"></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -269,7 +366,13 @@
|
||||||
[@backdropAnimation]="isDrawerOpen && !isCompact ? 'visible' : 'hidden'"
|
[@backdropAnimation]="isDrawerOpen && !isCompact ? 'visible' : 'hidden'"
|
||||||
*ngIf="isDrawerOpen && !isCompact && isMobile"
|
*ngIf="isDrawerOpen && !isCompact && isMobile"
|
||||||
class="fixed inset-0 bg-black bg-opacity-50 z-20"
|
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 -->
|
<!-- Hauptinhalt -->
|
||||||
<div
|
<div
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue