refactor(web): extract Navbar and Footer into design-system components

- Create professional Navbar component with brand logo, user pill, active indicator, mobile drawer
- Create professional Footer component with contact info, social links, link groups
- Refactor public layout to use new design-system components via renderLink adapter
- Export new components from design-system index

Addresses TEC-3029: Nav and Footer refactoring

Co-Authored-By: Claude Opus 4 <noreply@anthropic.com>

apps/web/app/[locale]/(public)/layout.tsx

@@ -1,35 +1,35 @@
 'use client';
 
-import { LogOut, Menu, Moon, Sun, User as UserIcon, X } from 'lucide-react';
-import { TickerStrip } from '@/components/design-system/ticker-strip';
-import type { TickerItem } from '@/components/design-system/ticker-strip';
 import { usePathname } from 'next/navigation';
 import { useTranslations } from 'next-intl';
-import { useState } from 'react';
 import { CompareFloatingBar } from '@/components/comparison/compare-floating-bar';
+import { Footer } from '@/components/design-system/footer';
+import { Navbar } from '@/components/design-system/navbar';
+import { TickerStrip } from '@/components/design-system/ticker-strip';
+import type { TickerItem } from '@/components/design-system/ticker-strip';
 import { NotificationBell } from '@/components/notifications/notification-bell';
 import { useTheme } from '@/components/providers/theme-provider';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
 import { LanguageSwitcher } from '@/components/ui/language-switcher';
 import { Link, useRouter } from '@/i18n/navigation';
 import { useAuthStore } from '@/lib/auth-store';
-import { cn } from '@/lib/utils';
 
