From 103e723d8cf57b5e16eb60d7095bca5cb865f2ef Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Thu, 16 Dec 2021 12:10:28 +0100
Subject: [PATCH] web/elements: add support for sidebar on table page

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/elements/table/TablePage.ts | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/web/src/elements/table/TablePage.ts b/web/src/elements/table/TablePage.ts
index a52416a09..8ef5462cc 100644
--- a/web/src/elements/table/TablePage.ts
+++ b/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>`;
     }
 }