feat: update layout navbar

Author: xiaoyu2er

apps/docs/global.ts

@@ -0,0 +1,9 @@
+import type { routing } from '@/i18n/routing';
+import type messages from './messages/en.json';
+
+declare module 'next-intl' {
+  interface AppConfig {
+    Locale: (typeof routing.locales)[number];
+    Messages: typeof messages;
+  }
+}

apps/docs/package.json

@@ -16,6 +16,7 @@
     "fumadocs-core": "15.2.15",
     "fumadocs-mdx": "11.6.2",
     "fumadocs-ui": "15.2.15",
+    "lucide-react": "^0.511.0",
     "next": "15.3.1",
     "next-intl": "^4.1.0",
     "react": "^19.1.0",

apps/docs/src/app/[locale]/(home)/layout.tsx

@@ -1,11 +1,8 @@
-import { baseOptions } from '@/app/[locale]/layout.config';
+import { useBaseOptions } from '@/hooks/useLayoutOptions';
 import { HomeLayout } from 'fumadocs-ui/layouts/home';
-import { useTranslations } from 'next-intl';
 import type { ReactNode } from 'react';
 
 export default function Layout({ children }: { children: ReactNode }) {
-  const t = useTranslations('baseOptions');
-  return (
-    <HomeLayout {...baseOptions({ title: t('title') })}>{children}</HomeLayout>
-  );
+  const baseOptions = useBaseOptions();
+  return <HomeLayout {...baseOptions}>{children}</HomeLayout>;
 }

apps/docs/src/app/[locale]/layout.config.tsx

@@ -1,14 +1,15 @@
 import { routing } from '@/i18n/routing';
 import { getOramaDocuments } from '@/lib/orama/orama-document';
 import { sourceMap } from '@/lib/source';
+import type { Locale } from 'next-intl';
 
 import { NextResponse } from 'next/server';
 
 export const revalidate = false;
 
 export async function GET(
   _req: Request,
-  { params }: { params: Promise<{ locale: string; page: string }> },
+  { params }: { params: Promise<{ locale: Locale; page: string }> },
 ) {
   const { locale, page = '0' } = await params;
   const s = sourceMap[locale];

apps/docs/src/app/[locale]/static/[page]/route.ts

@@ -1,24 +1,25 @@
 'use client';
 
-import { baseOptions } from '@/app/[locale]/layout.config';
+import { useBaseOptions } from '@/hooks/useLayoutOptions';
 import type { PageTree } from 'fumadocs-core/server';
 import {
   type DocsLayoutProps,
   DocsLayout as FumaDocsLayout,
 } from 'fumadocs-ui/layouts/docs';
-import { useTranslations } from 'next-intl';
 import type { ReactNode } from 'react';
 
 export function DocsLayout({
   children,
   pageTree,
-}: { children: ReactNode; pageTree: PageTree.Root }) {
-  const t = useTranslations('baseOptions');
+}: {
+  children: ReactNode;
+  pageTree: PageTree.Root;
+}) {
+  const baseOptions = useBaseOptions();
   const docsLayout: DocsLayoutProps = {
-    ...baseOptions({ title: t('title') }),
+    ...baseOptions,
     tree: pageTree,
     sidebar: {},
-    githubUrl: 'https://github.com/xiaoyu2er/nextjs-i18n-docs',
   };
 
   return <FumaDocsLayout {...docsLayout}>{children}</FumaDocsLayout>;

apps/docs/src/components/layout.tsx

@@ -0,0 +1,33 @@
+import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
+import { Book } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+
+export const useBaseOptions = () => {
+  const t = useTranslations('baseOptions');
+  return {
+    nav: {
+      title: (
+        <>
+          <svg
+            width="24"
+            height="24"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-label="Logo"
+          >
+            <title>Logo</title>
+            <circle cx={12} cy={12} r={12} fill="currentColor" />
+          </svg>
+          {t('title')}
+        </>
+      ),
+    },
+    githubUrl: 'https://github.com/xiaoyu2er/nextjs-i18n-docs',
+    links: [
+      {
+        icon: <Book />,
+        text: t('doc'),
+        url: '/docs/',
+      },
+    ],
+  } as BaseLayoutProps;
+};