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 ( ), - // 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: ( ), }} - sidebar={{ banner: null }} + sidebar={{ banner: null, footer: }} > {children} 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 ( + + + + ); +}