docs: show selected menu item visually in context menu example

Replace console.log with a lastAction signal and render the result in a styled <p> element with a fade-in animation.

Author: aparzi

adev/src/content/examples/aria/menu/src/menu-context/app/app.css

@@ -76,6 +76,34 @@
   font-size: 0.875rem;
 }
 
+.last-action {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0.75rem 1rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--border-color);
+  font-size: 0.875rem;
+  animation: fade-in 0.2s ease;
+}
+
+.last-action .material-symbols-outlined {
+  font-size: 1.1rem;
+  color: var(--vivid-pink);
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 [ngMenu] .separator {
   border-top: 1px solid var(--border-color);
   margin: 0.25rem 0;

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

@@ -3,6 +3,13 @@
   Right-click inside this area to open the context menu.
 </div>
 
+@if (lastAction()) {
+  <p class="last-action">
+    <span class="material-symbols-outlined" translate="no" aria-hidden="true">check_circle</span>
+    Action performed: <strong>{{ lastAction() }}</strong>
+  </p>
+}
+
 <!-- Hidden trigger positioned dynamically at cursor coordinates -->
 <div
   #triggerEl

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

@@ -25,8 +25,10 @@ export class App {
     this.trigger().open();
   }
 
+  lastAction = signal<string | null>(null);
+
   onItemSelected(value: string) {
-    console.log(`Action selected: ${value}`);
+    this.lastAction.set(value);
   }
 
   onOverlayKeydown(event: KeyboardEvent) {