chrome/browser/resources/chromeos/healthd_internals/app.html

<style include="cr-nav-menu-item-style healthd-internals-shared">
  #appContainer {
    display: flex;
    height: 100vh;
    width: 100vw;
  }

  #main {
    height: 100%;
    flex-grow: 1;
  }

  #sidebarContainer {
    display: flex;
    height: 100%;
  }

  #sidebar {
    border-inline-end: 1px solid var(--cr-separator-color);
    box-sizing: border-box;
    overflow: auto;
    width: 240px;
    white-space: nowrap;
    transition: width .2s ease-in-out;
  }

  #sidebar.collapsed {
    width: 0px;
  }

  #selector {
    padding-inline-end: 8px;
  }

  #settingsButtonContainer {
    display: flex;
    justify-content: center;
  }

  #sidebarToggleButton {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 16px;
    width: 20px;
    cursor: pointer;
    color: var(--cr-primary-text-color);
  }

  #sidebarToggleButton:hover {
    background-color: var(--cros-sys-highlight_shape);
  }
</style>

<healthd-internals-settings-dialog id="settingsDialog">
</healthd-internals-settings-dialog>

<div id="appContainer">

<div id="sidebarContainer">
  <div id="sidebar">
    <h1 id="pageTitle">Healthd Internals</h1>
    <cr-menu-selector id="selector"
        selected="{{selectedIndex}}"
        selected-attribute="selected">
      <template is="dom-repeat" items="[[pageList]]">
        <a role="menuitem" href="[[item.path]]" class="cr-nav-menu-item">
          [[item.name]]
        </a>
      </template>
    </cr-menu-selector>
    <div id="settingsButtonContainer">
      <cr-button on-click="openSettingsDialog">Settings</cr-button>
    </div>
  </div>
  <div id="sidebarToggleButton" on-click="toggleSidebar">&lt;</div>
</div>

<iron-location path="{{currentPath}}"></iron-location>

<div id="main">
  <iron-pages class="full-page" selected="[[selectedIndex]]">
    <healthd-internals-info id="infoPage">
    </healthd-internals-info>
    <healthd-internals-telemetry id="telemetryPage">
    </healthd-internals-telemetry>
    <healthd-internals-process id="processPage">
    </healthd-internals-process>
    <healthd-internals-system-trend id="systemTrendPage">
    </healthd-internals-system-trend>
  </iron-pages>
</div>

</div>