chromium/chrome/browser/resources/webui_gallery/demos/nav_menu/nav_menu_demo.html.ts

// Copyright 2024 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import {html} from '//resources/lit/v3_0/lit.rollup.js';

import type {NavMenuDemoElement} from './nav_menu_demo.js';

export function getHtml(this: NavMenuDemoElement) {
  return html`
<h1>Navigation menus</h1>
<div class="demos">
  <cr-checkbox ?checked="${this.showIcons_}"
      @checked-changed="${this.onShowIconsChanged_}">
    Show icons
  </cr-checkbox>
  <cr-checkbox ?checked="${this.showRipples_}"
      @checked-changed="${this.onShowRipplesChanged_}">
    Show ripples on click
  </cr-checkbox>
  <cr-button @click="${this.showDrawerMenu_}">Show menu in a drawer</cr-button>
  <nav-menu ?hidden="${this.isDrawerOpen_}"
      ?show-icons="${this.showIcons_}" ?show-ripples="${this.showRipples_}"
      .selectedIndex="${this.selectedIndex_}"
      @selected-index-changed="${this.onSelectedIndexChanged_}">
  </nav-menu>
  <div>Selected index: ${this.selectedIndex_}</div>
</div>

<cr-drawer id="drawer" heading="Drawer" @close="${this.onDrawerClose_}">
  <div slot="body">
    <nav-menu
        ?show-icons="${this.showIcons_}" ?show-ripples="${this.showRipples_}"
        .selectedIndex="${this.selectedIndex_}"
        @selected-index-changed="${this.onSelectedIndexChanged_}">
    </nav-menu>
  </div>
</cr-drawer>`;
}