chromium/ash/webui/common/resources/cr_elements/cr_toolbar/cr_toolbar.html

<style include="cr-icons cr-hidden-style">
  :host {
    align-items: center;
    background-color: var(--cr-toolbar-background-color);
    color: var(--google-grey-900);
    display: flex;
    height: var(--cr-toolbar-height);
  }

  @media (prefers-color-scheme: dark) {
    :host {
      border-bottom: var(--cr-separator-line);
      box-sizing: border-box;
      color: var(--cr-secondary-text-color);
    }

    :host-context([chrome-refresh-2023]):host {
      background-color: transparent;
      border-bottom: none;
    }
  }

  h1 {
    flex: 1;
    font-size: 170%;
    font-weight: var(--cr-toolbar-header-font-weight, 500);
    letter-spacing: .25px;
    line-height: normal;
    margin-inline-start: 6px;
    padding-inline-end: 12px;
    white-space: var(--cr-toolbar-header-white-space, normal);
  }

  @media (prefers-color-scheme: dark) {
    h1 {
      color: var(--cr-primary-text-color);
    }
  }

  #leftContent {
    position: relative;
    transition: opacity 100ms;
  }

  #leftSpacer {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    /* 12px to match #rightSpacer + 6px to align with icons in menus. */
    padding-inline-start: calc(12px + 6px);
    width: var(--cr-toolbar-left-spacer-width, auto);
  }

  cr-icon-button {
    --cr-icon-button-size: 32px;
    min-width: 32px;
  }

  @media (prefers-color-scheme: light) {
    cr-icon-button {
      --cr-icon-button-fill-color: currentColor;
      --cr-icon-button-focus-outline-color: var(--cr-focus-outline-color);
    }
  }

  #centeredContent {
    display: flex;
    flex: 1 1 0;
    justify-content: center;
  }

  #rightSpacer {
    padding-inline-end: 12px;
  }

  :host([narrow]) #centeredContent {
    justify-content: flex-end;
  }

  :host([has-overlay]) {
    transition: visibility var(--cr-toolbar-overlay-animation-duration);
    visibility: hidden;
  }

  :host([narrow][showing-search_]) #leftContent {
    opacity: 0;
    position: absolute;
  }

  :host(:not([narrow])) #leftContent {
    flex: 1 1 var(--cr-toolbar-field-margin, 0);
  }

  :host(:not([narrow])) #centeredContent {
    flex-basis: var(--cr-toolbar-center-basis, 0);
  }

  :host(:not([narrow])[disable-right-content-grow]) #centeredContent {
    justify-content: start;
    padding-inline-start: 12px;
  }

  :host(:not([narrow])) #rightContent {
    flex: 1 1 0;
    text-align: end;
  }

  :host(:not([narrow])[disable-right-content-grow]) #rightContent {
    flex: 0 1 0;
  }

  picture {
    display: none;
  }

  #menuButton {
    margin-inline-end: 9px;
  }

  #menuButton ~ h1 {
    margin-inline-start: 0;
  }

  :host([always-show-logo]) picture,
  :host(:not([narrow])) picture {
    display: initial;
    margin-inline-end: 16px;
  }

  :host([always-show-logo]) #leftSpacer,
  :host(:not([narrow])) #leftSpacer {
    /* 12px to match #rightSpacer + 9px to align with icons in menus. */
    padding-inline-start: calc(12px + 9px);
  }

  :host([always-show-logo]) :is(picture, #product-logo),
  :host(:not([narrow])) :is(picture, #product-logo) {
    height: 24px;
    width: 24px;
  }
</style>
<div id="leftContent">
  <div id="leftSpacer">
    <template is="dom-if" if="[[showMenu]]" restamp>
      <cr-icon-button id="menuButton" class="no-overlap"
          iron-icon="cr20:menu" on-click="onMenuClick_"
          aria-label$="[[menuLabel]]"
          title="[[menuLabel]]">
      </cr-icon-button>
    </template>
    <slot name="product-logo">
      <picture>
        <source media="(prefers-color-scheme: dark)"
            srcset="//resources/images/chrome_logo_dark.svg">
        <img id="product-logo"
            srcset="chrome://theme/current-channel-logo@1x 1x,
                    chrome://theme/current-channel-logo@2x 2x"
            role="presentation">
      </picture>
    </slot>
    <h1>[[pageName]]</h1>
  </div>
</div>

<div id="centeredContent" hidden$="[[!showSearch]]">
  <cr-toolbar-search-field id="search" narrow="[[narrow]]"
      label="[[searchPrompt]]" clear-label="[[clearLabel]]"
      spinner-active="[[spinnerActive]]"
      showing-search="{{showingSearch_}}"
      autofocus$="[[autofocus]]">
  </cr-toolbar-search-field>
  <iron-media-query query="(max-width: [[narrowThreshold]]px)"
      query-matches="{{narrow}}">
  </iron-media-query>
</div>

<div id="rightContent">
  <div id="rightSpacer">
    <slot></slot>
  </div>
</div>