feat: add language button (#692)

hasadna · Apr 23, 2024 · 9556d92 · 9556d92
1 parent fc9c8b5
commit 9556d92
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 23 deletions.
diff --git a/src/layout/header/Header.tsx b/src/layout/header/Header.tsx
@@ -7,6 +7,7 @@ import './Header.css'
 import cn from 'classnames'
 import ToggleThemeButton from './ToggleThemeButton'
 import HeaderLinks from './HeaderLinks/HeaderLinks'
+import { LanguageToggle } from 'src/layout/header/LanguageToggle'
 
 const { Header } = Layout
 
@@ -17,6 +18,7 @@ const MainHeader = () => {
     <Header className={cn('main-header', { dark: isDarkTheme })}>
       <MenuOutlined onClick={() => setDrawerOpen(true)} className="hideOnDesktop" />
       <div style={{ flex: 1 }}>&nbsp;</div>
+      <LanguageToggle />
       <ToggleThemeButton toggleTheme={toggleTheme} isDarkTheme={isDarkTheme} />
       <HeaderLinks />
     </Header>

diff --git a/src/pages/EasterEgg/LanguageToggle.tsx → src/layout/header/LanguageToggle.tsx b/src/pages/EasterEgg/LanguageToggle.tsx → src/layout/header/LanguageToggle.tsx
@@ -1,7 +1,6 @@
 import { useReducer } from 'react'
 import { useTranslation } from 'react-i18next'
-import { EasterEgg } from './EasterEgg'
-import { Button } from '@mui/material'
+import { GlobalOutlined } from '@ant-design/icons'
 
 export const LanguageToggle = () => {
   const { t, i18n } = useTranslation()
@@ -12,13 +11,13 @@ export const LanguageToggle = () => {
   }, 'he')
 
   return (
-    <EasterEgg code="english">
-      <Button
-        onClick={handleChangeLanguage}
-        variant="contained"
-        style={{ margin: 'auto', display: 'block' }}>
-        {t('Change Language')}
-      </Button>
-    </EasterEgg>
+    <button
+      className="theme-icon"
+      onClick={handleChangeLanguage}
+      aria-label={t('Change Language')}
+      title={t('Change Language')}
+      style={{ margin: '1em', border: 'none', background: 'transparent', cursor: 'pointer' }}>
+      <GlobalOutlined style={{ fontSize: '1.7em' }} />
+    </button>
   )
 }
diff --git a/src/layout/sidebar/menu/Menu.tsx b/src/layout/sidebar/menu/Menu.tsx
@@ -7,7 +7,6 @@ import { PAGES } from 'src/routes'
 import type { MenuProps } from 'antd'
 import { Menu } from 'antd'
 import { LayoutContextInterface, LayoutCtx } from 'src/layout/LayoutContext'
-import { LanguageToggle } from 'src/pages/EasterEgg/LanguageToggle'
 type MenuItem = Required<MenuProps>['items'][number]
 function getItem(
   label: React.ReactNode,
@@ -53,16 +52,13 @@ const MainMenu = () => {
     setCurrent(key)
   }
   return (
-    <>
-      <Menu
-        onClick={handleClick}
-        theme="light"
-        selectedKeys={[current]}
-        mode="inline"
-        items={items}
-      />
-      {<LanguageToggle />}
-    </>
+    <Menu
+      onClick={handleClick}
+      theme="light"
+      selectedKeys={[current]}
+      mode="inline"
+      items={items}
+    />
   )
 }
 

diff --git a/src/locale/en.json b/src/locale/en.json
@@ -80,7 +80,7 @@
   "github_link": "Go to GitHub",
   "dark_mode_tooltip": "Move to Dark mode",
   "light_mode_tooltip": "Move to Light mode",
-  "Change Language": "שנה שפה",
+  "Change Language": "עברית",
   "bug_title": "Title/Summary",
   "bug_title_message": "Please enter a title/summary!",
   "bug_description": "Description",

diff --git a/src/locale/he.json b/src/locale/he.json
@@ -82,7 +82,7 @@
   "github_link": "למעבר אל GitHub",
   "dark_mode_tooltip": "עבור למצב חשוך",
   "light_mode_tooltip": "עבור למצב בהיר",
-  "Change Language": "Change Language",
+  "Change Language": "Englesh",
   "bug_title": "כותרת/סיכום",
   "bug_title_message": "אנא הזן כותרת/סיכום!",
   "bug_description": "תיאור",