web/admin: add collapse button to sidebar header on mobile viewport

closes #813

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-05-02 12:48:45 +02:00
parent c529340d6c
commit 40a885aaaa
4 changed files with 51 additions and 10 deletions

View File

@ -4,6 +4,7 @@
"@babel/typescript" "@babel/typescript"
], ],
"plugins": [ "plugins": [
["@babel/plugin-proposal-private-methods", { "loose": true }],
[ [
"@babel/plugin-proposal-decorators", "@babel/plugin-proposal-decorators",
{ {

View File

@ -1,9 +1,18 @@
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import PFPage from "@patternfly/patternfly/components/Page/page.css"; import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFGlobal from "@patternfly/patternfly/patternfly-base.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 { configureSentry } from "../../api/Sentry";
import { Config } from "authentik-api"; import { Config } from "authentik-api";
import { ifDefined } from "lit-html/directives/if-defined"; 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 = { export const DefaultConfig: Config = {
brandingLogo: " /static/dist/assets/icons/icon_left_brand.svg", brandingLogo: " /static/dist/assets/icons/icon_left_brand.svg",
@ -21,12 +30,15 @@ export class SidebarBrand extends LitElement {
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [ return [
PFBase,
PFGlobal, PFGlobal,
PFPage, PFPage,
PFButton,
AKGlobal,
css` css`
:host { :host {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
align-items: center; align-items: center;
height: 114px; height: 114px;
min-height: 114px; min-height: 114px;
@ -36,19 +48,47 @@ export class SidebarBrand extends LitElement {
padding: 0 .5rem; padding: 0 .5rem;
height: 42px; 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 { firstUpdated(): void {
configureSentry(true).then((c) => {this.config = c;}); configureSentry(true).then((c) => {this.config = c;});
} }
render(): TemplateResult { render(): TemplateResult {
return html` <a href="#/" class="pf-c-page__header-brand-link"> return html`
<div class="pf-c-brand ak-brand"> ${window.innerWidth <= MIN_WIDTH ? html`
<img src="${ifDefined(this.config.brandingLogo)}" alt="authentik icon" loading="lazy" /> <button
</div> class="sidebar-trigger pf-c-button"
</a>`; @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>`;
} }
} }

View File

@ -1705,7 +1705,7 @@ msgstr "Library"
#: src/flows/stages/consent/ConsentStage.ts:28 #: src/flows/stages/consent/ConsentStage.ts:28
#: src/flows/stages/dummy/DummyStage.ts:27 #: src/flows/stages/dummy/DummyStage.ts:27
#: src/flows/stages/email/EmailStage.ts:26 #: 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/password/PasswordStage.ts:31
#: src/flows/stages/prompt/PromptStage.ts:126 #: src/flows/stages/prompt/PromptStage.ts:126
#: src/pages/applications/ApplicationViewPage.ts:43 #: 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." 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." 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}." msgid "Login to continue to {0}."
msgstr "Login to continue to {0}." msgstr "Login to continue to {0}."

View File

@ -1697,7 +1697,7 @@ msgstr ""
#: src/flows/stages/consent/ConsentStage.ts:28 #: src/flows/stages/consent/ConsentStage.ts:28
#: src/flows/stages/dummy/DummyStage.ts:27 #: src/flows/stages/dummy/DummyStage.ts:27
#: src/flows/stages/email/EmailStage.ts:26 #: 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/password/PasswordStage.ts:31
#: src/flows/stages/prompt/PromptStage.ts:126 #: src/flows/stages/prompt/PromptStage.ts:126
#: src/pages/applications/ApplicationViewPage.ts:43 #: 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." msgid "Login password is synced from LDAP into authentik automatically. Enable this option only to write password changes in authentik back to LDAP."
msgstr "" msgstr ""
#: src/flows/stages/identification/IdentificationStage.ts:182 #: src/flows/stages/identification/IdentificationStage.ts:183
msgid "Login to continue to {0}." msgid "Login to continue to {0}."
msgstr "" msgstr ""