docs: fix standlone menu overlay

Author: wagnermaciel

adev/src/content/examples/aria/menu/src/menu-standalone/app/app.html

@@ -1,4 +1,4 @@
-<div ngMenu>
+<div ngMenu (mouseover)="hasInteracted.set(true)" (focusin)="hasInteracted.set(true)">
   <ng-template ngMenuContent>
     <span id="security-label" class="heading">SECURITY</span>
 
@@ -20,7 +20,7 @@
       </div>
 
       <ng-template
-        [cdkConnectedOverlayOpen]="true"
+        [cdkConnectedOverlayOpen]="hasInteracted()"
         [cdkConnectedOverlay]="{origin: resetItem, usePopover: 'inline'}"
         [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
         cdkAttachPopoverAsChild

adev/src/content/examples/aria/menu/src/menu-standalone/app/app.ts

@@ -1,4 +1,4 @@
-import {Component, viewChild} from '@angular/core';
+import {Component, signal, viewChild} from '@angular/core';
 import {Menu, MenuContent, MenuItem} from '@angular/aria/menu';
 import {OverlayModule} from '@angular/cdk/overlay';
 
@@ -9,5 +9,6 @@ import {OverlayModule} from '@angular/cdk/overlay';
   imports: [Menu, MenuContent, MenuItem, OverlayModule],
 })
 export class App {
+  hasInteracted = signal(false);
   updateMenu = viewChild<Menu<string>>('updateMenu');
 }

adev/src/content/examples/aria/menu/src/menu-standalone/material/app/app.html

@@ -1,4 +1,4 @@
-<div ngMenu class="material-menu">
+<div ngMenu class="material-menu" (mouseover)="hasInteracted.set(true)" (focusin)="hasInteracted.set(true)">
   <ng-template ngMenuContent>
     <span id="security-label" class="heading">SECURITY</span>
 
@@ -20,7 +20,7 @@
       </div>
 
       <ng-template
-        [cdkConnectedOverlayOpen]="true"
+        [cdkConnectedOverlayOpen]="hasInteracted()"
         [cdkConnectedOverlay]="{origin: resetItem, usePopover: 'inline'}"
         [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
         cdkAttachPopoverAsChild

adev/src/content/examples/aria/menu/src/menu-standalone/material/app/app.ts

@@ -1,4 +1,4 @@
-import {Component, viewChild} from '@angular/core';
+import {Component, signal, viewChild} from '@angular/core';
 import {Menu, MenuContent, MenuItem} from '@angular/aria/menu';
 import {OverlayModule} from '@angular/cdk/overlay';
 
@@ -9,5 +9,6 @@ import {OverlayModule} from '@angular/cdk/overlay';
   imports: [Menu, MenuContent, MenuItem, OverlayModule],
 })
 export class App {
+  hasInteracted = signal(false);
   updateMenu = viewChild<Menu<string>>('updateMenu');
 }

adev/src/content/examples/aria/menu/src/menu-standalone/retro/app/app.html

@@ -1,4 +1,4 @@
-<div ngMenu class="retro-menu">
+<div ngMenu class="retro-menu" (mouseover)="hasInteracted.set(true)" (focusin)="hasInteracted.set(true)">
   <ng-template ngMenuContent>
     <span id="security-label" class="heading">SECURITY</span>
 
@@ -20,7 +20,7 @@
       </div>
 
       <ng-template
-        [cdkConnectedOverlayOpen]="true"
+        [cdkConnectedOverlayOpen]="hasInteracted()"
         [cdkConnectedOverlay]="{origin: resetItem, usePopover: 'inline'}"
         [cdkConnectedOverlayPositions]="[{originX: 'end', originY: 'top', overlayY: 'top', overlayX: 'start', offsetX: 6}]"
         cdkAttachPopoverAsChild

adev/src/content/examples/aria/menu/src/menu-standalone/retro/app/app.ts

@@ -1,4 +1,4 @@
-import {Component, viewChild} from '@angular/core';
+import {Component, signal, viewChild} from '@angular/core';
 import {Menu, MenuContent, MenuItem} from '@angular/aria/menu';
 import {OverlayModule} from '@angular/cdk/overlay';
 
@@ -9,5 +9,6 @@ import {OverlayModule} from '@angular/cdk/overlay';
   imports: [Menu, MenuContent, MenuItem, OverlayModule],
 })
 export class App {
+  hasInteracted = signal(false);
   updateMenu = viewChild<Menu<string>>('updateMenu');
 }