fix: translate dynamic menu labels in Navbar and Footer

This commit is contained in:
Your Name committed 2026-06-14 00:29:28 -04:00
1 parent a46fa3f0d4
commit ef89731c86
2 files changed
+35 -4

No files matched your search

+18 -2
View File
@@ -12,6 +12,22 @@ export default function Footer({ categories = [] }: FooterProps) {
const [supportMenu, setSupportMenu] = useState<MenuItem[]>([])
const [settings, setSettings] = useState<StoreSettings | null>(null)
const translateMenuLabel = (label: string) => {
const map: Record<string, string> = {
'Home': 'nav.home',
'Shop': 'nav.shop',
'Scent Guide': 'nav.scentGuide',
'About Us': 'nav.about',
'About': 'nav.about',
'FAQ': 'nav.faq',
'Contact': 'nav.contact',
'Contact Us': 'nav.contact',
'Track Order': 'nav.trackOrder',
'Delivery & Returns': 'nav.delivery'
}
return map[label] ? t(map[label]) : label
}
useEffect(() => {
fetch(`${API_BASE}/menus/footer-explore`)
.then(r => r.ok ? r.json() : null)
@@ -73,7 +89,7 @@ export default function Footer({ categories = [] }: FooterProps) {
<div className="flex flex-col space-y-2 text-sm text-slate-400">
{exploreMenu.length > 0 ? (
exploreMenu.map(item => (
<Link key={item.id} to={item.url} className="hover:text-white transition-colors">{item.label}</Link>
<Link key={item.id} to={item.url} className="hover:text-white transition-colors">{translateMenuLabel(item.label)}</Link>
))
) : (
<>
@@ -103,7 +119,7 @@ export default function Footer({ categories = [] }: FooterProps) {
<h4 className="font-bold uppercase tracking-widest text-xs text-white">{t('footer.support', 'Support & Legal')}</h4>
<div className="flex flex-col space-y-2 text-sm text-slate-400">
{supportMenu.map(item => (
<Link key={item.id} to={item.url} className="hover:text-white transition-colors">{item.label}</Link>
<Link key={item.id} to={item.url} className="hover:text-white transition-colors">{translateMenuLabel(item.label)}</Link>
))}
</div>
+17 -2
View File
@@ -44,6 +44,21 @@ export default function Navbar({ categories = [], topOffsetClassName = 'top-0' }
localStorage.setItem('homaroma_lang', code)
setLangSheetOpen(false)
}
const translateMenuLabel = (label: string) => {
const map: Record<string, string> = {
'Home': 'nav.home',
'Shop': 'nav.shop',
'Scent Guide': 'nav.scentGuide',
'About Us': 'nav.about',
'FAQ': 'nav.faq',
'Contact': 'nav.contact',
'Contact Us': 'nav.contact',
'Track Order': 'nav.trackOrder',
'Delivery & Returns': 'nav.delivery'
}
return map[label] ? t(map[label]) : label
}
// Detect scroll and announcement bar presence
useEffect(() => {
const checkAnnouncement = () => {
@@ -130,7 +145,7 @@ export default function Navbar({ categories = [], topOffsetClassName = 'top-0' }
{menuItems.length > 0 ? (
menuItems.map(item => (
<NavLink key={item.id} to={item.url} end={item.url === '/'} className={navLinkClass}>
{item.label}
{translateMenuLabel(item.label)}
</NavLink>
))
) : (
@@ -418,7 +433,7 @@ export default function Navbar({ categories = [], topOffsetClassName = 'top-0' }
{/* Drawer Nav Links */}
<div className="flex-1 overflow-y-auto px-4 py-6 space-y-1">
{(menuItems.length > 0 ? [
...menuItems.map(item => ({ to: item.url, label: item.label, end: item.url === '/' })),
...menuItems.map(item => ({ to: item.url, label: translateMenuLabel(item.label), end: item.url === '/' })),
...(customer ? [{ to: '/profile', label: `👤 ${t('nav.profile') || 'My Profile'}` }] : []),
] : [
{ to: '/', label: t('nav.home'), end: true },