portal: Update SDK Reference breadcrumbs UI (#8662)

Author: MananTank

apps/portal/src/app/references/components/TDoc/PageLayout.tsx

@@ -52,12 +52,27 @@ export function getTDocPage(options: {
       // category pages
       if (docSlug in subgroups) {
         return (
-          <CategoryPage
-            doc={doc}
-            packageSlug={packageSlug}
-            slug={docSlug as keyof typeof subgroups}
-            version={version}
-          />
+          <div>
+            <Breadcrumb
+              crumbs={[
+                {
+                  href: `/references/${packageSlug}/${version}`,
+                  name: sdkTitle,
+                },
+                {
+                  href: `/references/${packageSlug}/${version}/${docSlug}`,
+                  name: docSlug,
+                },
+              ]}
+            />
+
+            <CategoryPage
+              doc={doc}
+              packageSlug={packageSlug}
+              slug={docSlug as keyof typeof subgroups}
+              version={version}
+            />
+          </div>
         );
       }
 
@@ -74,7 +89,7 @@ export function getTDocPage(options: {
             crumbs={[
               {
                 href: `/references/${packageSlug}/${version}`,
-                name: "References",
+                name: sdkTitle,
               },
               {
                 href: `/references/${packageSlug}/${version}/${selectedDoc.name}`,
@@ -209,8 +224,8 @@ async function IndexContent(props: {
 
   return (
     <div>
-      <Heading anchorId="reference" level={1}>
-        {props.sdkTitle} Reference
+      <Heading anchorId="reference" level={1} className="mb-6 mt-2">
+        {props.sdkTitle}
       </Heading>
 
       <div className="flex flex-col gap-3">

apps/portal/src/components/Layouts/DocLayout.tsx

@@ -46,7 +46,11 @@ export function DocLayout(props: DocLayoutProps) {
             "hidden xl:flex",
           )}
         >
-          <DocSidebar {...props.sideBar} header={props.sidebarHeader} />
+          <DocSidebar
+            {...props.sideBar}
+            header={props.sidebarHeader}
+            className="pt-1"
+          />
         </aside>
       )}
       <div className="sticky top-sticky-top-height z-stickyMobileSidebar border-b bg-card/50 backdrop-blur-xl p-4 xl:hidden -mx-4">
@@ -57,12 +61,7 @@ export function DocLayout(props: DocLayoutProps) {
         data-no-llm={props.noLLM}
         data-noindex={props.noIndex}
       >
-        <div className="grow xl:mt-6">
-          <h5 className="mb-2 text-sm text-muted-foreground">
-            {props.sideBar.name}
-          </h5>
-          {props.children}
-        </div>
+        <div className="grow xl:mt-6">{props.children}</div>
         <div className="mt-16 xl:mt-20">
           <PageFooter
             editPageButton={props.editPageButton}

apps/portal/src/components/others/Sidebar.tsx

@@ -51,11 +51,17 @@ type ReferenceSideBarProps = {
   onLinkClick?: () => void;
   header?: React.ReactNode;
   name: string;
+  className?: string;
 };
 
 export function DocSidebar(props: ReferenceSideBarProps) {
   return (
-    <div className="flex h-full flex-col pb-10 pt-6 text-muted-foreground text-sm">
+    <div
+      className={cn(
+        "flex h-full flex-col pb-10 pt-6 text-muted-foreground text-sm",
+        props.className,
+      )}
+    >
       {/* Side bar Name */}
       {props.header}
       <ul className="styled-scrollbar transform-gpu space-y-1">