feat: update APIWithSidebarLayout to fix sidebar issue

jpmorganchase · Jan 6, 2025 · a0f253f · a0f253f
1 parent 116d0f1
commit a0f253f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 35 deletions.
diff --git a/packages/elements/src/components/API/APIWithSidebarLayout.tsx b/packages/elements/src/components/API/APIWithSidebarLayout.tsx
@@ -97,7 +97,7 @@ export const APIWithSidebarLayout: React.FC<SidebarLayoutProps> = ({
   );
 
   return (
-    <SidebarLayout ref={container} sidebar={sidebar}>
+    <SidebarLayout ref={container} sidebar={sidebar} renderSideBar={!useCustomNav} layout={layout}>
       {node && (
         <ElementsOptionsProvider renderExtensionAddon={renderExtensionAddon}>
           <ParsedDocs
@@ -111,6 +111,7 @@ export const APIWithSidebarLayout: React.FC<SidebarLayoutProps> = ({
             tryItCredentialsPolicy={tryItCredentialsPolicy}
             tryItCorsProxy={tryItCorsProxy}
             renderExtensionAddon={renderExtensionAddon}
+            tryItOutDefaultServer={tryItOutDefaultServer}
           />
         </ElementsOptionsProvider>
       )}
@@ -133,39 +134,22 @@ export const Sidebar: React.FC<SidebarProps> = ({ serviceNode, logo, container,
     }
   };
 
-  // return (
-  //   <>
-  //     <Flex ml={4} mb={5} alignItems="center">
-  //       {logo ? (
-  //         <Logo logo={{ url: logo, altText: 'logo' }} />
-  //       ) : (
-  //         serviceNode.data.logo && <Logo logo={serviceNode.data.logo} />
-  //       )}
-  //       <Heading size={4}>{serviceNode.name}</Heading>
-  //     </Flex>
-  //     <Flex flexGrow flexShrink overflowY="auto" direction="col">
-  //       <TableOfContents tree={tree} activeId={pathname} Link={Link} onLinkClick={handleTocClick} />
-  //     </Flex>
-  //     <PoweredByLink source={serviceNode.name} pathname={pathname} packageType="elements" />
-  //   </>
-  // );
-
   return (
-    <SidebarLayout ref={container} sidebar={sidebar} renderSideBar={!useCustomNav} layout={layout}>
-      {node && (
-        <ParsedDocs
-          key={pathname}
-          uri={pathname}
-          node={node}
-          nodeTitle={node.name}
-          layoutOptions={layoutOptions}
-          location={location}
-          exportProps={exportProps}
-          tryItCredentialsPolicy={tryItCredentialsPolicy}
-          tryItCorsProxy={tryItCorsProxy}
-          tryItOutDefaultServer={tryItOutDefaultServer}
-        />
-      )}
-    </SidebarLayout>
+    <>
+      <Flex ml={4} mb={5} alignItems="center">
+        {logo ? (
+          <Logo logo={{ url: logo, altText: 'logo' }} />
+        ) : (
+          serviceNode.data.logo && <Logo logo={serviceNode.data.logo} />
+        )}
+        <Heading size={4}>{serviceNode.name}</Heading>
+      </Flex>
+      <Flex flexGrow flexShrink overflowY="auto" direction="col">
+        <TableOfContents tree={tree} activeId={pathname} Link={Link} onLinkClick={handleTocClick} />
+      </Flex>
+      <PoweredByLink source={serviceNode.name} pathname={pathname} packageType="elements" />
+    </>
   );
 };
+
+Sidebar.displayName = 'Sidebar';
diff --git a/packages/elements/src/utils/oas/index.ts b/packages/elements/src/utils/oas/index.ts
@@ -3,7 +3,9 @@ import type {
   Oas2HttpOperationTransformer,
   Oas2HttpServiceTransformer,
   Oas3HttpEndpointOperationTransformer,
-  Oas3HttpServiceTransformer,
+  Oas3HttpServiceTransformer
+} from '@stoplight/http-spec/oas';
+import {
   OPERATION_CONFIG,
   WEBHOOK_CONFIG,
 } from '@stoplight/http-spec/oas';