Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Help with layout configuration: header clipped with temporay sidebar #1208

Open
gremo opened this issue Dec 31, 2022 · 0 comments
Open

Help with layout configuration: header clipped with temporay sidebar #1208

gremo opened this issue Dec 31, 2022 · 0 comments

Comments

@gremo
Copy link

gremo commented Dec 31, 2022

As you can see from my scheme, the header is clipped (above sidebar) starting from lg breakpoint:

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

export const layout: Scheme = {
  header: {
    config: {
      xs: { position: 'fixed', height: 56, clipped: false },
      lg: { position: 'fixed', height: 64, clipped: true }, // starting from here, header is clipped
    },
  },

  // Header clip is fine for the leftEdgeSidebar because it's permanent on lg
  leftEdgeSidebar: {
    autoCollapse: 'lg',
    config: {
      xs: { variant: 'temporary', width: 256 },
      lg: {
        variant: 'permanent',
        width: 256,
        collapsible: true,
        collapsedWidth: 64,
        headerMagnetEnabled: true
      }
    },
  },

  // Header clip is not fine because rightEdgeSidebar is still temporary on lg (it's ok from xl and up)
  rightEdgeSidebar: {
    config: {
      xs: { variant: 'temporary', width: 256 },
      xl: { variant: 'permanent', width: 256 },
    }
  },
};

For leftEdgeSidebar this is fine: at lg breakpoint header is clipped but sidebar is permanent.

This configuration however won't work fine for rightEdgeSidebar: there is a "gap" between lg and xl when header is clipped and rightEdgeSidebar is still temporary.

  • Below lg (included):

image

  • Between lg (included) and xl (excluded):

image

  • Above xl (included):

image

Any idea how to solve this, aside from lowering the breakpoint from xl to lg for rightEdgeSidebar?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant