m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-12-18 15:23:38 +01:00
Code Issues Packages Projects Releases Wiki Activity

Load fonts only for specific locale changes.

Browse Source
This commit is contained in:
Mike Cao 2020-09-11 13:21:17 -07:00
parent 5a22be5efa
commit 01432266ef
2 changed files with 31 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
components/common/LanguageButton.js
View File

@ -1,4 +1,5 @@
import React, { useState, useRef } from 'react'; import React, { useState, useRef } from 'react';
import Head from 'next/head';
import Globe from 'assets/globe.svg'; import Globe from 'assets/globe.svg';
import useDocumentClick from 'hooks/useDocumentClick'; import useDocumentClick from 'hooks/useDocumentClick';
import Menu from './Menu'; import Menu from './Menu';
@ -26,19 +27,35 @@ export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'l
}); });
return ( return (
<div ref={ref} className={styles.container}> <>
<Button icon={<Globe />} onClick={() => setShowMenu(true)} size="small"> <Head>
<div className={locale}>{selectedLocale}</div> {locale === 'zh-CN' && (
</Button> <link
{showMenu && ( href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap"
<Menu rel="stylesheet"
className={styles.menu} />
options={menuOptions} )}
onSelect={handleSelect} {locale === 'jp-JP' && (
float={menuPosition} <link
align={menuAlign} href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap"
/> rel="stylesheet"
)} />
</div> )}
</Head>
<div ref={ref} className={styles.container}>
<Button icon={<Globe />} onClick={() => setShowMenu(true)} size="small">
<div className={locale}>{selectedLocale}</div>
</Button>
{showMenu && (
<Menu
className={styles.menu}
options={menuOptions}
onSelect={handleSelect}
float={menuPosition}
align={menuAlign}
/>
)}
</div>
</>
); );
} }

4
components/layout/Layout.js
View File

@ -13,10 +13,6 @@ export default function Layout({ title, children, header = true, footer = true }
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap"
rel="stylesheet"
/>
</Head> </Head>
{header && <Header />} {header && <Header />}
<main className="container">{children}</main> <main className="container">{children}</main>