How to use @mui-treasury/layout - 8 common examples

CollapseBtn,
  CollapseIcon,
  SecondaryCollapseBtn,
  SecondaryCollapseIcon,
  Footer,
  Content,
  InsetContainer,
  ConfigGenerator,
} from '@mui-treasury/layout';
import Box from '@material-ui/core/Box';
import Container from '@material-ui/core/Container';
import Toolbar from '@material-ui/core/Toolbar';

import { ContentMockUp } from '@mui-treasury/mockup/layout';

const config = ConfigGenerator({ addOnsIncluded: true });
config.setPrimarySidebarToNonInset();
config.primarySidebar.setVariant('persistent');
config.primarySidebar.setCollapsible(true);
config.setSecondarySidebarToInset();
config.footer.setSecondaryInsetBehavior('none');

// config.primarySidebar.setVariant('persistent');
// config.primarySidebar.setCollapsible(true);
// config.primarySidebar.setCollapsedWidth(80);
// config.header.setPosition('fixed');
// config.header.setClipped(true);
// config.header.setSecondaryClipped(true);
// config.header.setPersistentBehavior('flexible');
// config.header.setSecondaryPersistentBehavior('flexible');
// config.content.setPersistentBehavior('flexible');
// config.content.setSecondaryPersistentBehavior('flexible');

InsetSidebar,
  Footer,
  Content,
  ConfigGenerator,
} from '@mui-treasury/layout';
import Container from '@material-ui/core/Container';
import CssBaseline from '@material-ui/core/CssBaseline';
import Toolbar from '@material-ui/core/Toolbar';
import {
  ContentMockUp,
  FooterMockUp,
  HeaderMockUp,
  NavContentMockUp,
} from '@mui-treasury/mockup/layout';

const config = ConfigGenerator();
config.setPrimarySidebarToInset();
config.debug({ addOnsIncluded: true });

const InsetSidebarDemo = () => {
  return (
    
      {({ headerStyles, containerStyles }) => (
        <>
          
          <header>
            
              
                
                  
                
                </header>

HeaderMockUp,
  ContentMockUp,
  FooterMockUp,
} from '@mui-treasury/mockup/layout';
import { RoundIconSidebar } from '@mui-treasury/mockup/sidebars';

const useStyles = makeStyles(() => ({
  header: {
    backgroundColor: '#fff',
  },
  sidebar: {
    backgroundColor: '#36338E',
  },
}));

const config = ConfigGenerator();
config.primarySidebar
  .setCollapsible(false)
  .setVariant('persistent')
  .setWidth(84);
config.header.unclipPrimary();

const ControlSidebarDemo = () => {
  const styles = useStyles();
  return (
    
      {({ headerStyles, sidebarStyles, setOpened }) => (
        <>
          
          <header>
            
              </header>

const SidebarLayout = ({ totalItems, pkg, children, getOpenKeys }) => {
  const menus = MENUS[PKG[pkg]];
  const styles = useStyles();
  const headerStyles = useHeaderStyles();
  const sidebarStyles = useSidebarStyles();
  const footerStyles = useFooterStyles();
  return (
    <>
      
        
          
            
          
          <header>
        
      
      
        <div>
          </div></header>

const index = () => {
  const [preset, setPreset] = useState("createStandardLayout");
  const [data, setData] = useState({
    header: true,
    nav: true,
    content: true,
    footer: true
  });
  const sidebarStyles = useSidebarStyles();
  const headerStyles = useHeaderStyles();
  return (
    
      <header>
        
          
            
          
          
            
          
          {data.header &amp;&amp; }
        
      </header>

const index = () => {
  const [preset, setPreset] = useState("createStandardLayout");
  const [data, setData] = useState({
    header: true,
    nav: true,
    content: true,
    footer: true
  });
  const sidebarStyles = useSidebarStyles();
  const headerStyles = useHeaderStyles();
  return (
    
      <header>
        
          
            
          
          
            
          
          {data.header &amp;&amp; }
        </header>

const SidebarLayout = ({ totalItems, pkg, children, getOpenKeys }) => {
  const menus = MENUS[PKG[pkg]];
  const styles = useStyles();
  const headerStyles = useHeaderStyles();
  const sidebarStyles = useSidebarStyles();
  const footerStyles = useFooterStyles();
  return (
    <>
      
        
          
            
          
          <header>
        
      
      
        <div>
          </div></header>

const PageHeader = () => {
  const data = useStaticQuery(graphql`
    query HeaderQuery {
      logo: file(absolutePath: { regex: "/logo.png/" }) {
        childImageSharp {
          fixed(width: 48, height: 48) {
            ...GatsbyImageSharpFixed
          }
        }
      }
    }
  `);
  const { logo } = data;
  const styles = useStyles();
  const screen = useScreen();
  return (
    
      {({ location }) => {
        const shouldRenderLogo =
          screen !== 'xs' || (screen === 'xs' && location.pathname === '/');
        return (
          
            {shouldRenderLogo && (