adding feature : feat(MENU): Native material way to maintain MatMenuTrigger pressed state angular#31014

angular#31014, by adding css to class 'stay-open-while-press' and receive attributes input [pressedWhileOpen]="true" on triiger button

Author: hahaym6164

src/material/menu/menu-trigger.ts

@@ -187,6 +187,18 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
 
     this._menuItemInstance?._setTriggersSubmenu(this.triggersSubmenu());
   }
+  private _pressedWhileOpen: boolean = false;
+  @Input()
+  set pressedWhileOpen(value: boolean) {
+    this._pressedWhileOpen = value;
+    if (value) {
+      this._element.nativeElement.classList.add('stay-open-while-press');
+    }
+  }
+  get pressedWhileOpen(): boolean {
+    return this._pressedWhileOpen;
+  }
+
   private _menu: MatMenuPanel | null;
 
   /** Data to be passed along to any lazily-rendered content. */

src/material/menu/menu.scss

@@ -13,11 +13,16 @@ mat-menu {
   display: none;
 }
 
+.mat-mdc-menu-trigger.stay-open-while-press[aria-expanded='true'] {
+  .mat-mdc-button-persistent-ripple:before {
+    opacity: var(--mat-icon-button-pressed-state-layer-opacity);
+  }
+}
+
 .mat-mdc-menu-content {
   margin: 0;
   padding: 8px 0;
   outline: 0;
-
   &,
   .mat-mdc-menu-item .mat-mdc-menu-item-text {
     @include vendor-prefixes.smooth-font();
@@ -165,7 +170,9 @@ mat-menu {
     // The class selector isn't specific enough to overide the link pseudo selectors so we need
     // to target them specifically, otherwise the item color might be overwritten by the user
     // agent resets of the app.
-    &, &:visited, &:link {
+    &,
+    &:visited,
+    &:link {
       color: token-utils.slot(item-label-text-color);
     }