NavDrawer is too restrictive about its child element

[myasonik]

Summary

NavDrawer only allows a specific whitelist of children (not sure exactly what it is) primarily: < /> and NavDrawerGroup.

This makes it difficult to break up large navs because you can't wrap parts of it in a component even if that component returns a NavDrawerGroup.

One workaround is to call the component as a function instead of trying to render it as a component. Other than looking hacky and being difficult to debug, I'm not sure if there are any other React-related side effects to doing that.

Pseudo-example

Given a component:

function Group() { return <EuiNavDrawerGroup /> };

This works:

function Nav() {
	return <EuiNavDrawer>{Group()}</EuiNavDrawer>
}

While this does not:

function Nav() {
	return <EuiNavDrawer><Group /></EuiNavDrawer>
}

[chandlerprall]

The best way to better support this functionality will be to have EuiNavDrawer define a React context which gets consumed by EuiNavDrawerGroup. That's all the child-specific logic really cares about - passing two values to the drawer group.

[thompsongl]

Not that I need to tell @myasonik, but EuiCollapsibleNav is the recommended component and we've deprecated EuiNavDrawer.

Closing this as no new features will be considered