feat: add app and config

src/modules/layout/index.tsx

@@ -14,6 +14,8 @@ import i18n from 'i18next';
 
 import { IconButton } from '@kevisual/center-components/button/index.tsx';
 import { Languages } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
 
 type LayoutMainProps = {
   title?: React.ReactNode;
@@ -64,10 +66,11 @@ export const LayoutMain = (props: LayoutMainProps) => {
 
   const changeLanguage = (lng: string) => {
     i18n.changeLanguage(lng);
+    toast.success(t('Language changed to') + ' ' + t(lng));
     handleClose();
   };
   const currentLanguage = i18n.language;
-
+  const { t } = useTranslation();
   return (
     <div className='flex w-full h-full flex-col relative'>
       <LayoutMenu />
@@ -89,10 +92,27 @@ export const LayoutMain = (props: LayoutMainProps) => {
             <div>
               <Tooltip title={currentLanguage === 'en' ? 'English' : 'Chinese'}>
                 <IconButton onClick={handleClick} variant='contained'>
-                  <Languages />
+                  <Languages size={16} />
                 </IconButton>
               </Tooltip>
-              <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
+              <Menu
+                anchorEl={anchorEl}
+                open={Boolean(anchorEl)}
+                onClose={handleClose}
+                anchorOrigin={{
+                  vertical: 'bottom',
+                  horizontal: 'left',
+                }}
+                transformOrigin={{
+                  vertical: -2,
+                  horizontal: 52,
+                }}
+                sx={{
+                  '& .MuiButtonBase-root.Mui-selected': {
+                    backgroundColor: 'primary.main',
+                    color: 'white',
+                  },
+                }}>
                 <MenuItem selected={currentLanguage === 'en'} onClick={() => changeLanguage('en')}>
                   English
                 </MenuItem>
@@ -103,13 +123,13 @@ export const LayoutMain = (props: LayoutMainProps) => {
             </div>
             {menuStore.me?.type === 'org' && (
               <div>
-                <Tooltip title='Switch To User'>
-                  <Button
+                <Tooltip title={t('Switch To User')}>
+                  <IconButton
                     onClick={() => {
                       menuStore.switchOrg('', 'user');
                     }}>
                     <SwapOutlined />
-                  </Button>
+                  </IconButton>
                 </Tooltip>
               </div>
             )}