From a8973764898960e6bbf02ca9cb5475aa09ede885 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Thu, 15 Dec 2022 17:32:44 +0000
Subject: [PATCH] Added the ability for the side menu to have a header

---
 .../app/components/navigation/SideMenu.tsx      | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index f8f19dc12..e55c7da6e 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -78,7 +78,12 @@ export function WorkflowsSideMenu() {
     },
   ];
 
-  return <SideMenu items={items} />;
+  return (
+    <SideMenu
+      items={items}
+      // header={<div className="text-white p-16">Title</div>}
+    />
+  );
 }
 
 const defaultStyle =
@@ -86,7 +91,13 @@ const defaultStyle =
 const activeStyle =
   "group flex items-center gap-2 px-3 py-3 text-base rounded transition bg-slate-800 text-white";
 
-function SideMenu({ items }: { items: SideMenuItem[] }) {
+function SideMenu({
+  header = undefined,
+  items,
+}: {
+  header?: React.ReactNode;
+  items: SideMenuItem[];
+}) {
   return (
     <div className="flex min-h-0 flex-1 flex-col bg-slate-1000 border-r border-slate-800">
       <div className="flex flex-1 flex-col overflow-y-auto pb-4">
@@ -94,6 +105,8 @@ function SideMenu({ items }: { items: SideMenuItem[] }) {
           className="mt-2 flex-1 space-y-1 bg-slate-1000 px-2"
           aria-label="Sidebar"
         >
+          {header}
+
           {items.map((item) => (
             <NavLink
               key={item.name}