language switch moved to header

web/src/components/App/index.jsx

@@ -10,8 +10,9 @@ import axios from 'axios'
 import TorrentList from 'components/TorrentList'
 import DonateSnackbar from 'components/Donate'
 import DonateDialog from 'components/Donate/DonateDialog'
+import useChangeLanguage from 'utils/useChangeLanguage'
 
-import { AppWrapper, AppHeader } from './style'
+import { AppWrapper, AppHeader, LanguageSwitch } from './style'
 import Sidebar from './Sidebar'
 
 const baseTheme = createMuiTheme({
@@ -23,6 +24,7 @@ export default function App() {
   const [isDrawerOpen, setIsDrawerOpen] = useState(false)
   const [isDonationDialogOpen, setIsDonationDialogOpen] = useState(false)
   const [torrServerVersion, setTorrServerVersion] = useState('')
+  const [currentLang, changeLang] = useChangeLanguage()
 
   useEffect(() => {
     axios.get(echoHost()).then(({ data }) => setTorrServerVersion(data))
@@ -48,6 +50,12 @@ export default function App() {
             <Typography variant='h6' noWrap>
               TorrServer {torrServerVersion}
             </Typography>
+
+            <div style={{ justifySelf: 'end' }}>
+              <LanguageSwitch onClick={() => (currentLang === 'en' ? changeLang('ru') : changeLang('en'))}>
+                {currentLang === 'en' ? 'RU' : 'EN'}
+              </LanguageSwitch>
+            </div>
           </AppHeader>
 
           <Sidebar isDrawerOpen={isDrawerOpen} setIsDonationDialogOpen={setIsDonationDialogOpen} />