Creating Menu Items

Follow these steps to create three menu items.

• The first menu item uses a callback to trigger custom logic.

• The second menu item uses a template as its content.

• The final menu item uses the other menu items as sub-menu items.

Procedure

1. To create a sub-menu item that triggers a callback function, run:

   // SidebarMenuModifier.ts
   export class SidebarMenuModifier {
     // ...
     /*** Menu Items ***/
   
     private callbackMenuItem: SidebarMenuItemInterface = {
       title: "Callback Function",
       icon: this.materialIcon,
       isVisible: () => true,
       template: "",
       items: [],
       onClick: () => { myCallbackFunction(); },
       isFullscreen: false
     };
     // ...
   
     private myCallbackFunction(): void {
       window.alert("My Callback Function");
     }
   }

2. To create a sub-menu item that uses a template, run:

   // SidebarMenuModifier.ts
   export class SidebarMenuModifier {
     // ...
     private formattedIpseDixit: SidebarMenuItemInterface = {
       title: "Ipse Dixit Formatted",
       icon: this.dataUriIcon,
       isVisible: () => true,
       template: "./lorem-ipsum-formatted.html",
       items: [],
       isFullscreen: true
     };
     // ...
   }

3. To create a menu item that has sub-menu items, run:

   // SidebarMenuModifier.ts
   export class SidebarMenuModifier {
     // ...
     private rootMenuItem: SidebarMenuItemInterface = {
       title: "Ipse Dixit",
       icon: this.statueFaceIcon,
       isPreviewIconVisible: () => true,
       isVisible: () => true,
       template: "",
       items: [this.callbackMenuItem, this.formattedIpseDixit], // Sub-Menu Items
       isFullscreen: false
     };
     // ...
   }