#4082 Sidenav Klickbereich erhöht

apps/shared/shell/src/lib/side-menu/side-menu.component.css

@@ -26,24 +26,27 @@
   @apply grid grid-flow-row gap-[0.625rem] mb-6;
 }
 
-.side-menu-group-item {
-  @apply text-p2 flex flex-row items-center px-[0.438rem] py-3 bg-[#EDEFF0] text-black rounded cursor-pointer;
+.side-menu-group-wrapper {
+  @apply flex flex-row items-center text-p2 bg-[#EDEFF0] rounded  text-black cursor-pointer;
 }
 
-.side-menu-group-link {
-  @apply flex flex-row items-center grow;
+.side-menu-group-wrapper:has(.side-menu-group-item.active),
+.side-menu-group-wrapper:has(.side-menu-group-item:hover),
+.side-menu-group-wrapper:has(.side-menu-group-item:focus),
+.side-menu-group-wrapper:has(.side-menu-group-arrow:hover),
+.side-menu-group-wrapper:has(.side-menu-group-arrow:focus),
+.side-menu-group-wrapper.active {
+  @apply bg-[#596470] text-white;
+}
+
+.side-menu-group-item {
+  @apply flex flex-row items-center grow px-[0.438rem] py-3;
 }
 
 .side-menu-group-item-label {
   @apply whitespace-nowrap;
 }
 
-.side-menu-group-item.active,
-.side-menu-group-item:hover,
-.side-menu-group-item:focus {
-  @apply bg-[#596470] text-white;
-}
-
 .side-menu-group-sub-items:not(.hidden) {
   @apply grid grid-flow-row gap-[0.063rem] mt-[0.063rem];
 }
@@ -52,9 +55,13 @@
   @apply rotate-180;
 }
 
-.side-menu-group-sub-items .side-menu-group-item.active,
-.side-menu-group-sub-items .side-menu-group-item:hover,
-.side-menu-group-sub-items .side-menu-group-item:focus {
+.side-menu-group-arrow {
+  @apply px-[0.438rem] py-3;
+}
+
+.side-menu-group-sub-items .side-menu-group-wrapper:has(.side-menu-group-item.active),
+.side-menu-group-sub-items .side-menu-group-wrapper:has(.side-menu-group-item:hover),
+.side-menu-group-sub-items .side-menu-group-wrapper:has(.side-menu-group-item:focus) {
   @apply bg-[#89949E] text-white;
 }
 

apps/shared/shell/src/lib/side-menu/side-menu.component.html

@@ -3,22 +3,24 @@
     Kunden
   </span>
   <nav class="side-menu-group-nav">
-    <a
-      class="side-menu-group-item"
-      (click)="closeSideMenu(); resetBranch(); focusSearchBox()"
-      [routerLink]="productRoutePath$ | async"
-      routerLinkActive="active"
-    >
-      <div class="side-menu-group-item-icon">
-        <ui-svg-icon icon="import-contacts"></ui-svg-icon>
-      </div>
-      <span class="side-menu-group-item-label">Artikelsuche</span>
-    </a>
+    <div class="side-menu-group-wrapper">
+      <a
+        class="side-menu-group-item"
+        (click)="closeSideMenu(); resetBranch(); focusSearchBox()"
+        [routerLink]="productRoutePath$ | async"
+        routerLinkActive="active"
+      >
+        <div class="side-menu-group-item-icon">
+          <ui-svg-icon icon="import-contacts"></ui-svg-icon>
+        </div>
+        <span class="side-menu-group-item-label">Artikelsuche</span>
+      </a>
+    </div>
 
     <div class="side-menu-group-sub-item-wrapper">
-      <div class="side-menu-group-item">
+      <div class="side-menu-group-wrapper" routerLinkActive="active">
         <a
-          class="side-menu-group-link"
+          class="side-menu-group-item"
           (click)="closeSideMenu(); focusSearchBox()"
           [routerLink]="[customerBasePath$ | async, 'customer']"
           routerLinkActive="active"
@@ -36,60 +38,67 @@
       </div>
 
       <div class="side-menu-group-sub-items" [class.hidden]="!customerExpanded">
-        <a
-          class="side-menu-group-item"
-          (click)="closeSideMenu(); focusSearchBox()"
-          [routerLink]="[customerBasePath$ | async, 'customer', 'search']"
-          routerLinkActive="active"
-        >
-          <span class="side-menu-group-item-icon"></span>
-          <span class="side-menu-group-item-label">
-            Suchen
-          </span>
-        </a>
-        <a
-          class="side-menu-group-item"
-          (click)="closeSideMenu(); focusSearchBox()"
-          [routerLink]="[customerBasePath$ | async, 'customer', 'create']"
-          routerLinkActive="active"
-        >
-          <span class="side-menu-group-item-icon"></span>
-          <span class="side-menu-group-item-label">
-            Erfassen
-          </span>
-        </a>
+        <div class="side-menu-group-wrapper">
+          <a
+            class="side-menu-group-item"
+            (click)="closeSideMenu(); focusSearchBox()"
+            [routerLink]="[customerBasePath$ | async, 'customer', 'search']"
+            routerLinkActive="active"
+          >
+            <span class="side-menu-group-item-icon"></span>
+            <span class="side-menu-group-item-label">
+              Suchen
+            </span>
+          </a>
+        </div>
+        <div class="side-menu-group-wrapper">
+          <a
+            class="side-menu-group-item"
+            (click)="closeSideMenu(); focusSearchBox()"
+            [routerLink]="[customerBasePath$ | async, 'customer', 'create']"
+            routerLinkActive="active"
+          >
+            <span class="side-menu-group-item-icon"></span>
+            <span class="side-menu-group-item-label">
+              Erfassen
+            </span>
+          </a>
+        </div>
       </div>
     </div>
 
-    <a
-      *ifRole="'Store'"
-      class="side-menu-group-item"
-      (click)="closeSideMenu(); focusSearchBox()"
-      [routerLink]="[customerBasePath$ | async, 'goods', 'out']"
-      routerLinkActive="active"
-    >
-      <span class="side-menu-group-item-icon">
-        <ui-svg-icon icon="unarchive"></ui-svg-icon>
-      </span>
-      <span class="side-menu-group-item-label">
-        Warenausgabe
-      </span>
-    </a>
+    <div class="side-menu-group-wrapper">
+      <a
+        *ifRole="'Store'"
+        class="side-menu-group-item"
+        (click)="closeSideMenu(); focusSearchBox()"
+        [routerLink]="[customerBasePath$ | async, 'goods', 'out']"
+        routerLinkActive="active"
+      >
+        <span class="side-menu-group-item-icon">
+          <ui-svg-icon icon="unarchive"></ui-svg-icon>
+        </span>
+        <span class="side-menu-group-item-label">
+          Warenausgabe
+        </span>
+      </a>
+    </div>
 
-    <a
-      *ifRole="'CallCenter'"
-      class="side-menu-group-item"
-      (click)="closeSideMenu(); resetBranch(); focusSearchBox()"
-      [routerLink]="[customerBasePath$ | async, 'order']"
-      routerLinkActive="active"
-    >
-      <span class="side-menu-group-item-icon">
-        <ui-svg-icon icon="deployed-code"></ui-svg-icon>
-      </span>
-      <span class="side-menu-group-item-label">
-        Bestellungen
-      </span>
-    </a>
+    <div *ifRole="'CallCenter'" class="side-menu-group-wrapper">
+      <a
+        class="side-menu-group-item"
+        (click)="closeSideMenu(); resetBranch(); focusSearchBox()"
+        [routerLink]="[customerBasePath$ | async, 'order']"
+        routerLinkActive="active"
+      >
+        <span class="side-menu-group-item-icon">
+          <ui-svg-icon icon="deployed-code"></ui-svg-icon>
+        </span>
+        <span class="side-menu-group-item-label">
+          Bestellungen
+        </span>
+      </a>
+    </div>
   </nav>
 </div>
 
@@ -98,41 +107,46 @@
     Filiale
   </span>
   <nav class="side-menu-group-nav">
-    <a
-      *ngIf="taskCalenderNavigation$ | async; let taskCalenderNavigation"
-      class="side-menu-group-item"
-      (click)="closeSideMenu(); focusSearchBox()"
-      [routerLink]="taskCalenderNavigation.path"
-      [queryParams]="taskCalenderNavigation.queryParams"
-      routerLinkActive="active"
-    >
-      <span class="side-menu-group-item-icon">
-        <ui-svg-icon icon="event-available"></ui-svg-icon>
-      </span>
-      <span class="side-menu-group-item-label">
-        Kalender
-      </span>
-    </a>
-    <a
-      class="side-menu-group-item"
-      (click)="closeSideMenu()"
-      *ngIf="assortmentNavigation$ | async; let assortmentNavigation"
-      [routerLink]="assortmentNavigation.path"
-      [queryParams]="assortmentNavigation.queryParams"
-      routerLinkActive="active"
-    >
-      <span class="side-menu-group-item-icon">
-        <ui-svg-icon icon="shape-outline"></ui-svg-icon>
-      </span>
-      <span class="side-menu-group-item-label">
-        Sortiment
-      </span>
-    </a>
+    <div class="side-menu-group-wrapper">
+      <a
+        *ngIf="taskCalenderNavigation$ | async; let taskCalenderNavigation"
+        class="side-menu-group-item"
+        (click)="closeSideMenu(); focusSearchBox()"
+        [routerLink]="taskCalenderNavigation.path"
+        [queryParams]="taskCalenderNavigation.queryParams"
+        routerLinkActive="active"
+      >
+        <span class="side-menu-group-item-icon">
+          <ui-svg-icon icon="event-available"></ui-svg-icon>
+        </span>
+        <span class="side-menu-group-item-label">
+          Kalender
+        </span>
+      </a>
+    </div>
+
+    <div class="side-menu-group-wrapper">
+      <a
+        class="side-menu-group-item"
+        (click)="closeSideMenu()"
+        *ngIf="assortmentNavigation$ | async; let assortmentNavigation"
+        [routerLink]="assortmentNavigation.path"
+        [queryParams]="assortmentNavigation.queryParams"
+        routerLinkActive="active"
+      >
+        <span class="side-menu-group-item-icon">
+          <ui-svg-icon icon="shape-outline"></ui-svg-icon>
+        </span>
+        <span class="side-menu-group-item-label">
+          Sortiment
+        </span>
+      </a>
+    </div>
 
     <div class="side-menu-group-sub-item-wrapper">
-      <div class="side-menu-group-item">
+      <div class="side-menu-group-wrapper" routerLinkActive="active">
         <a
-          class="side-menu-group-link"
+          class="side-menu-group-item"
           (click)="closeSideMenu(); focusSearchBox()"
           *ngIf="goodsInNavigation$ | async; let goodsInNavigation"
           [routerLink]="goodsInNavigation.path"
@@ -152,94 +166,112 @@
       </div>
 
       <div class="side-menu-group-sub-items" [class.hidden]="!goodsInExpanded">
-        <a
-          class="side-menu-group-item"
-          (click)="closeSideMenu(); focusSearchBox()"
-          [routerLink]="['/filiale', 'goods', 'in', 'results']"
-          routerLinkActive="active"
-        >
-          <span class="side-menu-group-item-icon"></span>
-          <span class="side-menu-group-item-label">
-            Einbuchen
-          </span>
-        </a>
-        <a
-          class="side-menu-group-item"
-          (click)="closeSideMenu(); focusSearchBox()"
-          [routerLink]="['/filiale', 'goods', 'in', 'reservation']"
-          routerLinkActive="active"
-        >
-          <span class="side-menu-group-item-icon"></span>
-          <span class="side-menu-group-item-label">
-            Reservierung
-          </span>
-        </a>
-        <a
-          class="side-menu-group-item"
-          (click)="closeSideMenu(); focusSearchBox()"
-          [routerLink]="['/filiale', 'goods', 'in', 'cleanup']"
-          routerLinkActive="active"
-        >
-          <span class="side-menu-group-item-icon"></span>
-          <span class="side-menu-group-item-label">
-            Ausräumen
-          </span>
-        </a>
-        <a
-          class="side-menu-group-item"
-          (click)="closeSideMenu(); focusSearchBox()"
-          [routerLink]="['/filiale', 'goods', 'in', 'preview']"
-          routerLinkActive="active"
-        >
-          <span class="side-menu-group-item-icon"></span>
-          <span class="side-menu-group-item-label">
-            Remi-Vorschau
-          </span>
-        </a>
-        <a
-          class="side-menu-group-item"
-          (click)="closeSideMenu(); focusSearchBox()"
-          [routerLink]="['/filiale', 'goods', 'in', 'list']"
-          routerLinkActive="active"
-        >
-          <span class="side-menu-group-item-icon"></span>
-          <span class="side-menu-group-item-label">
-            Fehlende
-          </span>
-        </a>
+        <div class="side-menu-group-wrapper">
+          <a
+            class="side-menu-group-item"
+            (click)="closeSideMenu(); focusSearchBox()"
+            [routerLink]="['/filiale', 'goods', 'in', 'results']"
+            routerLinkActive="active"
+          >
+            <span class="side-menu-group-item-icon"></span>
+            <span class="side-menu-group-item-label">
+              Einbuchen
+            </span>
+          </a>
+        </div>
+
+        <div class="side-menu-group-wrapper">
+          <a
+            class="side-menu-group-item"
+            (click)="closeSideMenu(); focusSearchBox()"
+            [routerLink]="['/filiale', 'goods', 'in', 'reservation']"
+            routerLinkActive="active"
+          >
+            <span class="side-menu-group-item-icon"></span>
+            <span class="side-menu-group-item-label">
+              Reservierung
+            </span>
+          </a>
+        </div>
+
+        <div class="side-menu-group-wrapper">
+          <a
+            class="side-menu-group-item"
+            (click)="closeSideMenu(); focusSearchBox()"
+            [routerLink]="['/filiale', 'goods', 'in', 'cleanup']"
+            routerLinkActive="active"
+          >
+            <span class="side-menu-group-item-icon"></span>
+            <span class="side-menu-group-item-label">
+              Ausräumen
+            </span>
+          </a>
+        </div>
+
+        <div class="side-menu-group-wrapper">
+          <a
+            class="side-menu-group-item"
+            (click)="closeSideMenu(); focusSearchBox()"
+            [routerLink]="['/filiale', 'goods', 'in', 'preview']"
+            routerLinkActive="active"
+          >
+            <span class="side-menu-group-item-icon"></span>
+            <span class="side-menu-group-item-label">
+              Remi-Vorschau
+            </span>
+          </a>
+        </div>
+
+        <div class="side-menu-group-wrapper">
+          <a
+            class="side-menu-group-item"
+            (click)="closeSideMenu(); focusSearchBox()"
+            [routerLink]="['/filiale', 'goods', 'in', 'list']"
+            routerLinkActive="active"
+          >
+            <span class="side-menu-group-item-icon"></span>
+            <span class="side-menu-group-item-label">
+              Fehlende
+            </span>
+          </a>
+        </div>
       </div>
     </div>
 
-    <a
-      class="side-menu-group-item"
-      (click)="closeSideMenu()"
-      *ngIf="remissionNavigation$ | async; let remissionNavigation"
-      [routerLink]="remissionNavigation.path"
-      [queryParams]="remissionNavigation.queryParams"
-      routerLinkActive="active"
-    >
-      <span class="side-menu-group-item-icon">
-        <ui-svg-icon icon="assignment-return"></ui-svg-icon>
-      </span>
-      <span class="side-menu-group-item-label">
-        Remission
-      </span>
-    </a>
+    <div class="side-menu-group-wrapper">
+      <a
+        class="side-menu-group-item"
+        (click)="closeSideMenu()"
+        *ngIf="remissionNavigation$ | async; let remissionNavigation"
+        [routerLink]="remissionNavigation.path"
+        [queryParams]="remissionNavigation.queryParams"
+        routerLinkActive="active"
+      >
+        <span class="side-menu-group-item-icon">
+          <ui-svg-icon icon="assignment-return"></ui-svg-icon>
+        </span>
+        <span class="side-menu-group-item-label">
+          Remission
+        </span>
+      </a>
+    </div>
 
-    <a
-      class="side-menu-group-item"
-      *ngIf="packageInspectionNavigation$ | async; let packageInspectionNavigation"
-      (click)="closeSideMenu(); fetchAndOpenPackages()"
-      [routerLink]="packageInspectionNavigation.path"
-      [queryParams]="packageInspectionNavigation.queryParams"
-      routerLinkActive="active"
-    >
-      <span class="side-menu-group-item-icon">
-        <ui-svg-icon icon="clipboard-check-outline"></ui-svg-icon>
-      </span>
-      <span class="side-menu-group-item-label">
-        Wareneingang
-      </span>
-    </a>
+    <div class="side-menu-group-wrapper">
+      <a
+        class="side-menu-group-item"
+        *ngIf="packageInspectionNavigation$ | async; let packageInspectionNavigation"
+        (click)="closeSideMenu(); fetchAndOpenPackages()"
+        [routerLink]="packageInspectionNavigation.path"
+        [queryParams]="packageInspectionNavigation.queryParams"
+        routerLinkActive="active"
+      >
+        <span class="side-menu-group-item-icon">
+          <ui-svg-icon icon="clipboard-check-outline"></ui-svg-icon>
+        </span>
+        <span class="side-menu-group-item-label">
+          Wareneingang
+        </span>
+      </a>
+    </div>
   </nav>
 </div>

apps/shared/shell/src/lib/side-menu/side-menu.component.ts

@@ -1,10 +1,10 @@
 import { Component, ChangeDetectionStrategy, Inject } from '@angular/core';
 import { AuthModule, AuthService } from '@core/auth';
 import { StockService } from '@swagger/wws';
-import { first, map, retry, switchMap, take } from 'rxjs/operators';
+import { filter, first, map, retry, switchMap, take } from 'rxjs/operators';
 import { ShellService } from '../shell.service';
 import { ApplicationProcess, ApplicationService } from '@core/application';
-import { Router, RouterModule } from '@angular/router';
+import { ActivatedRoute, Router, RouterEvent, RouterModule } from '@angular/router';
 import { WrongDestinationModalService } from '@shared/modals/wrong-destination-modal';
 import { EnvironmentService } from '@core/environment';
 import { ProductCatalogNavigationService } from '@shared/services';