habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: allow Sidebar to be opened on mobile (#417)

Browse Source 
* web: initial sidebar trigger on mobile

* web: render hamburger button as overlay top right
This commit is contained in:
Jens L
2020-12-19 16:54:25 +01:00
committed by GitHub
parent 6e24856d45
commit c2a30b760a
3 changed files with 49 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/interfaces/Interface.ts
View File

@ -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/">