From 40a885aaaa9c6620ba1db2da5a3325604efaca19 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Sun, 2 May 2021 12:48:45 +0200
Subject: [PATCH] web/admin: add collapse button to sidebar header on mobile
 viewport

closes #813

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/.babelrc                             |  1 +
 web/src/elements/sidebar/SidebarBrand.ts | 52 +++++++++++++++++++++---
 web/src/locales/en.po                    |  4 +-
 web/src/locales/pseudo-LOCALE.po         |  4 +-
 4 files changed, 51 insertions(+), 10 deletions(-)

diff --git a/web/.babelrc b/web/.babelrc
index 894e4d48b..fba4e89f0 100644
--- a/web/.babelrc
+++ b/web/.babelrc
@@ -4,6 +4,7 @@
         "@babel/typescript"
     ],
     "plugins": [
+        ["@babel/plugin-proposal-private-methods", { "loose": true }],
         [
             "@babel/plugin-proposal-decorators",
             {
diff --git a/web/src/elements/sidebar/SidebarBrand.ts b/web/src/elements/sidebar/SidebarBrand.ts
index 69873309d..201a28f1e 100644
--- a/web/src/elements/sidebar/SidebarBrand.ts
+++ b/web/src/elements/sidebar/SidebarBrand.ts
@@ -1,9 +1,18 @@
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFGlobal from "@patternfly/patternfly/patternfly-base.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import AKGlobal from "../../authentik.css";
+
 import { configureSentry } from "../../api/Sentry";
 import { Config } from "authentik-api";
 import { ifDefined } from "lit-html/directives/if-defined";
+import { EVENT_SIDEBAR_TOGGLE } from "../../constants";
+
+// If the viewport is wider than MIN_WIDTH, the sidebar
+// is shown besides the content, and not overlayed.
+export const MIN_WIDTH = 1200;
 
 export const DefaultConfig: Config = {
     brandingLogo: " /static/dist/assets/icons/icon_left_brand.svg",
@@ -21,12 +30,15 @@ export class SidebarBrand extends LitElement {
 
     static get styles(): CSSResult[] {
         return [
+            PFBase,
             PFGlobal,
             PFPage,
+            PFButton,
+            AKGlobal,
             css`
                 :host {
                     display: flex;
-                    flex-direction: column;
+                    flex-direction: row;
                     align-items: center;
                     height: 114px;
                     min-height: 114px;
@@ -36,19 +48,47 @@ export class SidebarBrand extends LitElement {
                     padding: 0 .5rem;
                     height: 42px;
                 }
+                button.pf-c-button.sidebar-trigger {
+                    background-color: transparent;
+                    border-radius: 0px;
+                    height: 100%;
+                    color: var(--ak-dark-foreground);
+                }
             `,
         ];
     }
 
+    constructor() {
+        super();
+        window.addEventListener("resize", () => {
+            this.requestUpdate();
+        });
+    }
+
     firstUpdated(): void {
         configureSentry(true).then((c) => {this.config = c;});
     }
 
     render(): TemplateResult {
-        return html` <a href="#/" class="pf-c-page__header-brand-link">
-            <div class="pf-c-brand ak-brand">
-                <img src="${ifDefined(this.config.brandingLogo)}" alt="authentik icon" loading="lazy" />
-            </div>
-        </a>`;
+        return html`
+            ${window.innerWidth <= MIN_WIDTH ? html`
+                <button
+                    class="sidebar-trigger pf-c-button"
+                    @click=${() => {
+                        this.dispatchEvent(
+                            new CustomEvent(EVENT_SIDEBAR_TOGGLE, {
+                                bubbles: true,
+                                composed: true,
+                            })
+                        );
+                    }}>
+                    <i class="fas fa-bars"></i>
+                </button>
+            ` : html``}
+            <a href="#/" class="pf-c-page__header-brand-link">
+                <div class="pf-c-brand ak-brand">
+                    <img src="${ifDefined(this.config.brandingLogo)}" alt="authentik icon" loading="lazy" />
+                </div>
+            </a>`;
     }
 }
diff --git a/web/src/locales/en.po b/web/src/locales/en.po
index 3e1758037..d099bda68 100644
--- a/web/src/locales/en.po
+++ b/web/src/locales/en.po
@@ -1705,7 +1705,7 @@ msgstr "Library"
 #: src/flows/stages/consent/ConsentStage.ts:28
 #: src/flows/stages/dummy/DummyStage.ts:27
 #: src/flows/stages/email/EmailStage.ts:26
-#: src/flows/stages/identification/IdentificationStage.ts:170
+#: src/flows/stages/identification/IdentificationStage.ts:171
 #: src/flows/stages/password/PasswordStage.ts:31
 #: src/flows/stages/prompt/PromptStage.ts:126
 #: src/pages/applications/ApplicationViewPage.ts:43
@@ -1780,7 +1780,7 @@ msgstr "Log the currently pending user in."
 msgid "Login password is synced from LDAP into authentik automatically. Enable this option only to write password changes in authentik back to LDAP."
 msgstr "Login password is synced from LDAP into authentik automatically. Enable this option only to write password changes in authentik back to LDAP."
 
-#: src/flows/stages/identification/IdentificationStage.ts:182
+#: src/flows/stages/identification/IdentificationStage.ts:183
 msgid "Login to continue to {0}."
 msgstr "Login to continue to {0}."
 
diff --git a/web/src/locales/pseudo-LOCALE.po b/web/src/locales/pseudo-LOCALE.po
index 3c32553f7..a696cf5ff 100644
--- a/web/src/locales/pseudo-LOCALE.po
+++ b/web/src/locales/pseudo-LOCALE.po
@@ -1697,7 +1697,7 @@ msgstr ""
 #: src/flows/stages/consent/ConsentStage.ts:28
 #: src/flows/stages/dummy/DummyStage.ts:27
 #: src/flows/stages/email/EmailStage.ts:26
-#: src/flows/stages/identification/IdentificationStage.ts:170
+#: src/flows/stages/identification/IdentificationStage.ts:171
 #: src/flows/stages/password/PasswordStage.ts:31
 #: src/flows/stages/prompt/PromptStage.ts:126
 #: src/pages/applications/ApplicationViewPage.ts:43
@@ -1772,7 +1772,7 @@ msgstr ""
 msgid "Login password is synced from LDAP into authentik automatically. Enable this option only to write password changes in authentik back to LDAP."
 msgstr ""
 
-#: src/flows/stages/identification/IdentificationStage.ts:182
+#: src/flows/stages/identification/IdentificationStage.ts:183
 msgid "Login to continue to {0}."
 msgstr ""