Making admin sidebar submenu items clickable as block

Author: jr-rk

src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html

@@ -34,7 +34,7 @@
     <div class="sidebar-collapsible-element-outer-wrapper">
       <div class="sidebar-collapsible-element-inner-wrapper">
         <div class="sidebar-sub-level-item-list" role="menu" [id]="adminMenuSectionId(section.id)" [attr.aria-label]="('menu.section.' + section.id) | translate">
-          <div class="sidebar-item" *ngFor="let subSection of (subSections$ | async)">
+          <div *ngFor="let subSection of (subSections$ | async)">
             {{ (sectionMap$ | async).get(subSection.id).component | json}}
             <ng-container
               *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>

src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss

@@ -4,7 +4,7 @@
     margin: 0;
     padding: 0;
     ::ng-deep .ds-menu-item {
-      margin-left: var(--ds-admin-sidebar-section-indent);
+      padding-left: var(--ds-admin-sidebar-section-indent);
     }
   }
 

src/app/shared/menu/menu-item/onclick-menu-item.component.html

@@ -1,5 +1,5 @@
 <a *ngIf="!item.disabled"
-   class="ds-menu-item" role="menuitem"
+   class="ds-menu-item sidebar-item" role="menuitem"
    routerLinkActive="active"
    href="javascript:void(0);"
    [title]="item.text | translate"

src/app/shared/menu/menu-item/onclick-menu-item.component.scss

@@ -1,3 +1,5 @@
-a {
+.ds-menu-item {
     cursor: pointer;
-}
+    display: block;
+    width: 100%;
+}