Overlay does not appear in mobile breakpoint other than with a preset config

[webface]

The mobile breakpoint is squashed instead of having an overlay when I use a custom config from the site

  import React from 'react';
  import CssBaseline from '@material-ui/core/CssBaseline';
  import Toolbar from '@material-ui/core/Toolbar';
  import IconButton from "@material-ui/core/IconButton";
  import {
    Root,
    Header,
    Sidebar,
    CollapseBtn,
    CollapseIcon,
    SidebarTrigger,
    SidebarTriggerIcon,
    Content,
    Footer,
    useSidebarStyles,
  } from '@mui-treasury/layout';
  import {
    HeaderMockUp,
    NavHeaderMockUp,
    NavContentMockUp,
    ContentMockUp,
    FooterMockUp,
  } from '@mui-treasury/mockup/layout';
  import { createMuiTheme } from '@material-ui/core/styles';
  const customTheme = createMuiTheme({
    palette: { primary: { main: '#ff5252' } },
  });

  const config = {
    heightAdjustmentDisabled: true,
    sidebar: {
      anchor: 'left',
      width: 256,
      variant: 'permanent',
      collapsible: true,
      collapsedWidth: 64,
    },
    header: {
      position: "fixed",
      offsetHeight: 64,
    },
    content: {
      persistentBehavior: "fit"
    },
    footer: {
      persistentBehavior: "fit"
    }
  };

  const App = () => {

    return (
      <Root theme={customTheme} config={config}>
      {({ sidebarStyles,headerStyles, collapsed, opened }) => (
        <>
         <CssBaseline />
          <Header>
            <Toolbar>
              <CollapseBtn
                component={IconButton}
                className={headerStyles.leftTrigger}
              >
                <CollapseIcon />
              </CollapseBtn>
              <SidebarTrigger className={headerStyles.leftTrigger}>
                <SidebarTriggerIcon />
              </SidebarTrigger>
            <HeaderMockUp/>
          </Toolbar>
          </Header>
          <Sidebar>
            <div className={sidebarStyles.container}>
              <NavHeaderMockUp />
              <NavContentMockUp />
            </div>
            <CollapseBtn className={sidebarStyles.collapseBtn}>
              <CollapseIcon />
            </CollapseBtn>
          </Sidebar>
          <Content>
            <ContentMockUp />
          </Content>
          <Footer>
            <FooterMockUp />
          </Footer>
        </>
      )}
    </Root>
    )
  }

  export default App

Expected Result: There should be an overlay over the content and nav coming from the sidenav when it is open

[webface]

It works when I set a variant:"temporary" however I want the menu to be permanent and expanded on other breakpoints.

[siriwatknp]

Is this what you mean? mobile: temporary tablet(up): permanent

[webface]

yes exactly what I need @siriwatknp

[webface]

When i use the config from the builder it works. @siriwatknp Is the builder config still valid for v3?

  const config = {
    "autoCollapseDisabled": false,
    "collapsedBreakpoint": "sm",
    "heightAdjustmentDisabled": false,
    "xs": {
      "sidebar": {
        "anchor": "left",
        "hidden": false,
        "inset": false,
        "variant": "temporary",
        "width": 240,
        "collapsible": true,
        "collapsedWidth": 64
      },
      "header": {
        "position": "fixed",
        "clipped": false,
        "offsetHeight": 56,
        "persistentBehavior": "fit"
      },
      "content": {
        "persistentBehavior": "fit"
      },
      "footer": {
        "persistentBehavior": "fit"
      }
    },
    "sm": {
      "sidebar": {
        "anchor": "left",
        "hidden": false,
        "inset": false,
        "variant": "permanent",
        "width": 256,
        "collapsible": true,
        "collapsedWidth": 64
      },
      "header": {
        "position": "fixed",
        "clipped": false,
        "offsetHeight": 64,
        "persistentBehavior": "fit"
      },
      "content": {
        "persistentBehavior": "fit"
      },
      "footer": {
        "persistentBehavior": "fit"
      }
    },
    "md": {
      "sidebar": {
        "anchor": "left",
        "hidden": false,
        "inset": false,
        "variant": "permanent",
        "width": 256,
        "collapsible": true,
        "collapsedWidth": 64
      },
      "header": {
        "position": "fixed",
        "clipped": false,
        "offsetHeight": 64,
        "persistentBehavior": "fit"
      },
      "content": {
        "persistentBehavior": "fit"
      },
      "footer": {
        "persistentBehavior": "fit"
      }
    }
  };

[webface]

@siriwatknp this config doesnt seem to work with v3 to achieve breakpoints

how do i do this please? really like the library. I used v2 on a project but it had breakpoints

[siriwatknp]

@webface Please make sure that the version of @mui-treasury/layout is 3.3.4 and try this one.

Note: if it is too long for you, look at this sandbox. I think cozyPreset is pretty close to what you want. https://codesandbox.io/s/material-ui-layout-7mn9xq3nnj?file=/src/index.js

