front/src/pages/Layout/MainLayout.tsx

import { Box, SxProps, useMediaQuery, useTheme } from "@mui/material";
import { FC, useState } from "react";
import { Outlet } from "react-router-dom";
import MainDrawer from "../../components/Drawer/MainDrawer";
import MainAppBar from "../../components/AppBar/MainAppBar";


const drawerWidth = 260;

const MainLayout: FC = () => {

    const theme = useTheme();
    const isSmUp = useMediaQuery(theme.breakpoints.up('md'));
    const isSxUp = useMediaQuery(theme.breakpoints.up('sm'));

    const [mobileOpen, setMobileOpen] = useState(false);

    const rootStyles: SxProps = {
        display: 'flex',
        height: '100vh',
    };
    const navStyles: SxProps = {
        width: "100vw",
        position: "fixed",
        bottom: "0",
        display:"flex",
        flexDirection:"row-reverse",
        pb: isSxUp ? 3: 2,
        pr: isSxUp ? 2 : 0
    };

    const mainStyles: SxProps = {
        flex: 1,
        display: 'flex',
        flexDirection: 'column',
        //bgcolor: '#f3f3f3'
    };
    const containerStyles: SxProps = {
        p: 0,
        flex: 1,
    };

    const handleDrawerToggle = () => {
        setMobileOpen(!mobileOpen);
    };

    return (

        <Box sx={rootStyles}>
            <Box sx={mainStyles}>
                <MainAppBar onMobile={mobileOpen} />
                <Box sx={containerStyles}>
                    <Outlet />
                </Box>
            </Box>
            <Box sx={navStyles}>
                <MainDrawer variant="permanent"/>
            </Box>
        </Box>
    );
}

export default MainLayout;