Header & Footer

Header

The header is rendered by src/app/_components/TopHeader.tsx and supports desktop navigation, mobile drawer, mega menu, search, theme toggle, and language switcher.

Site Name

Edit src/config/navigation.ts:

const SITE_NAME_REGISTRY: Record<string, string> = {
  en: "DocsBlog",
  "zh-hans": "DocsBlog",
};

Logo

1. Replace public/logo/site-logo.webp with your logo (recommended: 512x512 WebP)
2. Also replace the favicon and icons in public/logo/:
   • site-favicon-48.png (48x48)
   • site-apple-touch-180.png (180x180)
   • site-icon-192.png (192x192)
   • site-icon-512.png (512x512)

Logo paths are defined in src/config/branding.ts:

export const BRANDING = {
  logoWebp: "/logo/site-logo.webp",
  logoPng: "/logo/site-logo.png",
  favicon48Png: "/logo/site-favicon-48.png",
  // ...
};

Navigation Items

Fixed navigation items are defined in src/config/navigation.ts:

const NAV_ITEM_REGISTRY: Record<string, { path: string; labels: Record<string, string> }> = {
  twitter:  { path: "/twitter",  labels: { en: "Twitter",  "zh-hans": "推特" } },
  youtube:  { path: "/youtube",  labels: { en: "YouTube",  "zh-hans": "YouTube" } },
  items:    { path: "/items",    labels: { en: "Items",    "zh-hans": "项目" } },
  blog:     { path: "/blog",     labels: { en: "Blog",     "zh-hans": "博客" } },
  docs:     { path: "/docs",     labels: { en: "Docs",     "zh-hans": "文档" } },
};

const NAV_ITEM_ORDER = ["twitter", "youtube", "items", "blog", "docs"];

To add a nav item, add an entry to NAV_ITEM_REGISTRY and include its key in NAV_ITEM_ORDER.

To remove a nav item, remove its key from NAV_ITEM_ORDER.

Home Page Navigation

The homepage uses a separate nav config in config.json:

{
  "siteName": "DocsBlog",
  "nav": [
    { "label": "Features", "path": "/#features" },
    { "label": "Documentation", "path": "/docs" },
    { "label": "Blog", "path": "/blog" }
  ]
}

Mega Menu

The header supports a mega menu dropdown driven by NavGroup data. When navigation groups exist (managed in Admin > Nav Groups), a "More" dropdown appears in the header with grouped links.

Footer

The footer is rendered by src/app/_components/GlobalFooter.tsx and configured in src/config/footer.ts.

Link Sections

export const FOOTER_SECTIONS = [
  {
    titleKey: "product",
    links: [
      { path: "/docs", labelKey: "docs" },
      { path: "/blog", labelKey: "blog" },
      { path: "/twitter", labelKey: "twitter" },
      { path: "/nav", labelKey: "nav" },
    ],
  },
  {
    titleKey: "resources",
    links: [
      { path: "/", labelKey: "home" },
    ],
  },
];

Add or remove sections and links as needed. The titleKey and labelKey values map to translation keys in src/locales/.

Social Links

export const FOOTER_SOCIAL_LINKS = {
  twitter: "https://x.com/DocsblogDev",
};

Example: Add a GitHub link

export const FOOTER_SOCIAL_LINKS = {
  twitter: "https://x.com/your-handle",
  github: "https://github.com/your-org",
};

Then add the GitHub icon rendering in GlobalFooter.tsx.

Footer Behavior

• Hidden on admin pages, blog, docs, and nav-group routes (these have their own sidebar layout)
• Shows a minimal version (copyright + social only) on homepage, twitter, youtube, and items pages
• Shows full link sections on other pages