-/** Map backend role strings to Vietnamese labels shown in the nav. */
+/** Render adapter — bridges design-system <Navbar/> and <Footer/> to next-intl's <Link>. */
-const ROLE_LABELS: Record<string, string> = {
+function renderLink({
-  ADMIN: 'Quản trị viên',
+  href,
-  AGENT: 'Đại lý',
+  children,
-  SELLER: 'Người bán',
+  className,
-  BUYER: 'Người mua',
+  onClick,
-};
+}: {
-
+  href: string;
-/** First+last initials fallback for when avatarUrl is null. */
+  children: React.ReactNode;
-function getInitials(fullName: string): string {
+  className?: string;
-  const parts = fullName.trim().split(/\s+/).filter(Boolean);
+  onClick?: () => void;
-  if (parts.length === 0) return '?';
+}) {
-  if (parts.length === 1) return parts[0]!.slice(0, 2).toUpperCase();
+  return (
-  return (parts[0]![0]! + parts[parts.length - 1]![0]!).toUpperCase();
+    <Link href={href as '/'} className={className} onClick={onClick}>
+      {children}
+    </Link>
+  );
 }
 
 export default function PublicLayout({ children }: { children: React.ReactNode }) {
@@ -38,51 +38,47 @@ export default function PublicLayout({ children }: { children: React.ReactNode }
   const { user, logout } = useAuthStore();
   const { theme, toggleTheme } = useTheme();
   const t = useTranslations();
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
-  /** Route the Dashboard CTA to the correct surface based on role. */
   const dashboardHref = user?.role === 'ADMIN' ? '/admin' : '/dashboard';
 
   const handleLogout = async () => {
-    setMobileMenuOpen(false);
     await logout();
     router.push('/');
   };
 
   const navLinks = [
     {
-      href: '/' as const,
+      href: '/',
       label: t('nav.home'),
       isActive: pathname === '/' || !!pathname.match(/^\/(vi|en)\/?$/),
     },
     {
-      href: '/search' as const,
+      href: '/search',
       label: t('nav.search'),
       isActive: pathname.includes('/search'),
     },
     {
-      href: '/du-an' as const,
+      href: '/du-an',
       label: t('nav.projects'),
       isActive: pathname.includes('/du-an'),
     },
     {
-      href: '/khu-cong-nghiep' as const,
+      href: '/khu-cong-nghiep',
       label: t('nav.industrialParks'),
       isActive: pathname.includes('/khu-cong-nghiep'),
     },
     {
-      href: '/chuyen-nhuong' as const,
+      href: '/chuyen-nhuong',
       label: t('nav.transfer'),
       isActive: pathname.includes('/chuyen-nhuong'),
     },
     {
-      href: '/pricing' as const,
+      href: '/pricing',
       label: t('nav.pricing'),
       isActive: pathname.includes('/pricing'),
     },
   ];
 
-  /** Mock top-8 district price movement data (7-day delta). */
   const tickerItems: TickerItem[] = [
     { id: 'q1', label: 'Quận 1', changePercent: 2.4, direction: 'up' },
     { id: 'q2', label: 'Quận 2', changePercent: -0.8, direction: 'down' },
@@ -94,202 +90,67 @@ export default function PublicLayout({ children }: { children: React.ReactNode }
     { id: 'phuninh', label: 'Phú Nhuận', changePercent: 0.5, direction: 'up' },
   ];
 
+  const footerLinkGroups = [
+    {
+      title: t('footer.propertyTypes'),
+      links: [
+        { label: t('propertyTypes.APARTMENT'), href: '/search?propertyType=APARTMENT' },
+        { label: t('propertyTypes.HOUSE'), href: '/search?propertyType=HOUSE' },
+        { label: t('propertyTypes.VILLA'), href: '/search?propertyType=VILLA' },
+        { label: t('propertyTypes.LAND'), href: '/search?propertyType=LAND' },
+      ],
+    },
+    {
+      title: t('footer.areas'),
+      links: [
+        { label: 'TP. Hồ Chí Minh', href: '/search?city=Hồ Chí Minh' },
+        { label: 'Hà Nội', href: '/search?city=Hà Nội' },
+        { label: 'Đà Nẵng', href: '/search?city=Đà Nẵng' },
+        { label: 'Nha Trang', href: '/search?city=Nha Trang' },
+      ],
+    },
+    {
+      title: t('footer.support'),
+      links: [
+        { label: t('nav.pricing'), href: '/pricing' },
+        { label: t('common.login'), href: '/login' },
+        { label: t('common.register'), href: '/register' },
+      ],
+    },
+  ];
+
   return (
     <div className="min-h-screen w-full overflow-x-clip bg-background">
-      {/* Ticker strip — biến động 7d top 8 quận */}
+      {/* Ticker strip */}
       <div className="h-ticker-bar w-full min-w-0 overflow-hidden border-b border-border bg-background-elevated">
         <TickerStrip items={tickerItems} />
       </div>
-      <header
-        role="banner"
-        className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
-      >
-        <div className="mx-auto flex h-14 max-w-7xl items-center px-4">
-          <Link href="/" className="mr-6 flex items-center space-x-2">
-            <span className="text-lg font-bold text-primary">{t('common.goodgo')}</span>
-          </Link>
 
-          {/* Desktop nav */}
+      <Navbar
-          <nav aria-label={t('nav.mainNav')} className="hidden items-center space-x-1 sm:flex">
+        brand={t('common.goodgo')}
-            {navLinks.map((link) => (
+        links={navLinks}
-              <Link
+        user={user}
-                key={link.href}
+        dashboardHref={dashboardHref}
-                href={link.href}
+        notifications={<NotificationBell />}
-                className={cn(
+        languageSwitcher={<LanguageSwitcher />}
-                  'rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground',
+        theme={theme}
-                  link.isActive
+        onToggleTheme={toggleTheme}
-                    ? 'bg-accent text-accent-foreground'
+        onLogout={handleLogout}
-                    : 'text-muted-foreground',
+        renderLink={renderLink}
-                )}
+        labels={{
-              >
+          login: t('common.login'),
-                {link.label}
+          register: t('common.register'),
-              </Link>
+          dashboard: t('common.dashboard'),
-            ))}
+          admin: t('common.admin'),
-          </nav>
+          profile: t('common.profile'),
-
+          logout: t('common.logout'),
-          <div className="ml-auto flex min-w-0 items-center gap-1 sm:gap-2">
+          openMenu: t('nav.openMenu'),
-            <LanguageSwitcher />
+          closeMenu: t('nav.closeMenu'),
-            <Button
+          darkMode: t('dashboard.darkMode'),
-              variant="ghost"
+          lightMode: t('dashboard.lightMode'),
-              size="sm"
+          mainNav: t('nav.mainNav'),
-              onClick={toggleTheme}
+        }}
-              aria-label={theme === 'light' ? t('dashboard.darkMode') : t('dashboard.lightMode')}
+      />
-              className="h-9 w-9 shrink-0 p-0"
-            >
-              {theme === 'light' ? (
-                <Moon className="h-4 w-4" aria-hidden="true" />
-              ) : (
-                <Sun className="h-4 w-4" aria-hidden="true" />
-              )}
-            </Button>
-            {user ? (
-              <>
-                {/* Bell only on sm+ to avoid overcrowding mobile header */}
-                <div className="hidden sm:block">
-                  <NotificationBell />
-                </div>
-                <span className="hidden max-w-[12rem] truncate text-sm text-muted-foreground sm:inline">
-                  {user.fullName}
-                </span>
-                {/* Dashboard button is desktop-only; mobile users reach it via the hamburger menu */}
-                <Link href={dashboardHref} className="hidden sm:inline-flex">
-                  <Button size="sm">
-                    {user.role === 'ADMIN' ? t('common.admin') : t('common.dashboard')}
-                  </Button>
-                </Link>
-              </>
-            ) : (
-              <>
-                <Link href="/login" className="hidden sm:inline-flex">
-                  <Button variant="ghost" size="sm">
-                    {t('common.login')}
-                  </Button>
-                </Link>
-                <Link href="/register" className="hidden sm:inline-flex">
-                  <Button size="sm">{t('common.register')}</Button>
-                </Link>
-              </>
-            )}
-            {/* Mobile menu toggle */}
-            <button
-              type="button"
-              aria-label={mobileMenuOpen ? t('nav.closeMenu') : t('nav.openMenu')}
-              aria-expanded={mobileMenuOpen}
-              className="inline-flex shrink-0 items-center justify-center rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-accent-foreground sm:hidden"
-              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-            >
-              {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
-            </button>
-          </div>
-        </div>
-
-        {/* Mobile menu */}
-        {mobileMenuOpen && (
-          <nav
-            aria-label={t('nav.mainNav')}
-            className="border-t px-4 pb-4 pt-2 sm:hidden"
-          >
-            <div className="space-y-1">
-              {navLinks.map((link) => (
-                <Link
-                  key={link.href}
-                  href={link.href}
-                  onClick={() => setMobileMenuOpen(false)}
-                  className={cn(
-                    'block rounded-md px-3 py-2.5 text-sm font-medium transition-colors',
-                    link.isActive
-                      ? 'bg-accent text-accent-foreground'
-                      : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
-                  )}
-                >
-                  {link.label}
-                </Link>
-              ))}
-            </div>
-            <div className="mt-3 space-y-2 border-t pt-3">
-              {user ? (
-                <>
-                  {/* User card: avatar (or initials) + name + email/phone + role */}
-                  <div className="flex items-center gap-3 px-2 py-1">
-                    {user.avatarUrl ? (
-                      // eslint-disable-next-line @next/next/no-img-element
-                      <img
-                        src={user.avatarUrl}
-                        alt=""
-                        className="h-10 w-10 shrink-0 rounded-full border object-cover"
-                      />
-                    ) : (
-                      <div
-                        aria-hidden="true"
-                        className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10 text-sm font-semibold text-primary"
-                      >
-                        {getInitials(user.fullName)}
-                      </div>
-                    )}
-                    <div className="min-w-0 flex-1">
-                      <p className="truncate text-sm font-medium">{user.fullName}</p>
-                      <p className="truncate text-xs text-muted-foreground">
-                        {user.email ?? user.phone}
-                      </p>
-                    </div>
-                    {ROLE_LABELS[user.role] ? (
-                      <Badge variant="outline" className="shrink-0 text-[10px]">
-                        {ROLE_LABELS[user.role]}
-                      </Badge>
-                    ) : null}
-                  </div>
-
-                  <Link
-                    href={dashboardHref}
-                    onClick={() => setMobileMenuOpen(false)}
-                    className="block"
-                  >
-                    <Button size="sm" className="w-full">
-                      {user.role === 'ADMIN' ? t('common.admin') : t('common.dashboard')}
-                    </Button>
-                  </Link>
-
-                  <Link
-                    href="/dashboard/profile"
-                    onClick={() => setMobileMenuOpen(false)}
-                    className="block"
-                  >
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      className="w-full justify-center gap-2"
-                    >
-                      <UserIcon className="h-4 w-4" aria-hidden="true" />
-                      {t('common.profile')}
-                    </Button>
-                  </Link>
-
-                  <Button
-                    size="sm"
-                    variant="ghost"
-                    className="w-full justify-center gap-2 text-destructive hover:bg-destructive/10 hover:text-destructive"
-                    onClick={handleLogout}
-                  >
-                    <LogOut className="h-4 w-4" aria-hidden="true" />
-                    {t('common.logout')}
-                  </Button>
-                </>
-              ) : (
-                <div className="flex gap-2">
-                  <Link href="/login" className="flex-1" onClick={() => setMobileMenuOpen(false)}>
-                    <Button variant="ghost" size="sm" className="w-full">
-                      {t('common.login')}
-                    </Button>
-                  </Link>
-                  <Link href="/register" className="flex-1" onClick={() => setMobileMenuOpen(false)}>
-                    <Button size="sm" className="w-full">{t('common.register')}</Button>
-                  </Link>
-                </div>
-              )}
-            </div>
-          </nav>
-        )}
-      </header>
 
       <main id="main-content" role="main">
         {children}
@@ -297,47 +158,22 @@ export default function PublicLayout({ children }: { children: React.ReactNode }
 
       <CompareFloatingBar />
 
-      <footer role="contentinfo" className="border-t bg-muted/40">
+      <Footer
-        <div className="mx-auto max-w-7xl px-4 py-8">
+        brand={t('common.goodgo')}
-          <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
+        description={t('footer.description')}
-            <div>
+        linkGroups={footerLinkGroups}
-              <h3 className="mb-3 text-sm font-semibold">{t('common.goodgo')}</h3>
+        copyright={t('common.allRightsReserved')}
-              <p className="text-sm text-muted-foreground">
+        contact={{
-                {t('footer.description')}
+          address: 'TP. Hồ Chí Minh, Việt Nam',
-              </p>
+          phone: '1900 xxxx',
-            </div>
+          email: 'support@goodgo.vn',
-            <div>
+        }}
-              <h3 className="mb-3 text-sm font-semibold">{t('footer.propertyTypes')}</h3>
+        socials={[
-              <ul className="space-y-2 text-sm text-muted-foreground">
+          { platform: 'facebook', href: '#' },
-                <li><Link href="/search?propertyType=APARTMENT" className="hover:text-foreground">{t('propertyTypes.APARTMENT')}</Link></li>
+          { platform: 'youtube', href: '#' },
-                <li><Link href="/search?propertyType=HOUSE" className="hover:text-foreground">{t('propertyTypes.HOUSE')}</Link></li>
+        ]}
-                <li><Link href="/search?propertyType=VILLA" className="hover:text-foreground">{t('propertyTypes.VILLA')}</Link></li>
+        renderLink={renderLink}
-                <li><Link href="/search?propertyType=LAND" className="hover:text-foreground">{t('propertyTypes.LAND')}</Link></li>
+      />
-              </ul>
-            </div>
-            <div>
-              <h3 className="mb-3 text-sm font-semibold">{t('footer.areas')}</h3>
-              <ul className="space-y-2 text-sm text-muted-foreground">
-                <li><Link href="/search?city=Hồ Chí Minh" className="hover:text-foreground">TP. Hồ Chí Minh</Link></li>
-                <li><Link href="/search?city=Hà Nội" className="hover:text-foreground">Hà Nội</Link></li>
-                <li><Link href="/search?city=Đà Nẵng" className="hover:text-foreground">Đà Nẵng</Link></li>
-                <li><Link href="/search?city=Nha Trang" className="hover:text-foreground">Nha Trang</Link></li>
-              </ul>
-            </div>
-            <div>
-              <h3 className="mb-3 text-sm font-semibold">{t('footer.support')}</h3>
-              <ul className="space-y-2 text-sm text-muted-foreground">
-                <li><Link href="/pricing" className="hover:text-foreground">{t('nav.pricing')}</Link></li>
-                <li><Link href="/login" className="hover:text-foreground">{t('common.login')}</Link></li>
-                <li><Link href="/register" className="hover:text-foreground">{t('common.register')}</Link></li>
-              </ul>
-            </div>
-          </div>
-          <div className="mt-8 border-t pt-4 text-center text-sm text-muted-foreground">
-            {t('common.allRightsReserved')}
-          </div>
-        </div>
-      </footer>
     </div>
   );
 }

apps/web/components/design-system/footer.tsx

@@ -0,0 +1,171 @@
+import * as React from 'react';
+import {
+  Building2,
+  ExternalLink,
+  Mail,
+  MapPin,
+  Phone,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+/* -------------------------------------------------------------------------- */
+/*  Types                                                                      */
+/* -------------------------------------------------------------------------- */
+
+export interface FooterLinkGroup {
+  title: string;
+  links: { label: string; href: string }[];
+}
+
+export interface FooterProps {
+  /** Brand name. */
+  brand: string;
+  /** Short description below the brand. */
+  description: string;
+  /** Link groups (2-4 columns). */
+  linkGroups: FooterLinkGroup[];
+  /** Copyright text. */
+  copyright: string;
+  /** Contact info. */
+  contact?: {
+    address?: string;
+    phone?: string;
+    email?: string;
+  };
+  /** Social links. */
+  socials?: { platform: 'facebook' | 'instagram' | 'youtube'; href: string }[];
+  /** Custom link renderer for framework-specific Link. */
+  renderLink: (props: {
+    href: string;
+    children: React.ReactNode;
+    className?: string;
+  }) => React.ReactNode;
+}
+
+/* -------------------------------------------------------------------------- */
+/*  Icons                                                                      */
+/* -------------------------------------------------------------------------- */
+
+const SOCIAL_ICON: Record<string, React.ElementType> = {
+  facebook: ExternalLink,
+  instagram: ExternalLink,
+  youtube: ExternalLink,
+};
+
+/* -------------------------------------------------------------------------- */
+/*  Component                                                                  */
+/* -------------------------------------------------------------------------- */
+
+export function Footer({
+  brand,
+  description,
+  linkGroups,
+  copyright,
+  contact,
+  socials,
+  renderLink,
+}: FooterProps) {
+  return (
+    <footer role="contentinfo" className="border-t border-border bg-background-elevated">
+      {/* Main grid */}
+      <div className="mx-auto max-w-7xl px-4 py-10 lg:py-12">
+        <div className="grid gap-10 sm:grid-cols-2 lg:grid-cols-12">
+          {/* Brand column */}
+          <div className="lg:col-span-4">
+            <div className="flex items-center gap-2">
+              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-sm font-bold text-primary-foreground">
+                G
+              </div>
+              <span className="text-lg font-bold tracking-tight text-foreground">
+                {brand}
+              </span>
+            </div>
+            <p className="mt-3 max-w-xs text-sm leading-relaxed text-muted-foreground">
+              {description}
+            </p>
+
+            {/* Contact */}
+            {contact && (
+              <div className="mt-4 space-y-2 text-sm text-muted-foreground">
+                {contact.address && (
+                  <div className="flex items-start gap-2">
+                    <MapPin className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
+                    <span>{contact.address}</span>
+                  </div>
+                )}
+                {contact.phone && (
+                  <div className="flex items-center gap-2">
+                    <Phone className="h-4 w-4 shrink-0 text-primary" />
+                    <a href={`tel:${contact.phone}`} className="hover:text-foreground transition-colors">
+                      {contact.phone}
+                    </a>
+                  </div>
+                )}
+                {contact.email && (
+                  <div className="flex items-center gap-2">
+                    <Mail className="h-4 w-4 shrink-0 text-primary" />
+                    <a href={`mailto:${contact.email}`} className="hover:text-foreground transition-colors">
+                      {contact.email}
+                    </a>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Socials */}
+            {socials && socials.length > 0 && (
+              <div className="mt-4 flex gap-2">
+                {socials.map((s) => {
+                  const Icon = SOCIAL_ICON[s.platform];
+                  return (
+                    <a
+                      key={s.platform}
+                      href={s.href}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline-flex h-9 w-9 items-center justify-center rounded-md border border-border text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+                    >
+                      {Icon && <Icon className="h-4 w-4" />}
+                    </a>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+
+          {/* Link groups */}
+          {linkGroups.map((group) => (
+            <div key={group.title} className="lg:col-span-2">
+              <h3 className="mb-3 text-sm font-semibold text-foreground">{group.title}</h3>
+              <ul className="space-y-2.5">
+                {group.links.map((link) => (
+                  <li key={link.href}>
+                    {renderLink({
+                      href: link.href,
+                      className:
+                        'text-sm text-muted-foreground transition-colors hover:text-primary',
+                      children: link.label,
+                    })}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Bottom bar */}
+      <div className="border-t border-border">
+        <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4">
+          <p className="text-xs text-muted-foreground">{copyright}</p>
+          <div className="flex items-center gap-1">
+            <Building2 className="h-3 w-3 text-muted-foreground" />
+            <span className="text-xs text-muted-foreground">
+              S&agrave;n giao dịch bất động sản
+            </span>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

apps/web/components/design-system/index.ts

@@ -49,3 +49,9 @@ export type { NumericProps } from './numeric';
 
 export { Signal } from './signal';
 export type { SignalDirection, SignalProps } from './signal';
+
+export { Navbar } from './navbar';
+export type { NavbarProps, NavLink, NavUser } from './navbar';
+
+export { Footer } from './footer';
+export type { FooterProps, FooterLinkGroup } from './footer';

apps/web/components/design-system/navbar.tsx

@@ -0,0 +1,422 @@
+'use client';
+
+import * as React from 'react';
+import {
+  ChevronDown,
+  LogOut,
+  Menu,
+  Moon,
+  Sun,
+  User as UserIcon,
+  X,
+  LayoutDashboard,
+  Shield,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+/* -------------------------------------------------------------------------- */
+/*  Types                                                                      */
+/* -------------------------------------------------------------------------- */
+
+export interface NavLink {
+  href: string;
+  label: string;
+  isActive?: boolean;
+  /** Nested links shown on hover / accordion. */
+  children?: NavLink[];
+}
+
+export interface NavUser {
+  fullName: string;
+  email?: string | null;
+  phone?: string | null;
+  role: string;
+  avatarUrl?: string | null;
+}
+
+export interface NavbarProps {
+  /** Brand name shown in the header. */
+  brand: string;
+  /** Primary navigation links. */
+  links: NavLink[];
+  /** Current user or null if unauthenticated. */
+  user: NavUser | null;
+  /** Dashboard href (role-dependent). */
+  dashboardHref: string;
+  /** Slot: notification bell or other widgets. */
+  notifications?: React.ReactNode;
+  /** Slot: language switcher. */
+  languageSwitcher?: React.ReactNode;
+  /** Light / dark theme. */
+  theme: 'light' | 'dark';
+  /** Toggle theme callback. */
+  onToggleTheme: () => void;
+  /** Logout callback. */
+  onLogout: () => Promise<void> | void;
+  /** i18n labels. */
+  labels: {
+    login: string;
+    register: string;
+    dashboard: string;
+    admin: string;
+    profile: string;
+    logout: string;
+    openMenu: string;
+    closeMenu: string;
+    darkMode: string;
+    lightMode: string;
+    mainNav: string;
+  };
+  /** Login / register hrefs — rendered via renderLink. */
+  loginHref?: string;
+  registerHref?: string;
+  profileHref?: string;
+  /** Custom link renderer for framework-specific Link component (Next/i18n). */
+  renderLink: (props: {
+    href: string;
+    children: React.ReactNode;
+    className?: string;
+    onClick?: () => void;
+  }) => React.ReactNode;
+}
+
+/* -------------------------------------------------------------------------- */
+/*  Helpers                                                                    */
+/* -------------------------------------------------------------------------- */
+
+const ROLE_LABELS: Record<string, string> = {
+  ADMIN: 'Quản trị viên',
+  AGENT: 'Đại lý',
+  SELLER: 'Người bán',
+  BUYER: 'Người mua',
+};
+
+function getInitials(fullName: string): string {
+  const parts = fullName.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return '?';
+  if (parts.length === 1) return parts[0]!.slice(0, 2).toUpperCase();
+  return (parts[0]![0]! + parts[parts.length - 1]![0]!).toUpperCase();
+}
+
+/* -------------------------------------------------------------------------- */
+/*  Component                                                                  */
+/* -------------------------------------------------------------------------- */
+
+export function Navbar({
+  brand,
+  links,
+  user,
+  dashboardHref,
+  notifications,
+  languageSwitcher,
+  theme,
+  onToggleTheme,
+  onLogout,
+  labels,
+  loginHref = '/login',
+  registerHref = '/register',
+  profileHref = '/dashboard/profile',
+  renderLink,
+}: NavbarProps) {
+  const [mobileOpen, setMobileOpen] = React.useState(false);
+
+  const close = () => setMobileOpen(false);
+
+  const handleLogout = async () => {
+    close();
+    await onLogout();
+  };
+
+  return (
+    <header
+      role="banner"
+      className="sticky top-0 z-50 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
+    >
+      {/* -------- Main bar -------- */}
+      <div className="mx-auto flex h-14 max-w-7xl items-center px-4">
+        {/* Brand */}
+        {renderLink({
+          href: '/',
+          className: 'mr-6 flex items-center gap-2 group',
+          children: (
+            <>
+              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground text-sm font-bold transition-transform group-hover:scale-105">
+                G
+              </div>
+              <span className="text-lg font-bold tracking-tight text-foreground">
+                {brand}
+              </span>
+            </>
+          ),
+        })}
+
+        {/* Desktop nav */}
+        <nav aria-label={labels.mainNav} className="hidden items-center gap-0.5 lg:flex">
+          {links.map((link) => (
+            <React.Fragment key={link.href}>
+              {renderLink({
+                href: link.href,
+                className: cn(
+                  'relative rounded-md px-3 py-2 text-sm font-medium transition-colors',
+                  'hover:bg-accent hover:text-accent-foreground',
+                  link.isActive
+                    ? 'text-foreground'
+                    : 'text-muted-foreground',
+                ),
+                children: (
+                  <>
+                    {link.label}
+                    {link.isActive && (
+                      <span className="absolute inset-x-1 -bottom-[13px] h-0.5 rounded-full bg-primary" />
+                    )}
+                  </>
+                ),
+              })}
+            </React.Fragment>
+          ))}
+        </nav>
+
+        {/* Right actions */}
+        <div className="ml-auto flex min-w-0 items-center gap-1 sm:gap-2">
+          {languageSwitcher}
+
+          <button
+            type="button"
+            onClick={onToggleTheme}
+            aria-label={theme === 'light' ? labels.darkMode : labels.lightMode}
+            className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+          >
+            {theme === 'light' ? (
+              <Moon className="h-4 w-4" aria-hidden />
+            ) : (
+              <Sun className="h-4 w-4" aria-hidden />
+            )}
+          </button>
+
+          {user ? (
+            <>
+              <div className="hidden sm:block">{notifications}</div>
+
+              {/* User pill */}
+              <div className="hidden items-center gap-2 rounded-full border border-border bg-background-elevated px-2 py-1 sm:flex">
+                {user.avatarUrl ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={user.avatarUrl}
+                    alt=""
+                    className="h-6 w-6 rounded-full border object-cover"
+                  />
+                ) : (
+                  <div className="flex h-6 w-6 items-center justify-center rounded-full bg-primary/15 text-[10px] font-semibold text-primary">
+                    {getInitials(user.fullName)}
+                  </div>
+                )}
+                <span className="max-w-[10rem] truncate text-sm text-foreground">
+                  {user.fullName}
+                </span>
+                {ROLE_LABELS[user.role] && (
+                  <span className="rounded bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary">
+                    {ROLE_LABELS[user.role]}
+                  </span>
+                )}
+              </div>
+
+              {renderLink({
+                href: dashboardHref,
+                className: 'hidden sm:inline-flex',
+                children: (
+                  <button
+                    type="button"
+                    className="inline-flex h-9 items-center gap-1.5 rounded-md bg-primary px-3 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary-hover"
+                  >
+                    {user.role === 'ADMIN' ? (
+                      <Shield className="h-3.5 w-3.5" aria-hidden />
+                    ) : (
+                      <LayoutDashboard className="h-3.5 w-3.5" aria-hidden />
+                    )}
+                    {user.role === 'ADMIN' ? labels.admin : labels.dashboard}
+                  </button>
+                ),
+              })}
+            </>
+          ) : (
+            <>
+              {renderLink({
+                href: loginHref,
+                className: 'hidden sm:inline-flex',
+                children: (
+                  <button
+                    type="button"
+                    className="inline-flex h-9 items-center rounded-md px-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+                  >
+                    {labels.login}
+                  </button>
+                ),
+              })}
+              {renderLink({
+                href: registerHref,
+                className: 'hidden sm:inline-flex',
+                children: (
+                  <button
+                    type="button"
+                    className="inline-flex h-9 items-center rounded-md bg-primary px-3 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary-hover"
+                  >
+                    {labels.register}
+                  </button>
+                ),
+              })}
+            </>
+          )}
+
+          {/* Mobile hamburger */}
+          <button
+            type="button"
+            aria-label={mobileOpen ? labels.closeMenu : labels.openMenu}
+            aria-expanded={mobileOpen}
+            className="inline-flex shrink-0 items-center justify-center rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-accent-foreground lg:hidden"
+            onClick={() => setMobileOpen(!mobileOpen)}
+          >
+            {mobileOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+          </button>
+        </div>
+      </div>
+
+      {/* -------- Mobile drawer -------- */}
+      {mobileOpen && (
+        <nav aria-label={labels.mainNav} className="border-t px-4 pb-4 pt-2 lg:hidden">
+          <div className="space-y-0.5">
+            {links.map((link) => (
+              <React.Fragment key={link.href}>
+                {renderLink({
+                  href: link.href,
+                  onClick: close,
+                  className: cn(
+                    'flex items-center rounded-md px-3 py-2.5 text-sm font-medium transition-colors',
+                    link.isActive
+                      ? 'bg-primary/10 text-primary'
+                      : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+                  ),
+                  children: (
+                    <>
+                      {link.isActive && (
+                        <span className="mr-2 h-1.5 w-1.5 rounded-full bg-primary" />
+                      )}
+                      {link.label}
+                    </>
+                  ),
+                })}
+              </React.Fragment>
+            ))}
+          </div>
+
+          <div className="mt-3 space-y-2 border-t border-border pt-3">
+            {user ? (
+              <>
+                {/* Mobile user card */}
+                <div className="flex items-center gap-3 rounded-lg bg-background-elevated px-3 py-2.5">
+                  {user.avatarUrl ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img
+                      src={user.avatarUrl}
+                      alt=""
+                      className="h-10 w-10 shrink-0 rounded-full border object-cover"
+                    />
+                  ) : (
+                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/15 text-sm font-semibold text-primary">
+                      {getInitials(user.fullName)}
+                    </div>
+                  )}
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-medium text-foreground">
+                      {user.fullName}
+                    </p>
+                    <p className="truncate text-xs text-muted-foreground">
+                      {user.email ?? user.phone}
+                    </p>
+                  </div>
+                  {ROLE_LABELS[user.role] && (
+                    <span className="shrink-0 rounded bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary">
+                      {ROLE_LABELS[user.role]}
+                    </span>
+                  )}
+                </div>
+
+                {renderLink({
+                  href: dashboardHref,
+                  onClick: close,
+                  className: 'block',
+                  children: (
+                    <button
+                      type="button"
+                      className="flex w-full items-center justify-center gap-2 rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary-hover"
+                    >
+                      {user.role === 'ADMIN' ? (
+                        <Shield className="h-4 w-4" aria-hidden />
+                      ) : (
+                        <LayoutDashboard className="h-4 w-4" aria-hidden />
+                      )}
+                      {user.role === 'ADMIN' ? labels.admin : labels.dashboard}
+                    </button>
+                  ),
+                })}
+
+                {renderLink({
+                  href: profileHref,
+                  onClick: close,
+                  className: 'block',
+                  children: (
+                    <button
+                      type="button"
+                      className="flex w-full items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent"
+                    >
+                      <UserIcon className="h-4 w-4" aria-hidden />
+                      {labels.profile}
+                    </button>
+                  ),
+                })}
+
+                <button
+                  type="button"
+                  className="flex w-full items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium text-destructive transition-colors hover:bg-destructive/10"
+                  onClick={handleLogout}
+                >
+                  <LogOut className="h-4 w-4" aria-hidden />
+                  {labels.logout}
+                </button>
+              </>
+            ) : (
+              <div className="flex gap-2">
+                {renderLink({
+                  href: loginHref,
+                  onClick: close,
+                  className: 'flex-1',
+                  children: (
+                    <button
+                      type="button"
+                      className="w-full rounded-md border border-border px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent"
+                    >
+                      {labels.login}
+                    </button>
+                  ),
+                })}
+                {renderLink({
+                  href: registerHref,
+                  onClick: close,
+                  className: 'flex-1',
+                  children: (
+                    <button
+                      type="button"
+                      className="w-full rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary-hover"
+                    >
+                      {labels.register}
+                    </button>
+                  ),
+                })}
+              </div>
+            )}
+          </div>
+        </nav>
+      )}
+    </header>
+  );
+}