Allow Toggleable Layout to be visible by default

[its-ratikant]

Hi,

Can you please give me some hints on how to show or hide toggleable layout nav programmatically or by default open mode?

Thanks!!

[mlaursen]

Whoops... I think I'll need to add some more props to the layout to make this easier to work with in the future as well as some more Layout examples. However, you can implement this somewhat for now by using the useLayoutConfig hook in a child component of the Layout.

The only downside to this approach is that if the user resizes from a non-toggleable layout to the toggleable layout, it will still animate in since the it is temporarily set to hidden.

Here's a quick codesandbox for it and below is the code that handles the visibility:

const { showNav, visible, layout } = useLayoutConfig();

const firstRender = useRef(true);
const prevLayout = useRef(layout);
if (firstRender.current || layout !== prevLayout.current) {
  // if it's the first render OR the layout has changed, need to see if the
  // current layout is toggleable and make sure that it is visible
  prevLayout.current = layout;
  firstRender.current = false;
  if (!visible && isToggleableLayout(layout)) {
    showNav();
  }
}

[mlaursen]

I think I'll add a new prop: defaultToggleableVisible to help with this. If it is set to true, the toggleable layout will start as visible instead of hidden.

[its-ratikant]

Perfect! Thanks a lot!