import { Component, h, Host } from '@stencil/core';
const demo1 = `<dvn-menu>
  <dvn-menu-item highlighted>
    Home
  </dvn-menu-item>
  <dvn-menu-item>
    Notifications
  </dvn-menu-item>
</dvn-menu>`;
const demo2 = `<dvn-menu>
  <dvn-menu-section
    section-title="Members"
  >
    <dvn-menu-item>
      Mentors
    </dvn-menu-item>
    <dvn-menu-item highlighted>
      Students
    </dvn-menu-item>
  </dvn-menu-section>
  <dvn-menu-section
    section-title="Settings"
  >
    <dvn-menu-item>
      Notifications
    </dvn-menu-item>
    <dvn-menu-item>
      Info
    </dvn-menu-item>
  </dvn-menu-section>
</dvn-menu>`;
const demo3 = `<dvn-menu>
  <dvn-menu-section
    section-title="Members"
  >
    <dvn-menu-item>
      Mentors
    </dvn-menu-item>
    <dvn-menu-item highlighted>
      Students
      <div slot="sub-menu">
        <dvn-menu-sub-item>
          List
        </dvn-menu-sub-item>
        <dvn-menu-sub-item highlighted>
          Sessions
        </dvn-menu-sub-item>
      </div>
    </dvn-menu-item>
  </dvn-menu-section>
  <dvn-menu-section
    section-title="Settings"
  >
    <dvn-menu-item>
      Notifications
    </dvn-menu-item>
    <dvn-menu-item>
      Info
    </dvn-menu-item>
  </dvn-menu-section>
</dvn-menu>`;
const demo4 = `<dvn-menu>
  <dvn-menu-item>
    Home
  </dvn-menu-item>
  <dvn-menu-item highlighted>
    Settings
    <div slot="sub-menu">
      <dvn-menu-sub-item>
        Profile
      </dvn-menu-sub-item>
      <dvn-menu-sub-item highlighted>
        Notifications
      </dvn-menu-sub-item>
    </div>
  </dvn-menu-item>
</dvn-menu>`;
export class ShowcaseMenu {
  render() {
    return (h(Host, null,
      h("div", { class: "d-flex" },
        h("dvn-component-demo", { domString: demo1 }),
        h("dvn-component-demo", { domString: demo2 }),
        h("dvn-component-demo", { domString: demo3 }),
        h("dvn-component-demo", { domString: demo4 }))));
  }
  static get is() { return "showcase-menu"; }
}
