web/elements: add support for sidebar on table page

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/elements/table/TablePage.ts

@@ -4,6 +4,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
 
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFSidebar from "@patternfly/patternfly/components/Sidebar/sidebar.css";
 
 import "../../elements/PageHeader";
 import { Table } from "./Table";
@@ -14,7 +15,15 @@ export abstract class TablePage<T> extends Table<T> {
     abstract pageIcon(): string;
 
     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 {
@@ -25,7 +34,15 @@ export abstract class TablePage<T> extends Table<T> {
             >
             </ak-page-header>
             <section class="pf-c-page__main-section pf-m-no-padding-mobile">
-                <div class="pf-c-card">${this.renderTable()}</div>
+                <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>
+                        ${this.renderSidebarAfter()}
+                    </div>
+                </div>
             </section>`;
     }
 }