rede5/gohorsejobs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(frontend): resolve hydration mismatch in navbar i18n

Browse source
This commit is contained in:
GoHorse Deploy 2026-02-09 11:16:18 +00:00
parent 5c7b2c791c
commit 5c8bdac215
1 changed files with 121 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
frontend/src/components/navbar.tsx
View file

@ -1,6 +1,6 @@
"use client" "use client"
import { useState } from "react" import { useState, useEffect } from "react"
import Link from "next/link" import Link from "next/link"
import Image from "next/image" import Image from "next/image"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
@ -12,15 +12,26 @@ import { LanguageSwitcher } from "@/components/language-switcher"
export function Navbar() { export function Navbar() {
const [isOpen, setIsOpen] = useState(false) const [isOpen, setIsOpen] = useState(false)
const [mounted, setMounted] = useState(false)
const user = getCurrentUser() const user = getCurrentUser()
const { t } = useTranslation() 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 = [ const navigationItems = [
{ href: "/jobs", label: t('nav.jobs') }, { href: "/jobs", label: mounted ? t('nav.jobs') : "Vagas" },
{ href: "/companies", label: t('footer.empresas') }, { href: "/companies", label: mounted ? t('footer.empresas') : "Empresas" },
{ href: "/blog", label: t('footer.blog') }, { 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 ( return (
<nav className="bg-[#1F2F40] sticky top-0 z-50 shadow-sm border-b border-white/20"> <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"> <div className="container mx-auto px-4 sm:px-6 lg:px-8">
@ -60,7 +71,7 @@ export function Navbar() {
) : ( ) : (
<Link href="/login"> <Link href="/login">
<Button variant="outline" className="border-primary text-primary hover:bg-primary/10 px-6 h-9 font-normal"> <Button variant="outline" className="border-primary text-primary hover:bg-primary/10 px-6 h-9 font-normal">
{t('footer.login')} {loginLabel}
</Button> </Button>
</Link> </Link>
)} )}
@ -104,13 +115,13 @@ export function Navbar() {
<Link href="/login" onClick={() => setIsOpen(false)}> <Link href="/login" onClick={() => setIsOpen(false)}>
<Button variant="ghost" className="w-full justify-start gap-2"> <Button variant="ghost" className="w-full justify-start gap-2">
<LogIn className="w-4 h-4" /> <LogIn className="w-4 h-4" />
{t('nav.login')} {mobileLoginLabel}
</Button> </Button>
</Link> </Link>
<Link href="/register" onClick={() => setIsOpen(false)}> <Link href="/register" onClick={() => setIsOpen(false)}>
<Button className="w-full justify-start gap-2"> <Button className="w-full justify-start gap-2">
<User className="w-4 h-4" /> <User className="w-4 h-4" />
{t('nav.register')} {registerLabel}
</Button> </Button>
</Link> </Link>
</> </>