dashboard page for user start config

src/Components/Routes.js

@@ -21,6 +21,8 @@ import { NotFound } from '../Pages/404'
 import { Profile } from '../Pages/Profile'
 import { RestorePassword } from '../Pages/RestorePassword'
 
+import { HomeUser } from '../Pages/HomeUser'
+
 import RequireAuth from '../Components/PrivateRoute'
 
 export default function MyRoutes () {
@@ -44,6 +46,7 @@ export default function MyRoutes () {
                     </RequireAuth>
                 }
             >
+                <Route path="home" element={<HomeUser/>} />
             </Route>
 
 

src/Components/User.jsx

@@ -1,24 +1,23 @@
 import * as React from 'react';
 
-import AppBar from '@mui/material/AppBar';
-import Box from '@mui/material/Box';
-import CssBaseline from '@mui/material/CssBaseline';
-import Divider from '@mui/material/Divider';
-import Drawer from '@mui/material/Drawer';
-import IconButton from '@mui/material/IconButton';
-import InboxIcon from '@mui/icons-material/MoveToInbox';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import MailIcon from '@mui/icons-material/Mail';
-import MenuIcon from '@mui/icons-material/Menu';
-import Button from '@mui/material/Button';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
+import { 
+    Mail as MailIcon, Menu as MenuIcon,
+    MoveToInbox as InboxIcon
+} from '@mui/icons-material'
+
+import { Outlet, useNavigate } from "react-router-dom";
+
+import { 
+    AppBar, Box, CssBaseline, Divider, Drawer,
+    IconButton,List, ListItem, ListItemButton, ListItemIcon, ListItemText,
+    Button,Toolbar, Typography, Container
+} from '@mui/material'
+
+import Footer from "../Components/Footer.js";
+
 import useAuth from '../Auth/useAuth';
 
+
 const drawerWidth = 240;
 
 export function User(props) {
@@ -125,15 +124,15 @@ export function User(props) {
             </Box>
             <Box
                 component="main"
-                sx={{ flexGrow: 1, p: 3, width: { sm: `calc(100% - ${drawerWidth}px)` } }}
-            >
-                <Toolbar />
-                <Typography paragraph>
-                    Bienvenido User
-                </Typography>
-                <div>
-                    <Button onClick={auth.logout} variant="contained">Cerrar Session</Button>
-                </div>
+                sx={{ flexGrow: 1, p: 3, width: { sm: `calc(100% - ${drawerWidth}px)` } }} >
+
+                <Container maxWidth="lg" sx={{ mt: 2, mb: 2 }}>
+                    <Outlet />
+                    <Footer />
+                </Container>
+
+
+
             </Box>
         </Box>
     );

src/Pages/HomeUser.jsx

@@ -0,0 +1,19 @@
+import { 
+    Typography, Button
+} from '@mui/material';
+
+export function HomeUser(){
+    return (
+        <div>
+            <Typography paragraph>
+                Bienvenido User
+            </Typography>
+            <div>
+                <Button onClick={() => console.log("close")} 
+                    variant="contained">
+                    Cerrar Session
+                </Button>
+            </div>
+        </div>
+    )
+}

src/Pages/Logincs.jsx

@@ -93,7 +93,7 @@ export function LoginCs() {
     
     React.useEffect(() => {
         if(auth.isLogged()){
-            return navigate('/user')
+            return navigate('/user/home')
         }
     }, [auth,navigate])