@exmg/exmg-sidemenu NPM

`<exmg-sidemenu>`

@exmg/exmg-sidemenu

WARNING: This element is not compatible with Polymer 1.0

<exmg-sidemenu> Is a collapsible sidemenu.

Installation

npm install @exmg/exmg-sidemenu

Example Usage

<exmg-sidemenu
  selected="rooms/"
  ?collapsed="${this.collapsed}"
  @collapsed="${this._handleCollapsed}"
  @selected-changed="${this._handleSelectedChanged}"
  ?narrow="${this.narrow}"
>
  <exmg-sidemenu-header slot="header" ?collapsed="${this.collapsed}"></exmg-sidemenu-header>
  ${this.renderMenu()} ${this.renderFooterButton()}
</exmg-sidemenu>

API

Slots

Name	Description
default	Menu items of the side-menu
`footer`	Footer item of the side-menu

Properties/Attributes

Name	Type	Default	Description
`collapsed`	`boolean`	false	Whether the side-menu is collapsed or not
`selected`	`string`	None	Contains the path of the selected menu item
`disableCollapse`	`boolean`	false	Disable collapse functionailty
`footerItem`	`boolean`	false	Whether the side-menu has a footer-item

Methods

None

Events

Name	Description
`collapsed`	Fired when the side-menu collapse toggles
`selected-changed`	Fired when the selected menu item changes

CSS Custom Properties

Name	Default	Description
`--exmg-sidemenu-background`	`white`	Sidemenu background color
`--exmg-sidemenu-width`	`256px`	Sidemenu width
`--exmg-sidemenu-collapsed-width`	`white`	Sidemenu collapsed width
`--exmg-sidemenu-group-text-color`	`54% black`	Group titletext color
`--exmg-sidemenu-item-text-color`	`54% black`	Item text color
`--exmg-sidemenu-menu-footer-background-color`	`#F9FAF9`	Footer background color
`--exmg-sidemenu-menu-border-color`	`#DDD`	Border color of menu
`--exmg-sidemenu-icon-color`	`54% black`	Sidemenu icon color
`--exmg-sidemenu-hover-background-color`	`--paper-grey-200`	Item hover background color
`--exmg-sidemenu-selected-text-color`	`--primary-color`	Item selected text color
`--exmg-sidemenu-badge-background-color`	`#ff6978`	Badge background color
`--exmg-sidemenu-badge-color`	`#fff`	Badge font color