From 5c8bdac2159061143c57de1ac077388df88e84f9 Mon Sep 17 00:00:00 2001 From: GoHorse Deploy Date: Mon, 9 Feb 2026 11:16:18 +0000 Subject: [PATCH] fix(frontend): resolve hydration mismatch in navbar i18n --- frontend/src/components/navbar.tsx | 231 +++++++++++++++-------------- 1 file changed, 121 insertions(+), 110 deletions(-) diff --git a/frontend/src/components/navbar.tsx b/frontend/src/components/navbar.tsx index 67a4318..dbe644d 100644 --- a/frontend/src/components/navbar.tsx +++ b/frontend/src/components/navbar.tsx @@ -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" @@ -11,119 +11,130 @@ import { useTranslation } from "@/lib/i18n" import { LanguageSwitcher } from "@/components/language-switcher" export function Navbar() { - const [isOpen, setIsOpen] = useState(false) - const user = getCurrentUser() - const { t } = useTranslation() + const [isOpen, setIsOpen] = useState(false) + const [mounted, setMounted] = useState(false) + const user = getCurrentUser() + const { t } = useTranslation() - const navigationItems = [ - { href: "/jobs", label: t('nav.jobs') }, - { href: "/companies", label: t('footer.empresas') }, - { href: "/blog", label: t('footer.blog') }, - ] + // Prevent hydration mismatch by only rendering translated content after mount + useEffect(() => { + setMounted(true) + }, []) - return ( - - ) + + + ) }