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

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

52
web/src/elements/sidebar/SidebarBrand.ts
View File

@ -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>`;
}
}