Feature

Header Magnet

This feature works with these conditions

  • Header is clipped with relative position & EdgeSidebar is permanent or persistent
  • Header has relative position & InsetSidebar is fixed

This is what happens if headerMagnet is not enabled (it is not enabled by default)

gif

As you can see, when you scroll down there are spaces left in the top of both sidebars.

by enabling header magnet feature, both sidebars will stick to the Header once user stop scrolling (for performance)

scheme.configureHeader((builder) => {
  builder
    .registerConfig("md", {
      position: "relative", // won't stick to top when scroll down
      clipped: true,
    });
});

scheme.configureEdgeSidebar(builder => {
  builder
    .create('primarySidebar', { anchor: 'left' })
    .registerPermanentConfig('md', {
      width: 256,
      collapsible: true,
      collapsedWidth: 64,
      headerMagnetEnabled: true,
    });
});

scheme.configureInsetSidebar(builder => {
  builder
    .create('insetSidebar', { anchor: 'right' })
    .registerFixedConfig('md', {
      width: 256,
      headerMagnetEnabled: true,
    });
});

Here is the result,

gif