c2a30b760a
* web: initial sidebar trigger on mobile * web: render hamburger button as overlay top right
36 lines
1 KiB
TypeScript
36 lines
1 KiB
TypeScript
import { css, CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
|
|
import { COMMON_STYLES } from "../../common/styles";
|
|
|
|
@customElement("ak-sidebar-hamburger")
|
|
export class SidebarHamburger extends LitElement {
|
|
|
|
static get styles(): CSSResult[] {
|
|
return COMMON_STYLES.concat(
|
|
css`
|
|
:host {
|
|
position: absolute;
|
|
top: var(--pf-c-page__main-section--PaddingTop);
|
|
right: var(--pf-c-page__main-section--PaddingRight);
|
|
z-index: 250;
|
|
}
|
|
`
|
|
);
|
|
}
|
|
|
|
onClick(): void {
|
|
this.dispatchEvent(
|
|
new CustomEvent("ak-sidebar-toggle", {
|
|
bubbles: true,
|
|
composed: true,
|
|
})
|
|
);
|
|
}
|
|
|
|
render(): TemplateResult {
|
|
return html`<button @click=${() => (this.onClick())} class="pf-c-button pf-m-plain" type="button">
|
|
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
</button>`;
|
|
}
|
|
|
|
}
|