fix(website/i18n): header sometimes not correctly translated

This commit is contained in:
Elian Doran 2025-10-25 21:13:48 +03:00
parent a4d92e12be
commit 71cd92e0b5
No known key found for this signature in database
2 changed files with 13 additions and 9 deletions

View File

@ -23,11 +23,14 @@ export function Header(props: {repoStargazersCount: number}) {
const locale = useContext(LocaleContext); const locale = useContext(LocaleContext);
const [ mobileMenuShown, setMobileMenuShown ] = useState(false); const [ mobileMenuShown, setMobileMenuShown ] = useState(false);
const HEADER_LINKS = useMemo<HeaderLink[]>(() => [ const [ headerLinks, setHeaderLinks ] = useState<HeaderLink[]>([]);
{ url: "/get-started/", text: t("header.get-started") }, useEffect(() => {
{ url: "https://docs.triliumnotes.org/", text: t("header.documentation"), external: true }, setHeaderLinks([
{ url: "/support-us/", text: t("header.support-us") } { url: "/get-started/", text: t("header.get-started") },
], [ locale ]); { url: "https://docs.triliumnotes.org/", text: t("header.documentation"), external: true },
{ url: "/support-us/", text: t("header.support-us") }
]);
}, [ locale ]);
return ( return (
<header> <header>
@ -50,7 +53,7 @@ export function Header(props: {repoStargazersCount: number}) {
</div> </div>
<nav className={`${mobileMenuShown ? "mobile-shown" : ""}`}> <nav className={`${mobileMenuShown ? "mobile-shown" : ""}`}>
{HEADER_LINKS.map(link => ( {headerLinks.map(link => (
<Link <Link
href={link.external ? link.url : `/${locale}${link.url}`} href={link.external ? link.url : `/${locale}${link.url}`}
className={url === link.url ? "active" : ""} className={url === link.url ? "active" : ""}

View File

@ -52,14 +52,15 @@ export function LocaleProvider({ children }) {
}, },
returnEmptyString: false returnEmptyString: false
}).then(() => setLoaded(true)) }).then(() => setLoaded(true))
}, []); }, []);
useEffect(() => { useLayoutEffect(() => {
if (!loaded) return;
changeLanguage(localeId); changeLanguage(localeId);
const correspondingLocale = LOCALES.find(l => l.id === localeId); const correspondingLocale = LOCALES.find(l => l.id === localeId);
document.documentElement.lang = localeId; document.documentElement.lang = localeId;
document.documentElement.dir = correspondingLocale?.rtl ? "rtl" : "ltr"; document.documentElement.dir = correspondingLocale?.rtl ? "rtl" : "ltr";
}, [ localeId ]); }, [ loaded, localeId ]);
return ( return (
<LocaleContext.Provider value={localeId}> <LocaleContext.Provider value={localeId}>