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
parent
c529340d6c
commit
40a885aaaa
|
|
@ -4,6 +4,7 @@
|
|||
"@babel/typescript"
|
||||
],
|
||||
"plugins": [
|
||||
["@babel/plugin-proposal-private-methods", { "loose": true }],
|
||||
[
|
||||
"@babel/plugin-proposal-decorators",
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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,16 +48,44 @@ 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">
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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}."
|
||||
|
||||
|
|
|
|||
|
|
@ -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 ""
|
||||
|
||||
|
|
|
|||
Reference in New Issue