Rudimentary unauth language switch

I can't figure out how to make the current page persist when switching.

Next.js adds a /ja prefix to the path and when switching to Japanese, but it doesn't remove it when switching back to English. This documentation sucks!

components/HeaderMenu/index.scss

@@ -26,6 +26,73 @@
         padding: 6px 12px;
     }
 
+    &.language {
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+        gap: $unit;
+        padding-right: $unit;
+
+        span {
+            flex-grow: 1;
+        }
+
+        .Switch {
+            $height: 24px;
+
+            background: $grey-60;
+            border-radius: calc($height / 2);
+            border: none;
+            position: relative;
+            width: 44px;
+            height: $height;
+
+            &:hover {
+                cursor: pointer;
+            }
+
+            .Thumb {
+                $diameter: 18px;
+
+                background: white;
+                border-radius: calc($diameter / 2);
+                display: block;
+                height: $diameter;
+                width: $diameter;
+                transition: transform 100ms;
+                transform: translateX(-2px);
+                z-index: 3;
+    
+                &:hover {
+                    cursor: pointer;
+                }
+    
+                &[data-state="checked"] {
+                    background: white;
+                    transform: translateX(17px);
+                }
+            }
+            
+            .left, .right {
+                color: white;
+                font-size: 10px;
+                font-weight: $bold;
+                position: absolute;
+                z-index: 2;
+            }
+
+            .left {
+                top: 6px;
+                left: 6px;
+            }
+
+            .right {
+                top: 6px;
+                right: 5px;
+            }
+        }
+    }
+
     a {
         color: $grey-40;
     }
@@ -54,7 +121,7 @@
 
         img {
             $diameter: 32px;
-            border-radius: $diameter / 2;
+            border-radius: calc($diameter / 2);
             height: $diameter;
             width: $diameter;
         }

components/HeaderMenu/index.tsx

@@ -1,8 +1,11 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
-import Link from 'next/link'
 import { useCookies } from 'react-cookie'
+import Router, { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
 
+import Link from 'next/link'
+import * as Switch from '@radix-ui/react-switch'
+
 import AboutModal from '~components/AboutModal'
 import AccountModal from '~components/AccountModal'
 import LoginModal from '~components/LoginModal'
@@ -17,10 +20,29 @@ interface Props {
 }
 
 const HeaderMenu = (props: Props) => {
+    const router = useRouter()
     const { t } = useTranslation('common')
     
     const [accountCookies] = useCookies(['account'])
     const [userCookies] = useCookies(['user'])
+    const [cookies, setCookies] = useCookies()
+
+    const [checked, setChecked] = useState(false)
+
+    console.log(`Currently: ${checked} ${cookies['NEXT_LOCALE']}`)
+
+    useEffect(() => {
+        const locale = cookies['NEXT_LOCALE']
+        setChecked((locale === 'ja') ? true : false)
+    }, [cookies])
+
+    function handleCheckedChange(value: boolean) {
+        setChecked(value)
+        setCookies('NEXT_LOCALE', (value) ? 'ja' : 'en', { path: '/'})
+
+        // TODO: How do we persist the current page when changing languages?
+        window.location.href = '/'
+    } 
 
     function authItems() {
         return (
@@ -72,6 +94,16 @@ const HeaderMenu = (props: Props) => {
     function unauthItems() {
         return (
             <ul className="Menu unauth">
+                <div className="MenuGroup">
+                    <li className="MenuItem language">
+                        <span>{t('menu.language')}</span>
+                        <Switch.Root className="Switch" onCheckedChange={handleCheckedChange} checked={checked}>
+                            <Switch.Thumb className="Thumb" />
+                            <span className="left">JP</span>
+                            <span className="right">EN</span>
+                        </Switch.Root>
+                    </li>
+                </div>
                 <div className="MenuGroup">
                     <AboutModal />
                 </div>

public/locales/en/common.json

@@ -76,6 +76,7 @@
     "menu": {
         "about": "About",
         "guides": "Guides",
+        "language": "Language",
         "saved": "Saved",
         "settings": "Settings",
         "teams": "Teams",

public/locales/ja/common.json

@@ -76,6 +76,7 @@
     "menu": {
         "about": "このサイトについて",
         "guides": "攻略",
+        "language": "言語",
         "saved": "保存した編成",
         "settings": "アカウント設定",
         "teams": "編成一覧",