feat(menu-footer): improved menu footer

src/app/[locale]/ClientLayout.tsx

@@ -14,6 +14,7 @@ import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
 import { useTranslations } from 'next-intl';
 import LanguageSelector from '@/components/LanguageSelector';
+import FooterMenu from '@/components/FooterMenu';
 
 type ClientLayoutProps = {
   locale: string;
@@ -35,7 +36,7 @@ export default function ClientLayout({ locale, children }: ClientLayoutProps) {
           <SessionProvider>
             <QueryClientProvider client={queryClient}>
               <Auth>
-                <DashboardLayout slots={{ sidebarFooter: LanguageSelector }}>
+                <DashboardLayout slots={{ sidebarFooter: FooterMenu }}>
                   <PageContainer maxWidth={false}>{children}</PageContainer>
                 </DashboardLayout>
               </Auth>

src/components/FooterMenu/FooterMenu.tsx

@@ -0,0 +1,18 @@
+import { Box, Typography } from '@mui/material';
+import LanguageSelector from '../LanguageSelector';
+import Link from 'next/link';
+
+function FooterMenu() {
+  return (
+    <Box>
+      <LanguageSelector labeled />
+
+      <Typography variant="caption" paddingLeft={2}>
+        Developed by:{' '}
+        <Link href={'https://github.com/mrviniciux'}>@mrviniciux</Link> - 2024
+      </Typography>
+    </Box>
+  );
+}
+
+export default FooterMenu;

src/components/FooterMenu/index.ts

@@ -0,0 +1 @@
+export { default } from './FooterMenu';

src/components/LanguageSelector/LanguageSelector.tsx

@@ -6,16 +6,23 @@ import {
   MenuItem,
   FormControl,
   SelectChangeEvent,
+  Container,
+  Typography,
+  Box,
 } from '@mui/material';
 import Flag from 'react-world-flags';
 import { useRouter } from 'next/navigation';
-import { useLocale } from 'next-intl';
+import { useLocale, useTranslations } from 'next-intl';
+import { SidebarFooterProps } from '@toolpad/core';
 
-interface LanguageSelectProps {}
+type LanguageSelectProps = {
+  labeled?: boolean;
+};
 
-const LanguageSelector: React.FC<LanguageSelectProps> = () => {
+const LanguageSelector: React.FC<LanguageSelectProps> = ({ labeled }) => {
   const router = useRouter();
   const locale = useLocale();
+  const translate = useTranslations();
 
   const handleChange = (event: SelectChangeEvent<string>) => {
     const selectedLocale = event.target.value as string;
@@ -35,7 +42,7 @@ const LanguageSelector: React.FC<LanguageSelectProps> = () => {
     },
   ];
 
-  return (
+  const InputLanguage = () => (
     <FormControl variant="outlined" size="small">
       <Select
         value={locale} // Idioma atual
@@ -52,6 +59,16 @@ const LanguageSelector: React.FC<LanguageSelectProps> = () => {
       </Select>
     </FormControl>
   );
+
+  if (!labeled) return <InputLanguage />;
+
+  return (
+    <Box padding={2}>
+      <Typography variant="caption">{translate('menu.languages')}</Typography>{' '}
+      <br />
+      <InputLanguage />
+    </Box>
+  );
 };
 
 export default LanguageSelector;

src/i18n/messages/en-US.json

@@ -6,5 +6,8 @@
   },
   "orders": {
     "title": "Orders"
+  },
+  "menu": {
+    "languages": "Languages:"
   }
 }

src/i18n/messages/pt-BR.json

@@ -6,5 +6,8 @@
   },
   "orders": {
     "title": "Pedidos"
+  },
+  "menu": {
+    "languages": "Idiomas:"
   }
 }