adapt nav bar to mobile

Arquisoft · Apr 27, 2024 · 66ee8db · 66ee8db
1 parent 2f45728
commit 66ee8db
Showing 1 changed file with 12 additions and 3 deletions.
diff --git a/webapp/src/components/NavBar.js b/webapp/src/components/NavBar.js
@@ -103,6 +103,15 @@ function NavBar() {
                     </Link>
                   </MenuItem>
                 ))}
+              <Box sx={{ display: "flex", alignItems: "center", borderRadius: '0.5em', '&:hover': { backgroundColor: '#5f7e94' }}}>
+                <TranslateIcon />
+                <Select value={lang} autoWidth onChange={(e) => handleChangeLang(e.target.value)} data-testid="select-lang"
+                    sx={{ color: 'black', boxShadow: 'none', '.MuiOutlinedInput-notchedOutline': { border: 0 } }}>
+                  <MenuItem value={"en"} data-testid="en_selector">{t("NavBar.languages.en")}</MenuItem>
+                  <MenuItem value={"es"} data-testid="es_selector">{t("NavBar.languages.es")}</MenuItem>
+                  <MenuItem value={"fr"} data-testid="fr_selector">{t("NavBar.languages.fr")}</MenuItem>
+                </Select>
+              </Box>
             </Menu>
             { logo }
           </Box>
@@ -130,8 +139,9 @@ function NavBar() {
         )}
 
         <Box sx={{ display: "flex", gap: {sm: "0.5em", lg: "2em"} }}>
-          {/* Internacionalization */}
-          <Box sx={{ display: "flex", alignItems: "center", borderRadius: '0.5em', '&:hover': { backgroundColor: '#5f7e94' }}}>
+
+          {/* Internacionalization */} 
+          <Box sx={{ display: { xs: 'none', md: 'flex' }, alignItems: "center", borderRadius: '0.5em', '&:hover': { backgroundColor: '#5f7e94' }}}>
             <TranslateIcon />
             <Select value={lang} autoWidth onChange={(e) => handleChangeLang(e.target.value)} data-testid="select-lang"
                     sx={{ color: 'white', boxShadow: 'none', '.MuiOutlinedInput-notchedOutline': { border: 0 } }}>
@@ -140,7 +150,6 @@ function NavBar() {
               <MenuItem value={"fr"} data-testid="fr_selector">{t("NavBar.languages.fr")}</MenuItem>
             </Select>
           </Box>
-
           {isLoggedIn ? (
             <>
               <Box sx={{ display:'flex', alignItems:'center' }}>