|  | <style include="cr-icons"> | 
|  | :host { | 
|  | --sidebar-inactive-color: #5a5a5a; | 
|  | color: var(--sidebar-inactive-color); | 
|  | display: flex; | 
|  | flex-direction: column; | 
|  | height: 100%; | 
|  | justify-content: space-between; | 
|  | overflow-x: hidden; | 
|  | overflow-y: auto; | 
|  | width: 256px; | 
|  | } | 
|  |  | 
|  | @media (prefers-color-scheme: dark) { | 
|  | :host { | 
|  | --sidebar-inactive-color: var(--cr-primary-text-color); | 
|  | } | 
|  | } | 
|  |  | 
|  | iron-selector .iron-selected { | 
|  | color: var(--cr-link-color); | 
|  | } | 
|  |  | 
|  | #sectionMenu { | 
|  | padding-top: 8px; | 
|  | user-select: none; | 
|  | } | 
|  |  | 
|  | .section-item { | 
|  | align-items: center; | 
|  | color: inherit; | 
|  | display: flex; | 
|  | font-weight: 500; | 
|  | /* Ensure the focus outline appears correctly (crbug.com/655503). */ | 
|  | margin-inline-end: 4px; | 
|  | min-height: 40px; | 
|  | padding-inline-start: 24px; | 
|  | position: relative; | 
|  | text-decoration: none; | 
|  | } | 
|  |  | 
|  | .separator { | 
|  | border-top: var(--cr-separator-line); | 
|  | margin: 8px 0; | 
|  | } | 
|  |  | 
|  | #more-extensions { | 
|  | align-items: center; | 
|  | display: flex; | 
|  | justify-content: space-between; | 
|  | margin-bottom: 8px; | 
|  | } | 
|  |  | 
|  | .cr-icon { | 
|  | margin-inline-end: calc( | 
|  | var(--cr-section-padding) - var(--cr-icon-ripple-padding)); | 
|  | } | 
|  | </style> | 
|  | <iron-selector id="sectionMenu"> | 
|  | <!-- Values for "data-path" attribute must match the "Page" enum. --> | 
|  | <a class="section-item" id="sections-extensions" href="/" | 
|  | on-click="onLinkTap_" data-path="items-list"> | 
|  | $i18n{sidebarExtensions} | 
|  | <paper-ripple></paper-ripple> | 
|  | </a> | 
|  | <a class="section-item" id="sections-shortcuts" href="/shortcuts" | 
|  | on-click="onLinkTap_" data-path="keyboard-shortcuts"> | 
|  | $i18n{keyboardShortcuts} | 
|  | <paper-ripple></paper-ripple> | 
|  | </a> | 
|  | </iron-selector> | 
|  | <div> | 
|  | <div class="separator"></div> | 
|  | <a class="section-item" id="more-extensions" target="_blank" | 
|  | href="$i18n{getMoreExtensionsUrl}" on-click="onMoreExtensionsTap_"> | 
|  | <span>$i18n{openChromeWebStore}</span> | 
|  | <div class="cr-icon icon-external"></div> | 
|  | <paper-ripple></paper-ripple> | 
|  | </a> | 
|  | </div> |