feat: Add collapsible toggle to right sidebar (ToC + SDK details)

src/components/collapsibleRightSidebar/index.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+/**
+ * Collapsible wrapper for the right sidebar that contains
+ * both the table of contents and platform SDK details
+ */
+
+import {ReactNode, useState} from 'react';
+
+import styles from './style.module.scss';
+
+type CollapsibleRightSidebarProps = {
+  children: ReactNode;
+};
+
+export function CollapsibleRightSidebar({children}: CollapsibleRightSidebarProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const handleToggle = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  return (
+    <aside
+      data-layout-anchor="right"
+      className={`${styles.collapsibleSidebar} ${isExpanded ? styles.expanded : styles.collapsed} h-[calc(100vh-var(--header-height))] top-[var(--header-height)] right-0 overflow-y-auto hidden toc:block flex-none`}
+    >
+      <button
+        className={`${styles.collapseToggle} ${isExpanded ? styles.active : ''}`}
+        onClick={handleToggle}
+        aria-label={isExpanded ? 'Hide table of contents' : 'Show table of contents'}
+        title={isExpanded ? 'Hide table of contents' : 'Show table of contents'}
+      >
+        📖
+      </button>
+      {isExpanded && <div className="sidebar">{children}</div>}
+    </aside>
+  );
+}

src/components/collapsibleRightSidebar/style.module.scss

@@ -0,0 +1,87 @@
+.collapsibleSidebar {
+  position: sticky;
+  margin-left: 5px;
+  transition: width 0.3s ease, min-width 0.3s ease;
+  overflow: hidden;
+
+  // Ensure all content inside sidebar animates together
+  :global(.sidebar) {
+    transition: opacity 0.15s ease;
+  }
+
+  &.expanded {
+    width: 250px;
+    min-width: 250px;
+
+    :global(.sidebar) {
+      opacity: 1;
+      visibility: visible;
+      transition-delay: 0.2s; // Fade in after width expands
+    }
+
+    // Prevent individual child animations
+    :global(.sidebar) * {
+      animation: none !important;
+    }
+  }
+
+  &.collapsed {
+    width: 3rem;
+    min-width: 3rem;
+
+    :global(.sidebar) {
+      opacity: 0;
+      visibility: hidden;
+      transition-delay: 0s; // Fade out immediately
+    }
+  }
+}
+
+.collapseToggle {
+  position: absolute;
+  top: 2.5rem;
+  left: 0.5rem;
+  background: var(--gray-a3);
+  border: 1px solid var(--gray-a5);
+  border-radius: 4px;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 1.2rem;
+  color: var(--gray-11);
+  transition: background 0.2s ease, color 0.2s ease;
+  z-index: 100;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+  &:hover {
+    background: var(--gray-a4);
+    color: var(--gray-12);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+
+  &.active {
+    background: var(--accent-a3);
+    border-color: var(--accent-a6);
+
+    &:hover {
+      background: var(--accent-a4);
+    }
+  }
+}
+
+// Keep button in consistent position to avoid jerky animation
+.collapsed,
+.expanded {
+  .collapseToggle {
+    right: 0.5rem;
+    left: auto;
+  }
+}
+

src/components/docPage/index.tsx

@@ -12,6 +12,7 @@ import './type.scss';
 import {Banner} from '../banner';
 import {Breadcrumbs} from '../breadcrumbs';
 import {CodeContextProvider} from '../codeContext';
+import {CollapsibleRightSidebar} from '../collapsibleRightSidebar';
 import {CopyMarkdownButton} from '../copyMarkdownButton';
 import {DocFeedback} from '../docFeedback';
 import {GitHubCTA} from '../githubCTA';
@@ -67,10 +68,10 @@ export function DocPage({
         {sidebar ?? (
           <Sidebar path={unversionedPath.split('/')} versions={frontMatter.versions} />
         )}
-        <main className="main-content flex w-full mt-[var(--header-height)] flex-1 mx-auto">
+        <main className="main-content flex mt-[var(--header-height)] flex-1 min-w-0 mx-auto">
           <div
             className={[
-              'mx-auto pt-6 px-6 prose dark:prose-invert max-w-full text-[var(--gray-12)] prose-a:no-underline hover:prose-a:underline',
+              'mx-auto pt-6 pl-6 pr-3 prose dark:prose-invert max-w-full text-[var(--gray-12)] prose-a:no-underline hover:prose-a:underline',
               'prose-code:font-normal prose-code:font-mono marker:text-[var(--accent)] prose-li:my-1',
               'prose-headings:mt-0 prose-headings:font-medium prose-headings:relative prose-headings:text-[var(--gray-12)]',
               'prose-blockquote:font-normal prose-blockquote:border-l-[3px] prose-em:font-normal prose-blockquote:text-[var(--gray-12)]',
@@ -117,18 +118,13 @@ export function DocPage({
           </div>
         </main>
         {hasToc && (
-          <aside
-            data-layout-anchor="right"
-            className="sticky h-[calc(100vh-var(--header-height))] top-[var(--header-height)] overflow-y-auto hidden toc:block flex-none w-[250px] min-w-[250px]"
-          >
-            <div className="sidebar">
-              <SidebarTableOfContents />
-              <PlatformSdkDetail />
-            </div>
-          </aside>
+          <CollapsibleRightSidebar>
+            <SidebarTableOfContents />
+            <PlatformSdkDetail />
+          </CollapsibleRightSidebar>
         )}
       </section>
-      <style>{`:root { --doc-content-w: 1200px; } #doc-content { max-width: var(--doc-content-w); box-sizing: border-box; }`}</style>
+      <style>{`:root { --doc-content-w: 1200px; } #doc-content { box-sizing: border-box; }`}</style>
       <style>{`
         @media (min-width: 2057px) {
           :root {