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 [supportMenu, setSupportMenu] = useState<MenuItem[]>([])
const [settings, setSettings] = useState<StoreSettings | null>(null) 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(() => { useEffect(() => {
fetch(`${API_BASE}/menus/footer-explore`) fetch(`${API_BASE}/menus/footer-explore`)
.then(r => r.ok ? r.json() : null) .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"> <div className="flex flex-col space-y-2 text-sm text-slate-400">
{exploreMenu.length > 0 ? ( {exploreMenu.length > 0 ? (
exploreMenu.map(item => ( 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> <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"> <div className="flex flex-col space-y-2 text-sm text-slate-400">
{supportMenu.map(item => ( {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> </div>
+17 -2
View File
@@ -44,6 +44,21 @@ export default function Navbar({ categories = [], topOffsetClassName = 'top-0' }
localStorage.setItem('homaroma_lang', code) localStorage.setItem('homaroma_lang', code)
setLangSheetOpen(false) 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 // Detect scroll and announcement bar presence
useEffect(() => { useEffect(() => {
const checkAnnouncement = () => { const checkAnnouncement = () => {
@@ -130,7 +145,7 @@ export default function Navbar({ categories = [], topOffsetClassName = 'top-0' }
{menuItems.length > 0 ? ( {menuItems.length > 0 ? (
menuItems.map(item => ( menuItems.map(item => (
<NavLink key={item.id} to={item.url} end={item.url === '/'} className={navLinkClass}> <NavLink key={item.id} to={item.url} end={item.url === '/'} className={navLinkClass}>
{item.label} {translateMenuLabel(item.label)}
</NavLink> </NavLink>
)) ))
) : ( ) : (
@@ -418,7 +433,7 @@ export default function Navbar({ categories = [], topOffsetClassName = 'top-0' }
{/* Drawer Nav Links */} {/* Drawer Nav Links */}
<div className="flex-1 overflow-y-auto px-4 py-6 space-y-1"> <div className="flex-1 overflow-y-auto px-4 py-6 space-y-1">
{(menuItems.length > 0 ? [ {(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'}` }] : []), ...(customer ? [{ to: '/profile', label: `👤 ${t('nav.profile') || 'My Profile'}` }] : []),
] : [ ] : [
{ to: '/', label: t('nav.home'), end: true }, { to: '/', label: t('nav.home'), end: true },