language switch moved to header

web/src/components/App/Sidebar.jsx

@@ -2,10 +2,9 @@ import Divider from '@material-ui/core/Divider'
 import ListItem from '@material-ui/core/ListItem'
 import ListItemIcon from '@material-ui/core/ListItemIcon'
 import ListItemText from '@material-ui/core/ListItemText'
-import { CreditCard as CreditCardIcon, Language as LanguageIcon } from '@material-ui/icons'
+import { CreditCard as CreditCardIcon } from '@material-ui/icons'
 import List from '@material-ui/core/List'
 import { useTranslation } from 'react-i18next'
-import useChangeLanguage from 'utils/useChangeLanguage'
 import AddDialogButton from 'components/Add'
 import SettingsDialog from 'components/Settings'
 import RemoveAll from 'components/RemoveAll'
@@ -15,7 +14,6 @@ import CloseServer from 'components/CloseServer'
 import { AppSidebarStyle } from './style'
 
 export default function Sidebar({ isDrawerOpen, setIsDonationDialogOpen }) {
-  const [currentLang, changeLang] = useChangeLanguage()
   const { t } = useTranslation()
 
   return (
@@ -35,17 +33,6 @@ export default function Sidebar({ isDrawerOpen, setIsDonationDialogOpen }) {
 
       <Divider />
 
-      <List>
-        <ListItem button onClick={() => (currentLang === 'en' ? changeLang('ru') : changeLang('en'))}>
-          <ListItemIcon>
-            <LanguageIcon />
-          </ListItemIcon>
-          <ListItemText primary={t('ChooseLanguage')} />
-        </ListItem>
-      </List>
-
-      <Divider />
-
       <List>
         <AboutDialog />
 

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} />

web/src/components/App/style.js

@@ -21,8 +21,10 @@ export const AppHeader = styled.div`
   background: #00a572;
   color: rgba(0, 0, 0, 0.87);
   grid-area: head;
-  display: flex;
+  display: grid;
+  grid-auto-flow: column;
   align-items: center;
+  grid-template-columns: repeat(2, max-content) 1fr;
   box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
   padding: 0 24px;
   z-index: 3;
@@ -63,3 +65,26 @@ export const TorrentListWrapper = styled.div`
     grid-template-columns: 1fr;
   }
 `
+
+export const LanguageSwitch = styled.div`
+  cursor: pointer;
+  border-radius: 50%;
+  background: #56b887;
+  height: 35px;
+  width: 35px;
+  transition: all 0.2s;
+  font-weight: 500;
+  display: grid;
+  place-items: center;
+  color: #44795e;
+
+  :hover {
+    background: #7ec9a3;
+  }
+
+  @media (max-width: 700px) {
+    height: 28px;
+    width: 28px;
+    font-size: 12px;
+  }
+`