Squeeze main content when sidebar is toggled

[archiif]

Instead of overlaying the menu over the main content, is there a way to have it so that the width of the main content gets squeezed accordingly as the sidebar unfolds?

Something like this:

Push is pretty close, but unfortunately that simply pushes the content which can potentially send it partially offscreen. Scale is also close, but it resizes both the width and height. Also, it seems that the main content's alignment with the sidebar isn't particularly exact (unlike Push).

Any help would be appreciated.

[archiif]

Came up with this for now:

import menuFactory from '../node_modules/react-burger-menu/lib/menuFactory';

const styles = {
  pageWrap(isOpen, width, right) {
    return {
      [`margin-${right ? "right" : "left"}`]: isOpen ? '' : width,
      transition: 'all 0.5s'
    }
  },

  outerContainer(isOpen) {
    return {
      overflow: isOpen ? '' : 'hidden'
    };
  }
};

export const squeeze = menuFactory(styles)

It would be nice to see this API exposed in a cleaner fashion, they really help improve customizability.

[Lokeshkhati]

Hey @archiif, I would love to contribute to it,

would you mind to assign it to me?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.