chromium/chrome/browser/resources/ash/settings/os_settings_ui/os_settings_ui.html

<style include="cr-page-host-style settings-shared">
  :host {
    display: flex;
    flex-direction: column;
    height: 100%;

    /* Centered cards has a max-width of var(--cr-centered-card-max-width)
      * and a width of a certain percentage. Therefore, to make room for the
      * cards to be at their max width, the flex-basis of #main needs to be
      * whatever value the percentage of would equal to the max width. */
    --settings-main-basis: calc(var(--cr-centered-card-max-width) /
        var(--cr-centered-card-width-percentage));
    --cr-card-border-radius: 4px;
    --cr-card-shadow: var(--cr-elevation-1);
    --cr-toolbar-padding-top: 8px;
  }

  settings-toolbar {
    /* TODO(hsuregan): update for dark mode when needed. */
    min-height: 56px;
    /* Needs to be higher than #cr-container-show-top's z-index so that the
      * new settings search dropdown is not struck through by the shadow. */
    z-index: 3;
  }

  cr-drawer {
    --cr-separator-line: none;
    --cr-drawer-header-color: var(--cros-text-color-secondary);
    --cr-drawer-header-font-weight: 500;
    --cr-drawer-header-padding: 20px;
  }

  #cr-container-shadow-top {
    /* Needs to be higher than #container's z-index to appear above
      * scrollbars. */
    z-index: 2;
  }

  #container {
    align-items: flex-start;
    display: flex;
    flex: 1;
    overflow: overlay;
    position: relative;
  }

  #left,
  #center,
  #right {
    flex: 1 1 0;
  }

  #left {
    height: 100%;
    position: sticky;
    top: 0;
    /* Specify z-index so menu item tooltips overlay #center content. */
    z-index: 100;
  }

  :host-context(body.revamp-wayfinding-enabled) #left {
    flex-grow: 0;
  }

  #left os-settings-menu {
    height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
  }

  :host-context(body.revamp-wayfinding-enabled) #drawer {
    /* TODO(b/316088424) Use window border radius token if available */
    --cr-drawer-border-start-end-radius: 12px;
    --cr-drawer-border-end-end-radius: 12px;
    --cr-drawer-header-color: var(--cros-sys-primary);
    --cr-drawer-header-font: var(--cros-title-1-font);
    --cr-drawer-header-padding: 22px;
    --cr-drawer-width: var(--settings-menu-width);
  }

  #center {
    flex-basis: var(--settings-main-basis);
  }

  :host-context(body.revamp-wayfinding-enabled) #center  {
    box-sizing: border-box;
    height: 100%;
    padding-top: 8px;
  }

  /* Take up all remaining vertical space. */
  :host-context(body.revamp-wayfinding-enabled) #center > os-settings-main {
    min-height: 100%;
  }

  :host-context(body.revamp-wayfinding-enabled) #right {
    display: none;
  }

  /* The breakpoint of 980px was decided on by the rounded sum of
    * var(--settings-main-basis), var(--settings-menu-width), and
    * var(--cr-section-padding). */
  @media (max-width: 980px) {
    #left,
    #right {
      display: none;
    }

    #center {
      min-width: auto;
      /* Add some padding to make room for borders and to prevent focus
        * indicators from being cropped. */
      padding: 0 3px;
    }
  }

  #drawerIcon {
    cursor: pointer;
    margin-inline-end: 14px;
    margin-inline-start: 0;
    outline: none;
  }

  :host-context(body.revamp-wayfinding-enabled) #drawerIcon {
    --iron-icon-fill-color: var(--cros-sys-primary);
    margin-inline-end: 6px;
  }
</style>
<settings-prefs id="prefs" prefs="{{prefs}}"></settings-prefs>
<iron-media-query query="(max-width: [[narrowThreshold_]]px)"
    query-matches="{{isNarrow}}">
</iron-media-query>
<template is="dom-if" if="[[showToolbar_]]">
  <settings-toolbar on-settings-toolbar-menu-tap="onMenuButtonClick_"
      spinner-active="[[toolbarSpinnerActive_]]"
      role="banner"
      narrow="[[isNarrow]]"
      narrow-threshold="980"
      show-menu="[[isNarrow]]">
  </settings-toolbar>
</template>
<template is="dom-if" if="[[showNavMenu_]]">
  <cr-drawer id="drawer" on-close="onMenuClose_" heading="$i18n{settings}"
      align="$i18n{textdirection}">
    <div slot="header-icon">
      <cr-icon-button id="drawerIcon"
          iron-icon="cr20:menu"
          on-click="onDrawerIconClick_"
          title="$i18n{close}">
      </cr-icon-button>
    </div>
    <div slot="body">
      <template is="dom-if" id="drawerTemplate">
        <os-settings-menu
            is-drawer-menu
            page-availability="[[pageAvailability_]]"
            on-iron-activate="onMenuItemSelected_"
            advanced-opened="{{advancedOpenedInMenu_}}">
        </os-settings-menu>
      </template>
    </div>
  </cr-drawer>
</template>
<!-- #container is the shadow container for CrContainerShadowMixin. -->
<div id="container" class="no-outline">
  <div id="left">
    <template is="dom-if" if="[[showNavMenu_]]">
      <os-settings-menu
          page-availability="[[pageAvailability_]]"
          on-iron-activate="onMenuItemSelected_"
          advanced-opened="{{advancedOpenedInMenu_}}">
      </os-settings-menu>
    </template>
  </div>
  <div id="center">
    <os-settings-main
        prefs="{{prefs}}"
        toolbar-spinner-active="{{toolbarSpinnerActive_}}"
        page-availability="[[pageAvailability_]]"
        advanced-toggle-expanded="{{advancedOpenedInMain_}}">
    </os-settings-main>
  </div>
  <!-- An additional child of the flex #container to take up space,
        aligned with the right-hand child of the flex toolbar. -->
  <div id="right"></div>
</div>