new form test 2

src/Components/Dashboard.js

@@ -1,13 +1,11 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { styled, createTheme, ThemeProvider } from '@mui/material/styles';
+import React from 'react';
+import {createTheme, ThemeProvider } from '@mui/material/styles';
 
 import { MainListItems, secondaryListItems } from './listItems';
 import { 
     Menu,MenuItem,Container,Avatar, Badge,IconButton,Divider,
-    Typography, List, Toolbar, AppBar as MuiAppBar, Box, Drawer as MuiDrawer,
-    CssBaseline, 
+    Typography, List, Toolbar, Box, CssBaseline,useMediaQuery as Size
 } from '@mui/material'
-
 import {
     Mail as MailIcon, Notifications as NotificationsIcon, Fullscreen as FullscreenIcon,
     Menu as MenuIcon,
@@ -18,105 +16,29 @@ import ProfilePicture from '../Images/man.png';
 
 import useAuth from '../Auth/useAuth';
 import { Outlet, useNavigate} from "react-router-dom";
-// import { MenuMovil } from '../Components/MenuMovil';
 import { MenuMovil } from '../Components/Navigation/MenuMovil';
 import Footer from "../Components/Footer";
-
-
-const drawerWidth = 240;
-
-const AppBar = styled(MuiAppBar, {
-    shouldForwardProp: (prop) => prop !== 'open',
-})(({ theme, open }) => ({
-    zIndex: theme.zIndex.drawer + 1,
-    transition: theme.transitions.create(['width', 'margin'], {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen,
-    }),
-    ...(open && {
-        marginLeft: drawerWidth,
-        width: `calc(100% - ${drawerWidth}px)`,
-        transition: theme.transitions.create(['width', 'margin'], {
-            easing: theme.transitions.easing.sharp,
-            duration: theme.transitions.duration.enteringScreen,
-        }),
-    }),
-}));
-
-const useCheckMobileScreen = () => {
-    const [width, setWidth] = useState(window.innerWidth);
-    const handleWindowSizeChange = () => {
-        let size = window.innerWidth;
-        setWidth(size);
-    }
-
-    useEffect(() => {
-        window.addEventListener('resize', handleWindowSizeChange);
-        return () => {
-            window.removeEventListener('resize', handleWindowSizeChange);
-            document.getElementById("mySidebar").style.display = "block";
-        }
-    }, []);
-
-    let isMobile = width <= 1000
-
-    return (isMobile);
-}
-
-const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
-    ({ theme, open }) => ({
-        '& .MuiDrawer-paper': {
-            position: 'relative',
-            whiteSpace: 'nowrap',
-            width: drawerWidth,
-            transition: theme.transitions.create('width', {
-                easing: theme.transitions.easing.sharp,
-                duration: theme.transitions.duration.enteringScreen,
-            }),
-            boxSizing: 'border-box',
-            ...(!open && {
-                overflowX: 'hidden',
-                transition: theme.transitions.create('width', {
-                    easing: theme.transitions.easing.sharp,
-                    duration: theme.transitions.duration.leavingScreen,
-                }),
-                width: theme.spacing(7),
-                [theme.breakpoints.up('sm')]: {
-                    width: theme.spacing(9),
-                },
-            }),
-        },
-    }),
-);
+import { Drawer, AppBar } from "../Components/Navigation/AppBar"
 
 const mdTheme = createTheme();
 
 function DashboardContent() {
 
     const [open, setOpen] = React.useState(false);
-    const elRef = useRef();
-
+    const isMovil = Size('(min-width:770px)');
 
     const toggleDrawer = () => setOpen(!open);
     const auth = useAuth();
     const navigate = useNavigate()
 
     const [anchorEl, setAnchorEl] = React.useState(null);
-
     const open_profile = Boolean(anchorEl);
     const handleClick = (event) => setAnchorEl(event.currentTarget);
     const handleClose = () => setAnchorEl(null)
 
     const [anchorElMovil, setAnchorElMov] = React.useState(false);
 
-    const handleCloseMov = () => {
-        setAnchorElMov(null);
-    };
-
     const MenuResponsive = ()  => {
-        if(!anchorElMovil){
-            // document.getElementsByTagName("MuiToolbar-root ").style.display = "none";
-        }
         setAnchorElMov(!anchorElMovil);
     } 
 
@@ -128,39 +50,27 @@ function DashboardContent() {
 
     return (
         <ThemeProvider theme={mdTheme}>
-
             <MenuMovil anchor={anchorElMovil}/>
-
-
             <Box sx={{ display: 'flex' }}>
                 <CssBaseline/>
-                <AppBar style={{ backgroundColor : '#fff', boxShadow : 'None' }} position="absolute" open={useCheckMobileScreen() ? false : open}>
-
+                <AppBar style={{ backgroundColor : '#fff', boxShadow : 'None' }} position="absolute" open={ !isMovil ? open : false}>
                     <Toolbar sx={{ pr: '24px' ,  borderBottom : "1px solid #ec5e69"}} >
-
-                        <div ref={elRef}>
-
-                            <IconButton 
-                                edge="start" 
-                                color="inherit" 
-                                aria-label="open drawer" 
-                                onClick={ useCheckMobileScreen() ? MenuResponsive : toggleDrawer } 
-                                sx={{ marginRight: '36px', ...( !useCheckMobileScreen() && open && { display: 'none' }), }} >
-                                <MenuIcon  style={{
-                                    background: '#ec5e69',
-                                    fontSize: "40",
-                                    color: "#fff"
-                                }}/>
-                            </IconButton>
-
-
-
-
-                        </div>
-
+                        {/* boton para activar navegacion */}
+                        <IconButton 
+                            edge="start" 
+                            color="inherit" 
+                            aria-label="open drawer" 
+                            onClick={ !isMovil ? MenuResponsive : toggleDrawer } 
+                            sx={{ marginRight: '36px', ...( !isMovil && open && { display: 'none' }), }} >
+                            <MenuIcon  style={{
+                                background: '#ec5e69',
+                                fontSize: "40",
+                                color: "#fff"
+                            }}/>
+                        </IconButton>
                         <Typography component="h1" variant="h6" color="inherit" noWrap sx={{ flexGrow: 1 }} >
                             {
-                            !useCheckMobileScreen() && open ? (
+                            !isMovil && open ? (
                                 <React.Fragment>
 
                                     <IconButton onClick={toggleDrawer}>

src/Components/Navigation/AppBar.js

@@ -0,0 +1,48 @@
+
+import { styled } from '@mui/material/styles';
+import { AppBar as MuiAppBar, Drawer  as MuiDrawer } from '@mui/material'
+
+const drawerWidth = 240;
+
+export const AppBar = styled(MuiAppBar, {
+    shouldForwardProp: (prop) => prop !== 'open', })(({ theme, open }) => ({
+    zIndex: theme.zIndex.drawer + 1,
+    transition: theme.transitions.create(['width', 'margin'], {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen,
+    }),
+    ...(open && {
+        marginLeft: drawerWidth,
+        width: `calc(100% - ${drawerWidth}px)`,
+        transition: theme.transitions.create(['width', 'margin'], {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.enteringScreen,
+        }),
+    }),
+}));
+
+export const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
+    ({ theme, open }) => ({
+        '& .MuiDrawer-paper': {
+            position: 'relative',
+            whiteSpace: 'nowrap',
+            width: drawerWidth,
+            transition: theme.transitions.create('width', {
+                easing: theme.transitions.easing.sharp,
+                duration: theme.transitions.duration.enteringScreen,
+            }),
+            boxSizing: 'border-box',
+            ...(!open && {
+                overflowX: 'hidden',
+                transition: theme.transitions.create('width', {
+                    easing: theme.transitions.easing.sharp,
+                    duration: theme.transitions.duration.leavingScreen,
+                }),
+                width: theme.spacing(7),
+                [theme.breakpoints.up('sm')]: {
+                    width: theme.spacing(9),
+                },
+            }),
+        },
+    }),
+);