diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index a8826dd9..57cad9d1 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react'
import { subscribe, useSnapshot } from 'valtio'
-import { deleteCookie } from 'cookies-next'
+import { setCookie, deleteCookie } from 'cookies-next'
import { useRouter } from 'next/router'
import { Trans, useTranslation } from 'next-i18next'
import classNames from 'classnames'
@@ -10,6 +10,7 @@ import Link from 'next/link'
import api from '~utils/api'
import { accountState, initialAccountState } from '~utils/accountState'
import { appState, initialAppState } from '~utils/appState'
+import { retrieveLocaleCookies } from '~utils/retrieveCookies'
import {
DropdownMenu,
@@ -25,6 +26,8 @@ import SignupModal from '~components/SignupModal'
import AccountModal from '~components/AccountModal'
import Toast from '~components/Toast'
import Button from '~components/Button'
+import Tooltip from '~components/Tooltip'
+import * as Switch from '@radix-ui/react-switch'
import ArrowIcon from '~public/icons/Arrow.svg'
import LinkIcon from '~public/icons/Link.svg'
@@ -34,7 +37,6 @@ import PlusIcon from '~public/icons/Add.svg'
import SaveIcon from '~public/icons/Save.svg'
import './index.scss'
-import Tooltip from '~components/Tooltip'
const Header = () => {
// Localization
@@ -44,6 +46,7 @@ const Header = () => {
const router = useRouter()
const locale =
router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+ const localeData = retrieveLocaleCookies()
// State management
const [copyToastOpen, setCopyToastOpen] = useState(false)
@@ -53,6 +56,7 @@ const Header = () => {
const [settingsModalOpen, setSettingsModalOpen] = useState(false)
const [leftMenuOpen, setLeftMenuOpen] = useState(false)
const [rightMenuOpen, setRightMenuOpen] = useState(false)
+ const [languageChecked, setLanguageChecked] = useState(false)
const [name, setName] = useState('')
const [originalName, setOriginalName] = useState('')
@@ -71,6 +75,11 @@ const Header = () => {
useEffect(() => () => unsubscribe(), [])
+ // Hooks
+ useEffect(() => {
+ setLanguageChecked(localeData === 'ja' ? true : false)
+ }, [localeData])
+
// Methods: Event handlers (Buttons)
function handleLeftMenuButtonClicked() {
setLeftMenuOpen(!leftMenuOpen)
@@ -122,6 +131,15 @@ const Header = () => {
closeRightMenu()
}
+ function changeLanguage(value: boolean) {
+ const language = value ? 'ja' : 'en'
+ const expiresAt = new Date()
+ expiresAt.setDate(expiresAt.getDate() + 120)
+
+ setCookie('NEXT_LOCALE', language, { path: '/', expires: expiresAt })
+ router.push(router.asPath, undefined, { locale: language })
+ }
+
function copyToClipboard() {
const path = router.asPath.split('/')[1]
@@ -536,6 +554,20 @@ const Header = () => {
} else {
items = (
<>
+
+
+ {t('menu.language')}
+
+
+ JP
+ EN
+
+
+