Toggle the nav drawer flyout menu when clicking/touching the same icon

[ryankeairns]

As a user, I expect the flyout menu to close if I touch/click the icon that originally opened it. For example, I click the 'Recently viewed' items icon, flyout menu opens; I click it again and it closes.

This was working on desktop sizes, but the mobile nav button in the header was a little unpredictable. There is some conflicting logic in here with regards to when the OutsideClickDetector is being enabled and disabled.

This issue could likely be addressed with #1712

[cchaos]

The default behavior is back in, but needs tweaking for the mobile side.

[seeruk]

I've sort of worked around this issue in a semi-hacky way right now. It might be less hacky if EuiOutsideDetector's API were extended to allow you to ignore other elements somehow.

What I've done is wrapped the EuiNavDrawer in my own EuiOutsideClickDetector. In it's onOutsideClick handler I've specifically made it ignore outside clicks from my mobile toggle button:

<EuiOutsideClickDetector isDisabled={!navDrawerOpen} onOutsideClick={(e) => {
  const ignoredTargets = e.composedPath().filter(target => (
    (target as Element).id === "navigationDrawerToggle"
  ))

  if (ignoredTargets.length === 0) {
    setNavDrawerOpen(false)
  }
}}>

Then as you can see partially there, I'm keeping track of the open state myself. If I click my toggle button it toggles that state. Of course, if I click my toggle button it'd normally be an outside click, but in this case the outside click is ignored, and the button's ability to close / open as expected is preserved:

<EuiHeaderSectionItemButton
  id="navigationDrawerToggle"
  aria-label="Open nav"
  onClick={() => {
    if (!navDrawerOpen) {
      navDrawerRef?.current?.toggleOpen()
    } else {
      navDrawerRef?.current?.closeBoth()
    }

    setNavDrawerOpen(!navDrawerOpen)
  }}
>

I have to specifically call closeBoth to avoid using the internal EuiOutsideClickDetector behaviour. But I suppose if you could pass in a list of elements to ignore outside clicks from into the nav drawer then all of this behaviour could be built-in.

No idea if there's a better way of doing this internally. I was trying to think of something for a while looking over the source code for the nav drawer, but nothing sprang to mind without modifying the outside click detector to do basically what I've done here. This at least is working around the issue for me for now until it can be put to rest properly.

[cchaos]

This component is being deprecated in favor of EuiCollapsibleNav