From c2a30b760a7839e3036c43af42d43e84b539e768 Mon Sep 17 00:00:00 2001
From: Jens L <jens@beryju.org>
Date: Sat, 19 Dec 2020 16:54:25 +0100
Subject: [PATCH] web: allow Sidebar to be opened on mobile (#417)

* web: initial sidebar trigger on mobile

* web: render hamburger button as overlay top right
---
 web/src/authentik.css                        |  5 ---
 web/src/elements/sidebar/SidebarHamburger.ts | 35 ++++++++++++++++++++
 web/src/interfaces/Interface.ts              | 16 +++++++--
 3 files changed, 49 insertions(+), 7 deletions(-)
 create mode 100644 web/src/elements/sidebar/SidebarHamburger.ts

diff --git a/web/src/authentik.css b/web/src/authentik.css
index c86e4ddf62..6ede18e746 100644
--- a/web/src/authentik.css
+++ b/web/src/authentik.css
@@ -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;
 }
diff --git a/web/src/elements/sidebar/SidebarHamburger.ts b/web/src/elements/sidebar/SidebarHamburger.ts
new file mode 100644
index 0000000000..0312cefd54
--- /dev/null
+++ b/web/src/elements/sidebar/SidebarHamburger.ts
@@ -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>`;
+    }
+
+}
diff --git a/web/src/interfaces/Interface.ts b/web/src/interfaces/Interface.ts
index 2c7f35f8bd..6a49bbd12b 100644
--- a/web/src/interfaces/Interface.ts
+++ b/web/src/interfaces/Interface.ts
@@ -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/">