admin/goodgo-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(web): extract Navbar and Footer into design-system components
Some checks failed
CI / Lint → Typecheck → Test → Build (22) (push) Failing after 33s
Details
CI / E2E Tests (push) Has been skipped
Details
CI / AI Services (Python) — Smoke (push) Failing after 9s
Details
CodeQL Analysis / CodeQL (javascript-typescript) (push) Failing after 1m44s
Details
Deploy / Build AI Services Image (push) Failing after 12s
Details
E2E Tests / Playwright E2E (push) Failing after 14s
Details
Security Scanning / Dependency Audit (pnpm) (push) Failing after 3s
Details
Security Scanning / Trivy Scan — API Image (push) Failing after 1m55s
Details
Security Scanning / Trivy Scan — Web Image (push) Failing after 53s
Details
Security Scanning / Trivy Scan — AI Services Image (push) Failing after 53s
Details
Security Scanning / Trivy Filesystem Scan (push) Failing after 46s
Details
Deploy / Smoke Test Staging (push) Has been skipped
Details
Deploy / Deploy to Production (push) Has been skipped
Details
Security Scanning / Security Gate (push) Failing after 1s
Details
Deploy / Rollback Production (push) Has been skipped
Details
Deploy / Build API Image (push) Failing after 41s
Details
Deploy / Build Web Image (push) Failing after 10s
Details
Deploy / Deploy to Staging (push) Has been skipped
Details
Deploy / Smoke Test Production (push) Has been skipped
Details
Deploy / Rollback Staging (push) Has been skipped
Details

Browse Source 
- 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>
This commit is contained in:
Ho Ngoc Hai
2026-04-22 17:10:31 +07:00
parent 1d4cb749e2
commit 81ae59cb9d
4 changed files with 697 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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. */
const ROLE_LABELS: Record<string, string> = {
ADMIN: 'Quản trị viên',
AGENT: 'Đại lý',
SELLER: 'Người bán',
BUYER: 'Người mua',
};
/** First+last initials fallback for when avatarUrl is null. */
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();
/** Render adapter — bridges design-system <Navbar/> and <Footer/> to next-intl's <Link>. */
function renderLink({
href,
children,
className,
onClick,
}: {
href: string;
children: React.ReactNode;
className?: string;
onClick?: () => void;
}) {
return (
<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 */}
<nav aria-label={t('nav.mainNav')} className="hidden items-center space-x-1 sm:flex">
{navLinks.map((link) => (
<Link
key={link.href}
href={link.href}
className={cn(
'rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground',
link.isActive
? 'bg-accent text-accent-foreground'
: 'text-muted-foreground',
)}
>
{link.label}
</Link>
))}
</nav>
<div className="ml-auto flex min-w-0 items-center gap-1 sm:gap-2">
<LanguageSwitcher />
<Button
variant="ghost"
size="sm"
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>
<Navbar
brand={t('common.goodgo')}
links={navLinks}
user={user}
dashboardHref={dashboardHref}
notifications={<NotificationBell />}
languageSwitcher={<LanguageSwitcher />}
theme={theme}
onToggleTheme={toggleTheme}
onLogout={handleLogout}
renderLink={renderLink}
labels={{
login: t('common.login'),
register: t('common.register'),
dashboard: t('common.dashboard'),
admin: t('common.admin'),
profile: t('common.profile'),
logout: t('common.logout'),
openMenu: t('nav.openMenu'),
closeMenu: t('nav.closeMenu'),
darkMode: t('dashboard.darkMode'),
lightMode: t('dashboard.lightMode'),
mainNav: t('nav.mainNav'),
}}
/>
<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">
<div className="mx-auto max-w-7xl px-4 py-8">
<div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
<div>
<h3 className="mb-3 text-sm font-semibold">{t('common.goodgo')}</h3>
<p className="text-sm text-muted-foreground">
{t('footer.description')}
</p>
</div>
<div>
<h3 className="mb-3 text-sm font-semibold">{t('footer.propertyTypes')}</h3>
<ul className="space-y-2 text-sm text-muted-foreground">
<li><Link href="/search?propertyType=APARTMENT" className="hover:text-foreground">{t('propertyTypes.APARTMENT')}</Link></li>
<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>
<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>
<Footer
brand={t('common.goodgo')}
description={t('footer.description')}
linkGroups={footerLinkGroups}
copyright={t('common.allRightsReserved')}
contact={{
address: 'TP. Hồ Chí Minh, Việt Nam',
phone: '1900 xxxx',
email: 'support@goodgo.vn',
}}
socials={[
{ platform: 'facebook', href: '#' },
{ platform: 'youtube', href: '#' },
]}
renderLink={renderLink}
/>
</div>
);
}

171
apps/web/components/design-system/footer.tsx Normal file
View File

@@ -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>
);
}

6
apps/web/components/design-system/index.ts
View File

@@ -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';

422
apps/web/components/design-system/navbar.tsx Normal file
View File

@@ -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>
);
}