close sessions

src/Components/Dashboard.js

@@ -1,20 +1,20 @@
 import React from 'react';
 import { ThemeProvider } from '@mui/material/styles';
+
 import { 
     Menu,MenuItem,Container,Avatar, Badge,IconButton,Divider,
     Typography, List, Toolbar, Box, CssBaseline,useMediaQuery as Size,
 } from '@mui/material'
+
 import {
     Mail as MailIcon, Notifications as NotificationsIcon, Fullscreen as FullscreenIcon,
     Menu as MenuIcon,
 } from '@mui/icons-material'
 
 import useAuth from '../Auth/useAuth';
-
 import Logo from '../Images/logo.png';
 import ProfilePicture from '../Images/man.png';
 
-
 import { Outlet, useNavigate} from "react-router-dom";
 import { MenuMovil } from '../Components/Navigation/MenuMovil';
 import Footer from "../Components/Footer";

src/Components/Navigation/MenuMovil.jsx

@@ -1,22 +1,42 @@
 import * as React from 'react';
 
 import Drawer from '@mui/material/Drawer';
-import { MainListItems } from './MainListItems'
+import { MainListItems, SecondaryListItems} from './listItems'
+import { List, Divider } from '@mui/material';
+import { Logout } from '@mui/icons-material/';
+import { Nav } from 'react-bootstrap';
+import { ListItem, ListItemIcon,ListItemText} from '@mui/material/'
+import useAuth from '../../Auth/useAuth'
 
 export function MenuMovil(props) {
 
     let { anchor } = props;
+    const auth = useAuth();
+
     return (
-        <div>
-            <React.Fragment >
-                <Drawer
-                    anchor="left"
-                    open={anchor} >
-                    <div  style={{ paddingTop : 15}}>
-                        <MainListItems/>
-                    </div>
-                </Drawer>
-            </React.Fragment>
-        </div>
+        <React.Fragment >
+            <Drawer anchor="left" open={anchor} sx={{ width : 10 }} >
+                <List style={{ paddingTop : 64 }}>
+                    <MainListItems AppBarVisible={anchor} setAppBarVisible={() => console.log('cerrar la vision')} />
+                </List>
+                <Divider />
+                <List>
+                    {SecondaryListItems}
+                </List>
+                <Divider />
+                <List>
+                    <Nav onClick ={auth.logout}>
+                        <ListItem>
+                            <ListItemIcon>
+                                <Logout/>
+                            </ListItemIcon>
+                            <ListItemText>
+                                Cerrar sesion
+                            </ListItemText>
+                        </ListItem>
+                    </Nav>
+                </List>
+            </Drawer>
+        </React.Fragment>
     );
 }

src/Components/Navigation/listItems.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import { Nav } from 'react-bootstrap';
 
 import { 
@@ -118,3 +117,4 @@ export const SecondaryListItems = (
         <NavItem icon={<SupportAgent/>} title="Asistencia Técnica" route="/worktree" />
     </Nav>
 );
+