Move the sidebar collapse control to the header

apps/commons-docs/app/docs/layout.tsx

@@ -1,8 +1,8 @@
 import { DocsLayout } from 'fumadocs-ui/layouts/docs';
+import { SidebarCollapseTrigger } from 'fumadocs-ui/layouts/docs/sidebar';
 import type { ReactNode } from 'react';
 import Image from 'next/image';
 import { source } from '@/lib/source';
-import { SidebarFooter } from '@/components/sidebar-footer';
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
@@ -17,17 +17,27 @@ export default function Layout({ children }: { children: ReactNode }) {
         // The same wordmark the commons-app dashboard sidebar shows when it is
         // open, at the same height — one brand mark across both surfaces.
         title: (
-          <Image
-            src="/logo.jpg"
-            alt="Agent Commons"
-            width={131}
-            height={60}
-            priority
-            className="h-8 w-auto rounded-md object-contain"
-          />
+          <span className="flex items-center gap-2">
+            <Image
+              src="/logo.jpg"
+              alt="Agent Commons"
+              width={131}
+              height={60}
+              priority
+              className="h-8 w-auto rounded-md object-contain"
+            />
+            <span className="rounded-full border border-fd-border px-1.5 py-px font-space text-[10px] font-medium uppercase tracking-widest text-fd-muted-foreground">
+              Docs
+            </span>
+          </span>
+        ),
+        // Sits beside the wordmark, the way the app puts its collapse control in
+        // the sidebar header. The copy in the footer is hidden in globals.css.
+        children: (
+          <SidebarCollapseTrigger className="docs-sidebar-toggle ms-auto -me-2 text-fd-muted-foreground max-md:hidden" />
         ),
       }}
-      sidebar={{ banner: null, footer: <SidebarFooter /> }}
+      sidebar={{ banner: null }}
     >
       {children}
     </DocsLayout>

apps/commons-docs/app/globals.css

@@ -288,10 +288,26 @@ body::before {
   border-radius: calc(var(--radius) - 2px);
 }
 
-/* The footer floats over a scrolling page tree, so it needs its own ground —
-   otherwise the last nav item bleeds through it. */
-#nd-sidebar > div:last-child {
-  background-color: hsl(var(--fd-background));
+/* Fumadocs puts the collapse control in the sidebar footer and its expand
+   counterpart at the bottom of the viewport. Both belong at the top beside the
+   wordmark, as they are in commons-app. The header copy is rendered through
+   `nav.children` and carries `.docs-sidebar-toggle`; hide the footer one, and
+   lift the floating expand button to the same line. */
+#nd-sidebar button[aria-label="Collapse Sidebar"]:not(.docs-sidebar-toggle) {
+  display: none;
+}
+
+#nd-docs-layout > button[aria-label="Collapse Sidebar"] {
+  top: 0.9rem;
+  bottom: auto;
+}
+
+/* Below xl the table of contents becomes a sticky bar across the top of the
+   page, so the expand button has to clear it rather than sit on top of it. */
+@media (max-width: 1279px) {
+  #nd-docs-layout > button[aria-label="Collapse Sidebar"] {
+    top: 3.4rem;
+  }
 }
 
 /* Cards on the index pages lift very slightly on hover — the same soft,