From 715980dec2dc28e170f786e07da5b20fe049aeb3 Mon Sep 17 00:00:00 2001
From: bashybaranaba <bashybaranaba@gmail.com>
Date: Wed, 2 Sep 2026 15:23:18 +0300
Subject: [PATCH] Move the sidebar links menu to the footer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The collapse control and the links menu were sharing the top-right of the
sidebar. The collapse control now has that corner to itself and the "..."
menu sits at the bottom-right, opposite the theme toggle.

DocsLayout renders its own links menu beside the wordmark whenever it is
given `links` or `githubUrl`, so both are withheld and the same menu is
passed through `sidebar.footer` instead — which also keeps the links
reachable on mobile, where DocsLayout would otherwise have scattered them
between the page tree and the footer.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 apps/commons-docs/app/docs/layout.tsx         | 16 ++++-----
 apps/commons-docs/app/globals.css             | 13 ++++++++
 .../commons-docs/components/sidebar-links.tsx | 33 +++++++++++++++++++
 3 files changed, 54 insertions(+), 8 deletions(-)
 create mode 100644 apps/commons-docs/components/sidebar-links.tsx

diff --git a/apps/commons-docs/app/docs/layout.tsx b/apps/commons-docs/app/docs/layout.tsx
index ec5bc69c..2a56d00a 100644
--- a/apps/commons-docs/app/docs/layout.tsx
+++ b/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>
diff --git a/apps/commons-docs/app/globals.css b/apps/commons-docs/app/globals.css
index 36b55166..8b32beb6 100644
--- a/apps/commons-docs/app/globals.css
+++ b/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
diff --git a/apps/commons-docs/components/sidebar-links.tsx b/apps/commons-docs/components/sidebar-links.tsx
new file mode 100644
index 00000000..664a3215
--- /dev/null
+++ b/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>
+  );
+}