text: import { useEffect } from "react";
  
  // react-router-dom components
  import { useLocation } from "react-router-dom";
  
  // prop-types is a library for typechecking of props.
  import PropTypes from "prop-types";
  
  // Soft UI Dashboard PRO React components
  import SuiBox from "../../SuiBox";
  
  // Soft UI Dashboard PRO React context
  import { useNavController, setLayout } from "../../../context/NavContext";
  
  function DashboardLayout({ children }) {
    const [controller, dispatch] = useNavController();
    const { miniSidenav } = controller;
    const { pathname } = useLocation();
  
    useEffect(() => {
      setLayout(dispatch, "dashboard");
    }, [pathname]);
  
    return (
      <SuiBox
        sx={({ breakpoints, transitions, functions: { pxToRem } }) => ({
          p: 3,
          position: "relative",
  
          [breakpoints.up("xl")]: {
            marginLeft: miniSidenav ? pxToRem(120) : pxToRem(274),
            transition: transitions.create(["margin-left", "margin-right"], {
              easing: transitions.easing.easeInOut,
              duration: transitions.duration.standard,
            }),
          },
        })}
      >
        {children}
      </SuiBox>
    );
  }
  
  // Typechecking props for the DashboardLayout
  DashboardLayout.propTypes = {
    children: PropTypes.node.isRequired,
  };
  
  export default DashboardLayout;
  