From 5b7ccf0b671e2999b62befc729a3e517a0433728 Mon Sep 17 00:00:00 2001
From: Bertrand Yuan <bert.yuan@outlook.com>
Date: Mon, 15 Dec 2025 23:48:10 +0800
Subject: initial commit -- the front-end prototype

The initial code is base on Anirudh's work.

More to see at:

    https://github.com/techwithanirudh/shadcn-blog

Therefore, the code in this commit is under MIT license.
---
 src/components/sections/header/index.tsx  | 174 ++++++++++++++++++++++++++++++
 src/components/sections/header/menu.tsx   | 120 +++++++++++++++++++++
 src/components/sections/header/navbar.tsx |  55 ++++++++++
 3 files changed, 349 insertions(+)
 create mode 100644 src/components/sections/header/index.tsx
 create mode 100644 src/components/sections/header/menu.tsx
 create mode 100644 src/components/sections/header/navbar.tsx

(limited to 'src/components/sections/header')

diff --git a/src/components/sections/header/index.tsx b/src/components/sections/header/index.tsx
new file mode 100644
index 0000000..4280e01
--- /dev/null
+++ b/src/components/sections/header/index.tsx
@@ -0,0 +1,174 @@
+import Link from 'fumadocs-core/link';
+import {
+  LanguageToggle,
+  LanguageToggleText,
+} from 'fumadocs-ui/components/layout/language-toggle';
+import {
+  LargeSearchToggle,
+  SearchToggle,
+} from 'fumadocs-ui/components/layout/search-toggle';
+import { NavigationMenuList } from 'fumadocs-ui/components/ui/navigation-menu';
+import type { HomeLayoutProps } from 'fumadocs-ui/layouts/home';
+import {
+  NavbarLink,
+  NavbarMenu,
+  NavbarMenuContent,
+  NavbarMenuTrigger,
+} from 'fumadocs-ui/layouts/home/navbar';
+import type { LinkItemType } from 'fumadocs-ui/layouts/links';
+import { SearchOnly } from 'fumadocs-ui/provider';
+import { ChevronDown, Languages } from 'lucide-react';
+import { ThemeToggle } from '../../theme-toggle';
+import { Menu, MenuContent, MenuLinkItem, MenuTrigger } from './menu';
+import { Navbar, NavbarMenuLink } from './navbar';
+
+export const Header = ({
+  nav: { enableSearch = true, ...nav } = {},
+  i18n = false,
+  finalLinks,
+}: HomeLayoutProps & {
+  finalLinks: LinkItemType[];
+}) => {
+  const navItems = finalLinks.filter((item) =>
+    ['nav', 'all'].includes(item.on ?? 'all'),
+  );
+  const menuItems = finalLinks.filter((item) =>
+    ['menu', 'all'].includes(item.on ?? 'all'),
+  );
+
+  return (
+    <Navbar>
+      <Link
+        href={nav.url ?? '/'}
+        className='inline-flex items-center gap-2.5 font-semibold'
+      >
+        {nav.title}
+      </Link>
+      {nav.children}
+      <NavigationMenuList className='ml-2 flex flex-row items-center gap-2 max-sm:hidden'>
+        {navItems
+          .filter((item) => !isSecondary(item))
+          .map((item, i) => (
+            <NavbarLinkItem
+              key={i.toString()}
+              item={item}
+              className='text-sm'
+            />
+          ))}
+      </NavigationMenuList>
+      <div className='flex flex-1 flex-row items-center justify-end lg:gap-1.5'>
+        {enableSearch ? (
+          <SearchOnly>
+            <SearchToggle className='lg:hidden' />
+            <LargeSearchToggle className='w-full max-w-[240px] max-lg:hidden' />
+          </SearchOnly>
+        ) : null}
+        <ThemeToggle className='max-lg:hidden' />
+        {navItems.filter(isSecondary).map((item, i) => (
+          <NavbarLinkItem
+            key={i.toString()}
+            item={item}
+            className='-me-1.5 max-lg:hidden'
+          />
+        ))}
+        <Menu className='lg:hidden'>
+          <MenuTrigger className='group -me-2'>
+            <ChevronDown className='size-3 transition-transform duration-300 group-data-[state=open]:rotate-180' />
+          </MenuTrigger>
+          <MenuContent className='sm:flex-row sm:items-center sm:justify-end'>
+            {menuItems
+              .filter((item) => !isSecondary(item))
+              .map((item, i) => (
+                <MenuLinkItem
+                  key={i.toString()}
+                  item={item}
+                  className='sm:hidden'
+                />
+              ))}
+            <div className='-ms-1.5 flex flex-row items-center gap-1.5 max-sm:mt-2'>
+              {menuItems.filter(isSecondary).map((item, i) => (
+                <MenuLinkItem
+                  key={i.toString()}
+                  item={item}
+                  className='-me-1.5'
+                />
+              ))}
+              <div className='flex-1' />
+              {i18n ? (
+                <LanguageToggle>
+                  <Languages className='size-5' />
+                  <LanguageToggleText />
+                  <ChevronDown className='size-3 text-fd-muted-foreground' />
+                </LanguageToggle>
+              ) : null}
+              <ThemeToggle />
+            </div>
+          </MenuContent>
+        </Menu>
+      </div>
+    </Navbar>
+  );
+};
+
+const NavbarLinkItem = ({
+  item,
+  ...props
+}: {
+  item: LinkItemType;
+  className?: string;
+}) => {
+  if (item.type === 'custom') return <div {...props}>{item.children}</div>;
+
+  if (item.type === 'menu') {
+    const children = item.items.map((child, j) => {
+      if (child.type === 'custom')
+        return <div key={j.toString()}>{child.children}</div>;
+
+      const { banner, footer, ...rest } = child.menu ?? {};
+
+      return (
+        <NavbarMenuLink key={j.toString()} href={child.url} {...rest}>
+          {banner ??
+            (child.icon ? (
+              <div className='w-fit rounded-md border bg-fd-muted p-1 [&_svg]:size-4'>
+                {child.icon}
+              </div>
+            ) : null)}
+          <p className='-mb-1 font-medium text-sm'>{child.text}</p>
+          {child.description ? (
+            <p className='text-[13px] text-fd-muted-foreground'>
+              {child.description}
+            </p>
+          ) : null}
+          {footer}
+        </NavbarMenuLink>
+      );
+    });
+
+    return (
+      <NavbarMenu>
+        <NavbarMenuTrigger {...props}>
+          {item.url ? <Link href={item.url}>{item.text}</Link> : item.text}
+        </NavbarMenuTrigger>
+        <NavbarMenuContent>{children}</NavbarMenuContent>
+      </NavbarMenu>
+    );
+  }
+
+  return (
+    <NavbarLink
+      {...props}
+      item={item}
+      variant={item.type}
+      aria-label={item.type === 'icon' ? item.label : undefined}
+    >
+      {item.type === 'icon' ? item.icon : item.text}
+    </NavbarLink>
+  );
+};
+
+const isSecondary = (item: LinkItemType): boolean => {
+  return (
+    ('secondary' in item && item.secondary === true) || item.type === 'icon'
+  );
+};
diff --git a/src/components/sections/header/menu.tsx b/src/components/sections/header/menu.tsx
new file mode 100644
index 0000000..57ddf12
--- /dev/null
+++ b/src/components/sections/header/menu.tsx
@@ -0,0 +1,120 @@
+'use client';
+
+import { cva } from 'class-variance-authority';
+import Link from 'fumadocs-core/link';
+import { cn } from 'fumadocs-ui/components/api';
+import { buttonVariants } from 'fumadocs-ui/components/ui/button';
+import {
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuTrigger,
+} from 'fumadocs-ui/components/ui/navigation-menu';
+import { BaseLinkItem, type LinkItemType } from 'fumadocs-ui/layouts/links';
+import type { ComponentPropsWithoutRef } from 'react';
+
+const menuItemVariants = cva('', {
+  variants: {
+    variant: {
+      main: 'inline-flex items-center gap-2 py-1.5 transition-colors hover:text-fd-popover-foreground/50 data-[active=true]:font-medium data-[active=true]:text-fd-primary [&_svg]:size-4',
+      icon: buttonVariants({
+        size: 'icon',
+        color: 'ghost',
+      }),
+      button: buttonVariants({
+        color: 'secondary',
+        className: 'gap-1.5 [&_svg]:size-4',
+      }),
+    },
+  },
+  defaultVariants: {
+    variant: 'main',
+  },
+});
+
+export const MenuLinkItem = ({
+  item,
+  ...props
+}: {
+  item: LinkItemType;
+  className?: string;
+}) => {
+  if (item.type === 'custom')
+    return <div className={cn('grid', props.className)}>{item.children}</div>;
+
+  if (item.type === 'menu') {
+    const header = (
+      <>
+        {item.icon}
+        {item.text}
+      </>
+    );
+
+    return (
+      <div className={cn('mb-4 flex flex-col', props.className)}>
+        <p className='mb-1 text-fd-muted-foreground text-sm'>
+          {item.url ? (
+            <NavigationMenuLink asChild>
+              <Link href={item.url}>{header}</Link>
+            </NavigationMenuLink>
+          ) : (
+            header
+          )}
+        </p>
+        {item.items.map((child, i) => (
+          <MenuLinkItem key={i.toString()} item={child} />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <NavigationMenuLink asChild>
+      <BaseLinkItem
+        item={item}
+        className={cn(
+          menuItemVariants({ variant: item.type }),
+          props.className,
+        )}
+        aria-label={item.type === 'icon' ? item.label : undefined}
+      >
+        {item.icon}
+        {item.type === 'icon' ? undefined : item.text}
+      </BaseLinkItem>
+    </NavigationMenuLink>
+  );
+};
+
+export const Menu = NavigationMenuItem;
+
+export const MenuTrigger = ({
+  ...props
+}: ComponentPropsWithoutRef<typeof NavigationMenuTrigger> & {}) => {
+  return (
+    <NavigationMenuTrigger
+      {...props}
+      className={cn(
+        buttonVariants({
+          size: 'icon',
+          color: 'ghost',
+        }),
+        props.className,
+      )}
+    >
+      {props.children}
+    </NavigationMenuTrigger>
+  );
+};
+
+export const MenuContent = (
+  props: ComponentPropsWithoutRef<typeof NavigationMenuContent>,
+) => {
+  return (
+    <NavigationMenuContent
+      {...props}
+      className={cn('flex flex-col p-4', props.className)}
+    >
+      {props.children}
+    </NavigationMenuContent>
+  );
+};
diff --git a/src/components/sections/header/navbar.tsx b/src/components/sections/header/navbar.tsx
new file mode 100644
index 0000000..25850a0
--- /dev/null
+++ b/src/components/sections/header/navbar.tsx
@@ -0,0 +1,55 @@
+'use client';
+
+import Link, { type LinkProps } from 'fumadocs-core/link';
+import { cn } from 'fumadocs-ui/components/api';
+import {
+  NavigationMenu,
+  NavigationMenuLink,
+  NavigationMenuViewport,
+} from 'fumadocs-ui/components/ui/navigation-menu';
+import { type HTMLAttributes, useState } from 'react';
+
+export const Navbar = (props: HTMLAttributes<HTMLElement>) => {
+  const [value, setValue] = useState('');
+
+  return (
+    <NavigationMenu value={value} onValueChange={setValue} asChild>
+      <header
+        id='nd-nav'
+        {...props}
+        className={cn(
+          'sticky top-[var(--fd-banner-height)] z-30 box-content w-full bg-fd-background/80 backdrop-blur-lg transition-colors',
+          'border-border/70 border-b border-dashed dark:border-border',
+          // value.length > 0 ? 'shadow-lg' : 'shadow-xs',
+          props.className,
+        )}
+      >
+        <div
+          className={cn(
+            'container mx-auto flex size-full h-14 flex-row items-center px-4 md:gap-1.5 lg:px-6',
+            'border-border/70 border-dashed sm:border-x dark:border-border',
+          )}
+        >
+          {props.children}
+        </div>
+        <NavigationMenuViewport />
+      </header>
+    </NavigationMenu>
+  );
+};
+
+export const NavbarMenuLink = (props: LinkProps) => {
+  return (
+    <NavigationMenuLink asChild>
+      <Link
+        {...props}
+        className={cn(
+          'flex flex-col gap-2 rounded-lg border bg-fd-card p-3 transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground',
+          props.className,
+        )}
+      >
+        {props.children}
+      </Link>
+    </NavigationMenuLink>
+  );
+};
-- 
cgit v1.2.3