docs(cdk-experimental/menu): add menu demo page

Author: wagnermaciel

.ng-dev/commit-message.mts

@@ -13,6 +13,7 @@ export const commitMessage: CommitMessageConfig = {
     'cdk-experimental/column-resize',
     'cdk-experimental/combobox',
     'cdk-experimental/listbox',
+    'cdk-experimental/menu',
     'cdk-experimental/popover-edit',
     'cdk-experimental/radio-group',
     'cdk-experimental/scrolling',

src/dev-app/BUILD.bazel

@@ -36,6 +36,7 @@ ng_project(
         "//src/dev-app/cdk-experimental-accordion",
         "//src/dev-app/cdk-experimental-combobox",
         "//src/dev-app/cdk-experimental-listbox",
+        "//src/dev-app/cdk-experimental-menu",
         "//src/dev-app/cdk-experimental-radio-group",
         "//src/dev-app/cdk-experimental-tabs",
         "//src/dev-app/cdk-experimental-toolbar",

src/dev-app/cdk-experimental-menu/BUILD.bazel

@@ -0,0 +1,15 @@
+load("//tools:defaults.bzl", "ng_project")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_project(
+    name = "cdk-experimental-menu",
+    srcs = glob(["**/*.ts"]),
+    assets = [
+        "cdk-menu-demo.html",
+        ":cdk-menu-demo.css",
+    ],
+    deps = [
+        "//:node_modules/@angular/core",
+    ],
+)

src/dev-app/cdk-experimental-menu/cdk-menu-demo.css

@@ -0,0 +1 @@
+<p>cdk-experimental-menu coming soon!</p>

src/dev-app/cdk-experimental-menu/cdk-menu-demo.html

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 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.dev/license
+ */
+
+import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+
+@Component({
+  templateUrl: 'cdk-menu-demo.html',
+  styleUrl: 'cdk-menu-demo.css',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CdkExperimentalMenuDemo {}

src/dev-app/cdk-experimental-menu/cdk-menu-demo.ts

@@ -62,13 +62,14 @@ export class DevAppLayout {
   navItems = [
     {name: 'Examples', route: '/examples'},
     {name: 'CDK Dialog', route: '/cdk-dialog'},
+    {name: 'CDK Experimental Accordion', route: '/cdk-experimental-accordion'},
     {name: 'CDK Experimental Combobox', route: '/cdk-experimental-combobox'},
-    {name: 'CDK Experimental Radio Group', route: '/cdk-experimental-radio-group'},
     {name: 'CDK Experimental Listbox', route: '/cdk-experimental-listbox'},
+    {name: 'CDK Experimental Menu', route: '/cdk-experimental-menu'},
+    {name: 'CDK Experimental Radio Group', route: '/cdk-experimental-radio-group'},
     {name: 'CDK Experimental Tabs', route: '/cdk-experimental-tabs'},
-    {name: 'CDK Experimental Accordion', route: '/cdk-experimental-accordion'},
-    {name: 'CDK Experimental Tree', route: '/cdk-experimental-tree'},
     {name: 'CDK Experimental Toolbar', route: '/cdk-experimental-toolbar'},
+    {name: 'CDK Experimental Tree', route: '/cdk-experimental-tree'},
     {name: 'CDK Listbox', route: '/cdk-listbox'},
     {name: 'CDK Menu', route: '/cdk-menu'},
     {name: 'Autocomplete', route: '/autocomplete'},

src/dev-app/dev-app/dev-app-layout.ts

@@ -50,6 +50,11 @@ export const DEV_APP_ROUTES: Routes = [
     loadComponent: () =>
       import('./cdk-experimental-listbox/cdk-listbox-demo').then(m => m.CdkExperimentalListboxDemo),
   },
+  {
+    path: 'cdk-experimental-menu',
+    loadComponent: () =>
+      import('./cdk-experimental-menu/cdk-menu-demo').then(m => m.CdkExperimentalMenuDemo),
+  },
   {
     path: 'cdk-experimental-radio-group',
     loadComponent: () =>