<style include="cr-icons cr-hidden-style cr-nav-menu-item-style
cr-shared-style">
:host {
--sidebar-inactive-color: #5a5a5a;
color: var(--sidebar-inactive-color);
display: flex;
flex-direction: column;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
width: var(--sidebar-width);
}
@media (prefers-color-scheme: dark) {
:host {
--sidebar-inactive-color: var(--cr-primary-text-color);
}
}
#sectionMenu {
padding-top: 8px;
}
.separator {
border-top: var(--cr-separator-line);
margin: 8px 0;
}
#moreExtensions {
align-items: center;
display: flex;
margin-bottom: 8px;
}
#web-store-icon {
--iron-icon-height: 24px;
--iron-icon-width: 24px;
margin-inline-end: 18px;
margin-inline-start: -2px;
}
#discover-more-text {
line-height: 19px;
margin-inline-end: 10px;
}
#discover-more-text a {
color: var(--cr-link-color);
}
</style>
<cr-menu-selector id="sectionMenu"
selected-attribute="selected"
attr-for-selected="data-path"
selected="[[selectedPath_]]">
<!-- Values for "data-path" attribute must match the "Page" enum. -->
<a role="menuitem" class="cr-nav-menu-item" id="sectionsExtensions" href="/"
on-click="onLinkClick_" data-path="items-list">
<iron-icon icon="extensions-icons:my_extensions"></iron-icon>
$i18n{sidebarExtensions}
<cr-ripple></cr-ripple>
</a>
<a role="menuitem" class="cr-nav-menu-item" id="sectionsSitePermissions"
hidden="[[!enableEnhancedSiteControls]]" href="/sitePermissions"
on-click="onLinkClick_" data-path="site-permissions">
<iron-icon icon="extensions-icons:site_permissions"></iron-icon>
$i18n{sitePermissions}
<cr-ripple></cr-ripple>
</a>
<a role="menuitem" class="cr-nav-menu-item" id="sectionsShortcuts"
href="/shortcuts" on-click="onLinkClick_"
data-path="keyboard-shortcuts">
<iron-icon icon="extensions-icons:keyboard_shortcuts"></iron-icon>
$i18n{keyboardShortcuts}
<cr-ripple></cr-ripple>
</a>
</cr-menu-selector>
<div class="separator"></div>
<div class="cr-nav-menu-item" id="moreExtensions">
<iron-icon id="web-store-icon" icon="extensions-icons:web_store">
</iron-icon>
<span id="discover-more-text" class="cr-secondary-text"
on-click="onMoreExtensionsClick_"
inner-h-t-m-l="[[discoverMoreText_]]"></span>
<cr-ripple></cr-ripple>
</div>