web/elements: add support for sidebar on table page

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-12-16 12:10:28 +01:00
parent 7d6e88061f
commit 103e723d8c

View file

@ -4,6 +4,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
import PFContent from "@patternfly/patternfly/components/Content/content.css"; import PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFPage from "@patternfly/patternfly/components/Page/page.css"; import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFSidebar from "@patternfly/patternfly/components/Sidebar/sidebar.css";
import "../../elements/PageHeader"; import "../../elements/PageHeader";
import { Table } from "./Table"; import { Table } from "./Table";
@ -14,7 +15,15 @@ export abstract class TablePage<T> extends Table<T> {
abstract pageIcon(): string; abstract pageIcon(): string;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return super.styles.concat(PFPage, PFContent); return super.styles.concat(PFPage, PFContent, PFSidebar);
}
renderSidebarBefore(): TemplateResult {
return html``;
}
renderSidebarAfter(): TemplateResult {
return html``;
} }
render(): TemplateResult { render(): TemplateResult {
@ -25,7 +34,15 @@ export abstract class TablePage<T> extends Table<T> {
> >
</ak-page-header> </ak-page-header>
<section class="pf-c-page__main-section pf-m-no-padding-mobile"> <section class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-c-sidebar pf-m-gutter">
<div class="pf-c-sidebar__main">
${this.renderSidebarBefore()}
<div class="pf-c-sidebar__content">
<div class="pf-c-card">${this.renderTable()}</div> <div class="pf-c-card">${this.renderTable()}</div>
</div>
${this.renderSidebarAfter()}
</div>
</div>
</section>`; </section>`;
} }
} }