web: allow Sidebar to be opened on mobile (#417)
* web: initial sidebar trigger on mobile * web: render hamburger button as overlay top right
This commit is contained in:
35
web/src/elements/sidebar/SidebarHamburger.ts
Normal file
35
web/src/elements/sidebar/SidebarHamburger.ts
Normal file
@ -0,0 +1,35 @@
|
||||
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>`;
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user