EuiNavDrawer isLocked prop does not shift main content to the right

[nandorojo]

What

When you pass isLocked to the EuiNavDrawer, you expect the drawer to be stuck and expanded, as explained by this PR and on this forum post.

When expanded, the nav drawer should shift the main page content to the right, rather than having the nav drawer overlay the page content.

However, the content does not shift over. Instead, the nav drawer is fixed on top of the page.

Expected Behavior

It should look like this:

Actual Behavior

It actually looks this:

Reproducible Example

• Open this repository's example on Code Sandbox
• Open src/components/chrome/index.tsx and pass isLocked prop to the EuiNavDrawer

Thanks for the great work on this. Looking forward to hearing back from you!

[cchaos]

Hi @nandorojo!

The EuiNavDrawer by design does not automatically shift content based on the isLocked status. This must be handled by the consuming application, you can see how this is handled in the docs example by looking at the .euiNavDrawerPage__pageBody selector.

However, we will soon be deprecating EuiNavDrawer for EuiCollapsibleNav which will help with automatically shifting body content based on locked state.

---

Note: This repo is specifically for the Next-JS starter and not where we actually develop EUI. If you need to submit more component-specific issues, I'd recommend doing so in https://github.com/elastic/eui

[pugnascotia]

Thanks @cchaos. So technically there's nothing to fix for this issue, however I'll leave it open until I've updated the starter to use EuiCollapsibleNav.

[nandorojo]

Got it, thank you both for the help! I’ll try out EuiCollapsibleNav instead.

Big fan of your work, thanks for an awesome library.

[pugnascotia]

So it turns out EuiCollapsibleNav needs updating to work with SSR first. Hey ho.

[nandorojo]

I can close this for now and just lazy-load in EuiCollapsibleNav. Thanks again.