Eui: Interoperability of `EuiBottomBar` and `EuiNavDrawer`

[sqren]

APM has started using EuiBottomBar and we’re running into an issue where it overlays on top of EuiNavDrawer.

Talking to @cchaos I can see why it happens (not every consumer of EuiBottomBar also uses EuiNavDrawer so EUI can’t simply offset by default).

Currently, the only way for us to fix this is by hardcoding margin-left: 48px; z-index: 9;. This doesn’t seem great because if EuiNavDrawer ever changes width this will break.

Would it be possible to have a prop to indicate that the consumer is using EuiNavDrawer - like <EuiBottomBar hasNavDrawer={true} />

[cchaos]

@sqren Yeah, I know that it's hard to utilize the bottom bar in the current Kibana implementation alongside EuiNavDrawer.

The main issue with trying to manage this from the EUI side, is that there are actually multiple sizes of the EuiNavDrawer depending on it's state. So consuming applications will still need to know the collapsed and locked state of their nav drawer. Your screenshot is showing the "locked open" state, which is are far more than 48px.

This is why I've advocated that the consuming applications (Kibana) creates a global service like the Toast and Modal services that can then control the placement and extra margins when necessary in one place.

[seeruk]

Another one that doesn't quite work is an EuiPage with restrictWidth set to true. It shrinks the page even if there's plenty of room either side of the page for the menu. Ideally it'd just re-centralise the EuiPage in the leftover space and as you get to a small enough size for the EuiPage to touch the nav drawer, that'd be the ideal time for the EuiPage to start shrinking in size.

[cchaos]

@seeruk Sounds unrelated to either EuiBottomBar or EuiNavDrawer. Maybe you could open another ticket with a screenshot for guidance?

[cchaos]

This component is being deprecated in favor of EuiCollapsibleNav

[sqren]

@cchaos Is EuiCollapsibleNav a direct replacement for EuiBottomBar?

Won't this make the screen jump when the user edits a field, since it will make the "You have unsaved changes" mode kick in? That seems a bit disruptive.

[cchaos]

I'm not quite following your second question. But EuiCollapsibleNav is replacing EuiNavDrawer not EuiBottomBar. EuiCollapsibleNav doesn't have the same icon only, skinny, version. It always sits on top of all the content like a normal flyout when it is open. On the Kibana side, the CoreUI team has implemented a global style to shrink the width of the EuiBottomBar if the user has docked the EuiCollapsibleNav (man navigation).

[sqren]

Ah, sorry. I get it now. When you said "This component is being deprecated in favor of EuiCollapsibleNav" I thought you meant it was replacing EuiBottomBar. Replacing EuiNavDrawer makes a lot more sense 👍