Clipped header overlays content of the nav

[christianfuerst]

I'am not quite sure if this behaviour is a bug or works as designed:
Using the clipped setting in my config for a full width header.

On navVariant persistent and permanent the header overlays the content of the navigation component. I was expecting, that the content of the navigation will start below the clipped header.

Thanks and best regards!

[siriwatknp]

@christianfuerst Can you provide me the config or link to CodeSandbox?

Have u check this demo? choose preset fixed
https://codesandbox.io/s/material-ui-layout-v129-7mn9xq3nnj

[christianfuerst]

The present standard in the demo works for me - the header is going full width on all sizes and the content in the navigation is rendered correctly.

I've created this config with your layout-builder, adding the "Clipped" option for the header.

const config = {
  "navAnchor": "left",
  "navVariant": {
    "xs": "temporary",
    "sm": "persistent",
    "md": "permanent"
  },
  "navWidth": {
    "xs": 240,
    "sm": 256,
    "md": 256
  },
  "collapsible": {
    "xs": false,
    "sm": false,
    "md": true
  },
  "collapsedWidth": {
    "xs": 64,
    "sm": 64,
    "md": 64
  },
  "clipped": {
    "xs": true,
    "sm": true,
    "md": true
  },
  "headerPosition": {
    "xs": "relative",
    "sm": "relative",
    "md": "relative"
  },
  "squeezed": {
    "xs": false,
    "sm": false,
    "md": false
  },
  "footerShrink": {
    "xs": false,
    "sm": false,
    "md": false
  }
};

When using this config - the upper part of the navigation content is overlapped with the header.