Move the sidebar links menu to the footer

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

@@ -3,16 +3,15 @@ import { SidebarCollapseTrigger } from 'fumadocs-ui/layouts/docs/sidebar';
 import type { ReactNode } from 'react';
 import Image from 'next/image';
 import { source } from '@/lib/source';
+import { SidebarLinks } from '@/components/sidebar-links';
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
     <DocsLayout
       tree={source.pageTree}
-      githubUrl="https://github.com/Arttribute/agent-commons"
-      links={[
-        { text: 'Web app', url: 'https://www.agentcommons.io', external: true },
-        { text: 'Status', url: 'https://api.agentcommons.io/health', external: true },
-      ]}
+      // `links` and `githubUrl` are deliberately withheld: DocsLayout would put
+      // its own links menu beside the wordmark, and that corner is the collapse
+      // control's. SidebarLinks renders the same menu in the footer instead.
       nav={{
         // The same wordmark the commons-app dashboard sidebar shows when it is
         // open, at the same height — one brand mark across both surfaces.
@@ -31,13 +30,14 @@ export default function Layout({ children }: { children: ReactNode }) {
             </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.
+        // Sits at the far right of the header, the way the app puts its collapse
+        // control in the sidebar header. The copy Fumadocs renders 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 }}
+      sidebar={{ banner: null, footer: <SidebarLinks /> }}
     >
       {children}
     </DocsLayout>

apps/commons-docs/app/globals.css

@@ -288,6 +288,19 @@ body::before {
   border-radius: calc(var(--radius) - 2px);
 }
 
+/* The footer is one line: the theme toggle on the left, the links menu on the
+   right. Fumadocs stacks its own footer row and anything passed through
+   `sidebar.footer`, so lay them out side by side and let the first row take up
+   the slack. */
+#nd-sidebar div:has(> .docs-sidebar-links) {
+  flex-direction: row;
+  align-items: center;
+}
+
+#nd-sidebar div:has(> .docs-sidebar-links) > div:first-child {
+  flex: 1;
+}
+
 /* 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

apps/commons-docs/components/sidebar-links.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { MoreHorizontal } from 'lucide-react';
+import { LinksMenu } from 'fumadocs-ui/layouts/docs.client';
+import { getLinks } from 'fumadocs-ui/layouts/shared';
+
+/**
+ * The off-site links, parked at the bottom-right of the sidebar rather than
+ * beside the wordmark — that corner belongs to the collapse control.
+ *
+ * DocsLayout renders its own copy of this menu whenever it is given `links` or
+ * `githubUrl`, so the layout withholds both and passes this through
+ * `sidebar.footer` instead.
+ */
+const LINKS = getLinks(
+  [
+    { text: 'Web app', url: 'https://www.agentcommons.io', external: true },
+    { text: 'Status', url: 'https://api.agentcommons.io/health', external: true },
+  ],
+  'https://github.com/Arttribute/agent-commons',
+);
+
+export function SidebarLinks() {
+  return (
+    <LinksMenu
+      items={LINKS}
+      aria-label="More links"
+      className="docs-sidebar-links inline-flex items-center justify-center rounded-md p-1.5 text-fd-muted-foreground transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground [&_svg]:size-5"
+    >
+      <MoreHorizontal />
+    </LinksMenu>
+  );
+}