Added flexible sidebar

Author: LeeGathercole

eventcatalog/src/components/SchemaExplorer/FHIRSchemaViewer.tsx

@@ -1,3 +1,4 @@
+import path from 'path';
 import React, { useMemo } from 'react';
 
 interface FHIRSchemaViewerProps {
@@ -39,13 +40,14 @@ function buildElementTree(elements: any[]): FhirElementNode[] {
   const stack: { depth: number; node: FhirElementNode }[] = [];
 
   elements.forEach((el: any, index: number) => {
-    const depth = el.path.split('.').length;
+    const pathParts = el.path.split('.');
+    const depth = pathParts.length;
 
     const node: FhirElementNode = {
       key: `${index}`,
       id: el.id,
       path: el.path,
-      name: el.name,
+      name: el.sliceName ?? pathParts[pathParts.length - 1],
       min: el.min ?? 0,
       max: el.max ?? '1',
       types: Array.isArray(el.type) ? el.type.map((t: any) => t.code) : [],
@@ -200,7 +202,7 @@ function ElementNodeView({ node, depth }: { node: FhirElementNode; depth: number
           <span style={{ width: 14 }} />
         )}
 
-        <span style={{ fontWeight: depth === 0 ? 'bold' : 'normal' }}>{node.path}</span>
+        <span style={{ fontWeight: depth === 0 ? 'bold' : 'normal' }}>{node.name}</span>
 
         <span style={{ opacity: 0.6, marginLeft: 6 }}>
           ({node.min}..{node.max})

eventcatalog/src/components/SideNav/SideNav.astro

@@ -25,3 +25,38 @@ const props = await getNestedSideBarData();
     setSidebarData(data);
   }
 </script>
+
+<script>
+  const sidebar = document.getElementById('sidebar');
+  const resizer = document.getElementById('sidebar-resizer');
+
+  if (sidebar && resizer) {
+    let isResizing = false;
+
+    resizer.addEventListener('mousedown', () => {
+      isResizing = true;
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+    });
+
+    document.addEventListener('mousemove', (e) => {
+      if (!isResizing) return;
+
+      const newWidth = Math.max(240, Math.min(600, e.clientX - 56));
+      sidebar.style.setProperty('--sidebar-width', `${newWidth}px`);
+      localStorage.setItem('eventcatalog-sidebar-width', newWidth);
+    });
+
+    document.addEventListener('mouseup', () => {
+      isResizing = false;
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    });
+
+    // Restore saved width
+    const savedWidth = localStorage.getItem('eventcatalog-sidebar-width');
+    if (savedWidth) {
+      sidebar.style.setProperty('--sidebar-width', `${savedWidth}px`);
+    }
+  }
+</script>

eventcatalog/src/layouts/VerticalSideBarLayout.astro

@@ -344,7 +344,15 @@ const canPageBeEmbedded = isEmbedEnabled();
 
         {
           showNestedSideBar && (
-            <SideNav id="sidebar" class={`sidebar-transition h-content bg-white  border-r border-gray-100 w-[320px] ml-14`} />
+            <SideNav
+              id="sidebar"
+              class="sidebar-transition h-content bg-white border-r border-gray-100 ml-14"
+              style="width: var(--sidebar-width, 320px);"
+            />
+            <div
+              id="sidebar-resizer"
+              class="w-1 cursor-col-resize bg-transparent hover:bg-blue-200"
+              style="position: relative; z-index: 30;"/>
           )
         }
       </aside>