[ACS-7285] - [ACA] Angular 15 - Left sidebar + table (#3719)

projects/aca-content/src/lib/components/sidenav/sidenav.component.html

@@ -3,7 +3,7 @@
 
     <div class="aca-sidenav__section">
       <div *ngFor="let group of groups; trackBy: trackByGroupId" class="aca-sidenav__section__actions">
-          <mat-list-item *ngFor="let item of group.items; trackBy: trackByLinkId">
+          <mat-list-item class="aca-sidenav__section__actions__item" *ngFor="let item of group.items; trackBy: trackByLinkId">
             <ng-container *ngIf="!item.component">
               <app-expand-menu [item]="item"></app-expand-menu>
             </ng-container>

projects/aca-content/src/lib/components/sidenav/sidenav.component.scss

@@ -96,11 +96,13 @@
     }
 
     .aca-action-button {
+      cursor: pointer;
       color: var(--theme-action-button-text-color);
       height: 32px;
       padding: 0 24px;
       border-radius: 0;
       line-height: 32px;
+      justify-content: start;
 
       &--active {
         color: var(--theme-sidenav-active-text-color);
@@ -113,8 +115,18 @@
       width: 100%;
     }
 
-    &__actions:last-child {
+    &__actions {
+      &__item:has(span) {
+        padding: 0;
+
+        span {
+          pointer-events: auto;
+        }
+      }
+
+      &:last-child {
         border-bottom: 0;
       }
     }
+  }
 }

projects/aca-content/src/lib/ui/overrides/ay11.scss

@@ -8,7 +8,7 @@
       @include rounded-outline;
     }
 
-    .mat-ripple {
+    .mat-ripple, .mdc-icon-button__ripple {
       display: none;
     }
 

projects/aca-content/src/lib/ui/theme.scss

@@ -10,6 +10,10 @@ mat-toolbar {
   color: var(--theme-text-color, rgba(0, 0, 0, 0.54));
 }
 
+mat-icon {
+  vertical-align: middle;
+}
+
 .adf-name-location-cell-location.adf-datatable-cell-value {
   color: var(--theme-secondary-text);
 }
@@ -22,6 +26,18 @@ mat-toolbar {
   }
 }
 
+.mat-mdc-button:is(button),
+.mat-mdc-icon-button:is(button),
+.mat-mdc-icon-button.mat-mdc-button-base:is(button) {
+  padding: 0;
+  height: 40px;
+  width: 40px;
+
+  .mat-mdc-button-touch-target {
+    display: none;
+  }
+}
+
 .mdc-floating-label,
 .mat-mdc-tab-list .mat-mdc-tab-labels .mdc-tab,
 .mat-mdc-checkbox label,