min-widht height and appbar visble

psicoadmin/src/App.css

@@ -123,3 +123,8 @@
     padding : 15px;
     margin: 0px;
 }
+.content-section{
+    min-height:100vh !important;
+}
+
+

psicoadmin/src/Components/AppBar.js

@@ -0,0 +1,193 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { styled, createTheme, ThemeProvider } from '@mui/material/styles';
+import useAuth from '../Auth/useAuth';
+import { Outlet, useNavigate} from "react-router-dom";
+
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import MenuIcon from '@mui/icons-material/Menu';
+import Menu from '@mui/material/Menu';
+// import Container from '@mui/material/Container';
+import Badge from '@mui/material/Badge';
+import Avatar from '@mui/material/Avatar';
+import FullscreenIcon from '@mui/icons-material/Fullscreen';
+
+import MenuItem from '@mui/material/MenuItem';
+import MailIcon from '@mui/icons-material/Mail';
+import ProfilePicture from '../Images/man.png';
+import MuiAppBar from '@mui/material/AppBar';
+import NotificationsIcon from '@mui/icons-material/Notifications';
+import Toolbar from '@mui/material/Toolbar';
+import Box from '@mui/material/Box';
+
+const drawerWidth = 240;
+
+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);
+        }
+    }, []);
+
+    let isMobile = width <= 1000
+
+    return (isMobile);
+}
+
+const AppBar = styled(MuiAppBar, {
+    shouldForwardProp: (prop) => prop !== 'open',
+})(({ theme, open }) => ({
+    transition: theme.transitions.create(['margin', 'width'], {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen,
+    }),
+    ...(open && {
+        width: `calc(100% - ${drawerWidth}px)`,
+        marginLeft: `${drawerWidth}px`,
+        transition: theme.transitions.create(['margin', 'width'], {
+            easing: theme.transitions.easing.easeOut,
+            duration: theme.transitions.duration.enteringScreen,
+        }),
+    }),
+}));
+
+export default function AppBarComponent (){
+
+    const [open, setOpen] = React.useState(true);
+    const elRef = useRef();
+
+
+    const auth = useAuth();
+    const navigate = useNavigate()
+    const [anchorEl, setAnchorEl] = React.useState(null);
+
+    const [anchorElMovil, setAnchorElMov] = React.useState(null);
+
+    const toggleDrawer = () => setOpen(!open);
+    const open_profile = Boolean(anchorEl);
+    const handleClick = (event) => setAnchorEl(event.currentTarget);
+    const handleClose = () => setAnchorEl(null)
+    const openMov = Boolean(anchorElMovil);
+    const handleCloseMov = () => {
+        setAnchorElMov(null);
+    };
+
+    const MenuResponsive = ()  => {
+        setAnchorElMov(elRef.current);
+    } 
+
+    const CerrarSession = () => {
+        console.log('cerrando session')
+        // auth.logout();
+        // navigate('/')
+    } 
+
+    return(
+        <AppBar 
+            style={{ backgroundColor : '#fff', boxShadow : 'None' }} 
+            position="fixed" 
+            open={useCheckMobileScreen() ? false : open} >
+
+            <Toolbar sx={{ 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>
+
+                    <Menu
+                        id="basic-menu"
+                        anchorEl={anchorElMovil}
+                        open={openMov}
+                        onClose={handleCloseMov}
+                        MenuListProps={{
+                            'aria-labelledby': 'basic-button',
+                        }}>
+                        <MenuItem onClick={ () => navigate('/perfil') }>Perfil</MenuItem>
+                        <MenuItem onClick={handleCloseMov}>My account</MenuItem>
+                        <MenuItem onClick={handleCloseMov}>Logout</MenuItem>
+                    </Menu>
+
+                </div>
+
+                <Typography component="h1" variant="h6" color="inherit" noWrap sx={{ flexGrow: 1 }} >
+                    {
+                        !useCheckMobileScreen() && open ? (
+                            <React.Fragment>
+
+                                <IconButton onClick={toggleDrawer}>
+                                    <MenuIcon />
+                                </IconButton>
+
+                                <IconButton onClick={ (event) =>  event.target.requestFullscreen() }>
+                                    <FullscreenIcon style={{ paddinLeft : 15 }}/>
+                                </IconButton>
+
+
+                            </React.Fragment>
+                        ) : undefined
+                    }
+                </Typography>
+
+
+                <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
+                    <IconButton size="large" aria-label="show 4 new mails" color="inherit">
+                        <Badge badgeContent={4} color="error">
+                            <MailIcon style={{ color : '#212529' }} />
+                        </Badge>
+                    </IconButton>
+                    <IconButton
+                        size="large"
+                        aria-label="show 17 new notifications"
+                        color="inherit">
+                        <Badge badgeContent={17} color="error">
+                            <NotificationsIcon style={{ color : '#212529' }}/>
+                        </Badge>
+                    </IconButton>
+
+
+                    <IconButton
+                        size="small"
+                        edge="end"
+                        aria-label="account of current user"
+                        aria-haspopup="true"
+                        aria-expanded={open_profile ? 'true' : undefined}
+                        onClick={handleClick}
+                        color="inherit"
+                    >
+                        <Avatar alt="Cindy Baker" src={ProfilePicture} />
+
+                    </IconButton>
+                    <Menu
+                        id="basic-menu"
+                        anchorEl={anchorEl}
+                        open={open_profile}
+                        onClose={handleClose}
+                        MenuListProps={{ 'aria-labelledby': 'basic-button', }}>
+                        <MenuItem onClick={() => navigate('perfil') }>Profile</MenuItem>
+                        <MenuItem onClick={() => console.log('opcion 2')}>My account</MenuItem>
+                        <MenuItem onClick={CerrarSession}>Logout</MenuItem>
+                    </Menu>
+
+                </Box>
+
+            </Toolbar>
+        </AppBar>
+    )
+}

psicoadmin/src/Components/Dashboard.js

@@ -250,7 +250,7 @@ function DashboardContent() {
                     </Toolbar>
                     <Divider />
                     <List>
-                        <MainListItems/>
+                        <MainListItems AppBarVisible={open} />
                     </List>
                     <Divider />
                     <List>

psicoadmin/src/Components/listItems.js

@@ -68,7 +68,7 @@ function Item (props) {
 
     function change (event){
         props.change(event, props.index)
-        console.log('is logged', auth.isLogged())
+        // console.log('is logged', auth.isLogged())
 
         if(!auth.isLogged()){
             return navigate('/')
@@ -104,9 +104,10 @@ function Item (props) {
 }
 
 
-export const MainListItems = () =>  {
+export const MainListItems = (props) =>  {
 
     const [selectedIndex, setSelectedIndex] = React.useState(0);
+    let SubMenuIndex = [5,6,7,8,9] 
 
 
     const handleListItemClick = (event, index) => {
@@ -116,10 +117,23 @@ export const MainListItems = () =>  {
     const [open, setOpen] = React.useState(false);
 
     const showPruebas = () => {
-        handleListItemClick(-1)
-        setOpen(!open);
+        console.log(props ,open,  selectedIndex   )
+        if(props.AppBarVisible){
+            // handleListItemClick(-1)
+            setOpen(!open);
+        }
     };
 
+    React.useEffect(() => {
+        if(!props.AppBarVisible && open){
+            setOpen(false)
+        }else{
+            if( SubMenuIndex.includes(selectedIndex)  ){
+                setOpen(true)
+            }
+        }
+    },[props,  selectedIndex])
+
 
     return(
         <List>
@@ -131,8 +145,8 @@ export const MainListItems = () =>  {
             <Item icon={<EqualizerIcon/>} selected={selectedIndex}  change={handleListItemClick} index={4} title="Resultados" route="resultados" />
             {/* <Item icon={<FingerprintIcon/>} selected={selectedIndex}  change={handleListItemClick} index={5} title="Pruebas" route="/pruebas" /> */}
 
-
-            <ListItem  onClick={showPruebas}>
+           <ListItem selected={  SubMenuIndex.includes(selectedIndex) && !props.AppBarVisible} onClick={showPruebas}>
+           {/* <ListItem selected={  SubMenuIndex.includes(selectedIndex)j } onClick={showPruebas}> */}
                 <ListItemIcon>
                     <FingerprintIcon />
                 </ListItemIcon>

psicoadmin/src/Pages/Contras.js

@@ -1,5 +1,9 @@
 export function Contras() {
     return (
-        <h1>Passwords</h1>
+        <div className="content-section">
+            <div className="main">
+                <h1>Passwords</h1>
+            </div>
+        </div>
     )
 }

psicoadmin/src/Pages/Expedientes.js

@@ -1,5 +1,9 @@
 export function Expedientes() {
     return (
-        <h1>Expedientes</h1>
+        <div className="content-section">
+            <div className="main">
+                <h1>Expedientes</h1>
+            </div>
+        </div>
     )
 }

psicoadmin/src/Pages/Resultados.js

@@ -1,5 +1,9 @@
 export function Resultados() {
     return (
-        <h1>Resultados</h1>
+        <div className="content-section">
+            <div className="main">
+                <h1>Resultados</h1>
+            </div>
+        </div>
     )
 }