ref: change auth setting in Login Screen

package/components/organisms/Navbar.tsx

@@ -1,7 +1,9 @@
 "use client";
+import LanguageIcon from '@mui/icons-material/Language';
 import Grid from '@mui/material/Grid2';
+import IconButton from '@mui/material/IconButton';
+import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
-import Select from '@mui/material/Select';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import i18n from '@package/utils/language/i18n';
@@ -9,10 +11,20 @@ import i18n from '@package/utils/language/i18n';
 const Navbar: React.FC = () => {
   const { t } = useTranslation();
   const [language, setLanguage] = useState(i18n.language || 'en');
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
   const changeLanguage = (lng: string) => {
     i18n.changeLanguage(lng);
     setLanguage(lng);
+    handleClose();
+  };
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
   };
 
   useEffect(() => {
@@ -30,15 +42,24 @@ const Navbar: React.FC = () => {
         <h1 className="text-white font-bold">{t('lbl_wellcome')}</h1>
       </Grid>
       <Grid>
-        <Select
-          value={language}
-          onChange={(e) => changeLanguage(e.target.value as string)}
-          variant="outlined"
-          className="bg-white text-black"
+        {/* IconButton with globe icon to open language menu */}
+        <IconButton
+          aria-controls="language-menu"
+          aria-haspopup="true"
+          onClick={handleClick}
+          className="text-white"
         >
-          <MenuItem value="en">English</MenuItem>
-          <MenuItem value="es">Español</MenuItem>
-        </Select>
+          <LanguageIcon />
+        </IconButton>
+        <Menu
+          id="language-menu"
+          anchorEl={anchorEl}
+          open={Boolean(anchorEl)}
+          onClose={handleClose}
+        >
+          <MenuItem onClick={() => changeLanguage('en')}>English</MenuItem>
+          <MenuItem onClick={() => changeLanguage('es')}>Español</MenuItem>
+        </Menu>
       </Grid>
     </Grid>
   );