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:
parent
6e24856d45
commit
c2a30b760a
|
@ -5,11 +5,6 @@ html {
|
|||
--pf-c-nav__link--PaddingLeft: 0.5rem;
|
||||
}
|
||||
|
||||
/* Fix patternfly sidebar and header with open Modal */
|
||||
.pf-c-page__sidebar {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.pf-c-page__header {
|
||||
z-index: 0;
|
||||
}
|
||||
|
|
|
@ -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>`;
|
||||
}
|
||||
|
||||
}
|
|
@ -1,11 +1,14 @@
|
|||
import { gettext } from "django";
|
||||
import { html, LitElement, TemplateResult } from "lit-element";
|
||||
import { html, LitElement, property, TemplateResult } from "lit-element";
|
||||
import { SidebarItem } from "../elements/sidebar/Sidebar";
|
||||
|
||||
import "../elements/router/RouterOutlet";
|
||||
import "../elements/messages/MessageContainer";
|
||||
import "../elements/sidebar/SidebarHamburger";
|
||||
|
||||
export abstract class Interface extends LitElement {
|
||||
@property({type: Boolean})
|
||||
sidebarOpen?: boolean;
|
||||
|
||||
abstract get sidebar(): SidebarItem[];
|
||||
|
||||
|
@ -13,11 +16,20 @@ export abstract class Interface extends LitElement {
|
|||
return this;
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
window.addEventListener("ak-sidebar-toggle", () => {
|
||||
this.sidebarOpen = !this.sidebarOpen;
|
||||
});
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`<ak-message-container></ak-message-container>
|
||||
<div class="pf-c-page">
|
||||
<a class="pf-c-skip-to-content pf-c-button pf-m-primary" href="#main-content">${gettext("Skip to content")}</a>
|
||||
<ak-sidebar class="pf-c-page__sidebar" .items=${this.sidebar}>
|
||||
<ak-sidebar-hamburger>
|
||||
</ak-sidebar-hamburger>
|
||||
<ak-sidebar class="pf-c-page__sidebar ${this.sidebarOpen ? "pf-m-expanded" : "pf-m-collapsed"}" .items=${this.sidebar}>
|
||||
</ak-sidebar>
|
||||
<main class="pf-c-page__main">
|
||||
<ak-router-outlet role="main" class="pf-c-page__main" tabindex="-1" id="main-content" defaultUrl="/library/">
|
||||
|
|
Reference in New Issue