Css – Angular Material – Mat-Accordion Shadow effect on selection of that Accordion Description Item

You need to add some JavaScript. The logic is as follows:

• If any mat-list-item element is clicked, highlight the clicked mat-list-item element, but set the background-color to transparent to all other mat-list-item elements and all submenus.
• If any submenu is clicked, highlight the clicked submenu, but set the background-color to transparent to all other submenus and all mat-list-item elements.

See the comments in the code below.

list-overview-example.ts

import { Component } from '@angular/core';

/**
 * @title Basic list
 */
@Component({
  selector: 'list-overview-example',
  templateUrl: 'list-overview-example.html',
})
export class ListOverviewExample {}

// Wait for the DOM to be fully loaded
document.addEventListener('DOMContentLoaded', () => {
  // Select all elements with class '.mat-panel-description-setting'
  const submenues = document.querySelectorAll('.mat-panel-description-setting');
  // Select all elements with class '.mat-list-item'
  const listItems = document.querySelectorAll('.mat-list-item');

  // Function to reset the background color of all elements
  function resetBackgroundColors() {
    // Reset the background color of '.mat-panel-description-setting' elements
    submenues.forEach((submenu) => {
      const submenuElement = submenu as HTMLElement;
      submenuElement.style.backgroundColor = 'transparent';
    });

    // Reset the background color of '.mat-list-item' elements
    listItems.forEach((listItem) => {
      const listItemElement = listItem as HTMLElement;
      listItemElement.style.backgroundColor = 'transparent';
    });
  }

  // Add click event listeners to '.mat-panel-description-setting' elements
  submenues.forEach((submenu) => {
    const submenuElement = submenu as HTMLElement;

    submenuElement.addEventListener('click', () => {
      resetBackgroundColors(); // Reset all background colors
      submenuElement.style.backgroundColor = 'lightgrey'; // Highlight the clicked submenu
    });
  });

  // Add click event listeners to '.mat-list-item' elements
  listItems.forEach((listItem) => {
    const listItemElement = listItem as HTMLElement;

    listItemElement.addEventListener('click', () => {
      resetBackgroundColors(); // Reset all background colors
      listItemElement.style.backgroundColor = 'lightgrey'; // Highlight the clicked mat-list-item
    });
  });
});

/**  Copyright 2023 Google LLC. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at https://angular.io/license */

list-overview-example.html

<mat-nav-list>
  <a
    mat-list-item
    role="listitem"
    class="list-item-setting"
    id="emailTemplatesId"
    matTooltipPosition="right"
    routerLinkActive="active"
  >
    <mat-icon class="list-item-setting">email</mat-icon>
    <span class="nowrap add-padding">User 1</span>
  </a>
  <a
    mat-list-item
    role="listitem"
    class="list-item-setting"
    id="emailTemplatesId"
    matTooltipPosition="right"
    routerLinkActive="active"
  >
    <mat-icon class="list-item-setting">email</mat-icon>
    <span class="nowrap add-padding">User 2</span>
  </a>
  <a
    mat-list-item
    role="listitem"
    class="list-item-setting"
    id="emailTemplatesId"
    matTooltipPosition="right"
    routerLinkActive="active"
  >
    <mat-icon class="list-item-setting">email</mat-icon>
    <span class="nowrap add-padding">User 3</span>
  </a>
  <a>
    <mat-accordion>
      <mat-expansion-panel hideToggle>
        <mat-expansion-panel-header>
          <mat-panel-title style="text-align: left">
            <mat-icon class="list-item-setting">email</mat-icon>
            <span class="list-item-setting add-padding">Submenu accordion</span>
          </mat-panel-title>
        </mat-expansion-panel-header>
        <div>
          <mat-panel-description class="mat-panel-description-setting"
            ><a class="list-item-setting add-padding" routerLinkActive="active"
              >Submenu 1</a
            ></mat-panel-description
          >
          <mat-panel-description class="mat-panel-description-setting"
            ><a class="list-item-setting add-padding" routerLinkActive="active"
              >Submenu 2</a
            ></mat-panel-description
          >
          <mat-panel-description class="mat-panel-description-setting"
            ><a class="list-item-setting add-padding" routerLinkActive="active"
              >Submenu 3</a
            ></mat-panel-description
          >
        </div>
      </mat-expansion-panel>
    </mat-accordion>
  </a>
</mat-nav-list>

<!-- Copyright 2023 Google LLC. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at https://angular.io/license -->

styles.scss

.mat-expansion-panel-header {
  padding: 0 16px !important;
}

table {
  border-collapse: collapse;
}

.add-padding {
  padding-left: 16px;
}

Output:

See the live demo.