{
  "autoCollapseDisabled": false,
  "collapsedBreakpoint": "md",
  "secondaryAutoCollapseDisabled": false,
  "secondaryCollapseBreakpoint": "md",
  "heightAdjustmentDisabled": false,
  "insetHiddenBreakpoint": "sm",
  "insetHiddenDisabled": false,
  "secondaryInsetHiddenBreakpoint": "md",
  "secondaryInsetHiddenDisabled": false,
  "xs": {
    "sidebar": {
      "anchor": "left",
      "variant": "temporary",
      "width": 256,
      "collapsible": false,
      "collapsedWidth": 64,
      "hidden": false,
      "inset": false,
      "insetProps": {
        "position": "fixed",
        "top": 0,
        "drawerAnchor": "left"
      }
    },
    "secondarySidebar": {
      "anchor": "right",
      "variant": "persistent",
      "width": 244,
      "collapsible": true,
      "collapsedWidth": 64,
      "hidden": false,
      "inset": false,
      "insetProps": {
        "position": "sticky",
        "top": 0,
        "drawerAnchor": "right"
      }
    },
    "container": {
      "persistentBehavior": "fit",
      "secondaryPersistentBehavior": "none"
    },
    "content": {
      "persistentBehavior": "fit",
      "secondaryPersistentBehavior": "none"
    },
    "header": {
      "position": "fixed",
      "offsetHeight": 64,
      "clipped": false,
      "secondaryClipped": false,
      "persistentBehavior": "fit",
      "secondaryPersistentBehavior": "fit"
    },
    "footer": {
      "persistentBehavior": "fit",
      "secondaryPersistentBehavior": "none",
      "insetBehavior": "fit",
      "secondaryInsetBehavior": "none"
    }
  },
  "sm": {
    "sidebar": {
      "anchor": "left",
      "variant": "permanent",
      "width": 64,
      "collapsible": false,
      "collapsedWidth": 64,
      "hidden": false,
      "inset": false,
      "insetProps": {
        "position": "fixed",
        "top": 0,
        "drawerAnchor": "left"
      }
    },
    "secondarySidebar": {
      "anchor": "right",
      "variant": "persistent",
      "width": 244,
      "collapsible": true,
      "collapsedWidth": 64,
      "hidden": false,
      "inset": false,
      "insetProps": {
        "position": "sticky",
        "top": 0,
        "drawerAnchor": "right"
      }
    },
    "container": {
      "persistentBehavior": "fit",
      "secondaryPersistentBehavior": "none"
    },
    "content": {
      "persistentBehavior": "fit",
      "secondaryPersistentBehavior": "none"
    },
    "header": {
      "position": "fixed",
      "offsetHeight": 64,
      "clipped": false,
      "secondaryClipped": false,
      "persistentBehavior": "fit",
      "secondaryPersistentBehavior": "fit"
    },
    "footer": {
      "persistentBehavior": "fit",
      "secondaryPersistentBehavior": "none",
      "insetBehavior": "fit",
      "secondaryInsetBehavior": "none"
    }
  },
  "md": {
    "sidebar": {
      "anchor": "left",
      "variant": "permanent",
      "width": 256,
      "collapsible": true,
      "collapsedWidth": 64,
      "hidden": false,
      "inset": false,
      "insetProps": {
        "position": "fixed",
        "top": 0,
        "drawerAnchor": "left"
      }
    },
    "secondarySidebar": {
      "anchor": "right",
      "variant": "persistent",
      "width": 244,
      "collapsible": true,
      "collapsedWidth": 64,
      "hidden": false,
      "inset": false,
      "insetProps": {
        "position": "sticky",
        "top": 0,
        "drawerAnchor": "right"
      }
    },
    "container": {
      "persistentBehavior": "fit",
      "secondaryPersistentBehavior": "none"
    },
    "content": {
      "persistentBehavior": "fit",
      "secondaryPersistentBehavior": "none"
    },
    "header": {
      "position": "fixed",
      "offsetHeight": 64,
      "clipped": true,
      "secondaryClipped": false,
      "persistentBehavior": "fit",
      "secondaryPersistentBehavior": "fit"
    },
    "footer": {
      "persistentBehavior": "fit",
      "secondaryPersistentBehavior": "none",
      "insetBehavior": "fit",
      "secondaryInsetBehavior": "none"
    }
  }
} 

[siriwatknp]

By the way, v4 is published today. Not recommend to use in production right now, just want to give you a head's up. I will create comprehensive docs this time. Please let me know what docs you would like to see.

[siriwatknp]

@webface if that config does not work, please send some sandbox or github repo that I can reproduce.

[siriwatknp]

@webface does it solve your issue?

[webface]

@siriwatknp I decided to go with the cozy preset. Theres so much to do in the project that configuring this is taking too long. The example you sent uses 2 sidebars and while I would love to experiment with it, the component markup is not included :( I will specifically be working on this components again this weekend as I want to create the authflow.

Amazing job you did with this project.

Can I use the Layout Builder for v3?

[siriwatknp]

Yes you can, right now it is under v3.3.4 in sidebar navigation.

[webface]

I got it to work the way I want thanks. I was probably using the wrong builder