fix(frontend): resolve hydration mismatch in navbar i18n
This commit is contained in:
parent
5c7b2c791c
commit
5c8bdac215
1 changed files with 121 additions and 110 deletions
|
|
@ -1,6 +1,6 @@
|
|||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useState, useEffect } from "react"
|
||||
import Link from "next/link"
|
||||
import Image from "next/image"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
|
@ -12,15 +12,26 @@ import { LanguageSwitcher } from "@/components/language-switcher"
|
|||
|
||||
export function Navbar() {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
const [mounted, setMounted] = useState(false)
|
||||
const user = getCurrentUser()
|
||||
const { t } = useTranslation()
|
||||
|
||||
// Prevent hydration mismatch by only rendering translated content after mount
|
||||
useEffect(() => {
|
||||
setMounted(true)
|
||||
}, [])
|
||||
|
||||
// Static labels for SSR, translated labels for client
|
||||
const navigationItems = [
|
||||
{ href: "/jobs", label: t('nav.jobs') },
|
||||
{ href: "/companies", label: t('footer.empresas') },
|
||||
{ href: "/blog", label: t('footer.blog') },
|
||||
{ href: "/jobs", label: mounted ? t('nav.jobs') : "Vagas" },
|
||||
{ href: "/companies", label: mounted ? t('footer.empresas') : "Empresas" },
|
||||
{ href: "/blog", label: mounted ? t('footer.blog') : "Blog" },
|
||||
]
|
||||
|
||||
const loginLabel = mounted ? t('footer.login') : "Entrar"
|
||||
const registerLabel = mounted ? t('nav.register') : "Cadastrar"
|
||||
const mobileLoginLabel = mounted ? t('nav.login') : "Login"
|
||||
|
||||
return (
|
||||
<nav className="bg-[#1F2F40] sticky top-0 z-50 shadow-sm border-b border-white/20">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
|
|
@ -60,7 +71,7 @@ export function Navbar() {
|
|||
) : (
|
||||
<Link href="/login">
|
||||
<Button variant="outline" className="border-primary text-primary hover:bg-primary/10 px-6 h-9 font-normal">
|
||||
{t('footer.login')}
|
||||
{loginLabel}
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
|
|
@ -104,13 +115,13 @@ export function Navbar() {
|
|||
<Link href="/login" onClick={() => setIsOpen(false)}>
|
||||
<Button variant="ghost" className="w-full justify-start gap-2">
|
||||
<LogIn className="w-4 h-4" />
|
||||
{t('nav.login')}
|
||||
{mobileLoginLabel}
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/register" onClick={() => setIsOpen(false)}>
|
||||
<Button className="w-full justify-start gap-2">
|
||||
<User className="w-4 h-4" />
|
||||
{t('nav.register')}
|
||||
{registerLabel}
|
||||
</Button>
|
||||
</Link>
|
||||
</>
|
||||
|
|
|
|||
Loading…
Reference in a new issue