Add new Menu Component

apps/cookbook/src/app/examples/menu-example/examples/customPlacement.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+
+const config = {
+  selector: 'cookbook-menu-custom-placement-example',
+  template: `<kirby-menu [placement]="'bottom-end'">
+  <kirby-item [selectable]="true">
+    <h3>Action 1</h3>
+  </kirby-item>
+  <kirby-item [selectable]="true">
+    <h3>Action 2</h3>
+  </kirby-item>
+</kirby-menu>`,
+};
+
+@Component({
+  selector: config.selector,
+  template: config.template,
+})
+export class MenuCustomPlacementExampleComponent {
+  template: string = config.template;
+}

apps/cookbook/src/app/examples/menu-example/examples/hoverTrigger.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+
+const config = {
+  selector: 'cookbook-menu-hover-trigger-example',
+  template: `<kirby-menu [triggers]="['hover']">
+  <kirby-item [selectable]="true">
+    <h3>Action 1</h3>
+  </kirby-item>
+  <kirby-item [selectable]="true">
+    <h3>Action 2</h3>
+  </kirby-item>
+</kirby-menu>`,
+};
+
+@Component({
+  selector: config.selector,
+  template: config.template,
+})
+export class MenuHoverTriggerExampleComponent {
+  template: string = config.template;
+}

apps/cookbook/src/app/examples/menu-example/menu-example.module.ts

@@ -7,13 +7,17 @@ import { MenuAdvancedExampleComponent } from './examples/advanced';
 import { MenuSelectableExampleComponent } from './examples/selectable';
 import { MenuCustomButtonExampleComponent } from '~/app/examples/menu-example/examples/customButton';
 import { MenuPortalExampleComponent } from '~/app/examples/menu-example/examples/portal';
+import { MenuCustomPlacementExampleComponent } from '~/app/examples/menu-example/examples/customPlacement';
+import { MenuHoverTriggerExampleComponent } from '~/app/examples/menu-example/examples/hoverTrigger';
 
 const COMPONENT_DECLARATIONS = [
   MenuDefaultExampleComponent,
   MenuAdvancedExampleComponent,
   MenuSelectableExampleComponent,
   MenuCustomButtonExampleComponent,
   MenuPortalExampleComponent,
+  MenuCustomPlacementExampleComponent,
+  MenuHoverTriggerExampleComponent,
 ];
 
 @NgModule({

apps/cookbook/src/app/showcase/menu-showcase/menu-showcase.component.html

@@ -35,6 +35,11 @@ <h3>Portal</h3>
     . It is your task to provide a reference to the DOM element for which you want to portal the
     menu content into. This can example be achieved by using:
     <code>document.getElementsByTagName(outletTag)[0] as HTMLElement</code>
+    . Here outlet tag references a known tag in the DOM, for which there should only exists one.
+    This could for example be one of the top elements in the DOM. This is not generalized, since
+    each project may have different tags for which they want the content to be placed under. This
+    approach is also to prevent the need for adjusting the DOM with an extra base element, when the
+    need for portal arises.
   </p>
   <strong>
     <em>
@@ -70,6 +75,28 @@ <h2>Menu: Advanced item</h2>
   </div>
 </div>
 
+<div class="page-example">
+  <div>
+    <h2>Menu: Placement</h2>
+    <cookbook-example-viewer [html]="menuPlacementExample.template">
+      <cookbook-menu-custom-placement-example
+        #menuPlacementExample
+      ></cookbook-menu-custom-placement-example>
+    </cookbook-example-viewer>
+  </div>
+</div>
+
+<div class="page-example">
+  <div>
+    <h2>Menu: Hover trigger</h2>
+    <cookbook-example-viewer [html]="menuHoverTriggerExample.template">
+      <cookbook-menu-hover-trigger-example
+        #menuHoverTriggerExample
+      ></cookbook-menu-hover-trigger-example>
+    </cookbook-example-viewer>
+  </div>
+</div>
+
 <div class="page-example">
   <div>
     <h2>Menu: Custom button</h2>