Skip to main content

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.
  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
    };
    // ...
    }