Automatically Closing Oxygen's Floating Icon Menu

Oxygen has recently released a Floating Icon Menu as part of their composite elements. It works great! It doesn't automatically close when a child menu icon is clicked through. This guide will show you how to do that.

On my main site I have the Floating Icon Menu configured as such:

When you add a Floating Icon Menu, you will see something like this in the structure panel:

It's the javascript of the 'Floating Icon Menu Code' element you will need to edit. By default it will look like this:

var floatingMenuIcon = document.querySelector('.oxel_floating_icon_menu__main_icon');

floatingMenuIcon.addEventListener('click', (e) => {
  if( !floatingMenuIcon.classList.contains('oxel_floating_icon_menu__main_icon--active') ) {
  floatingMenuIcon.classList.add('oxel_floating_icon_menu__main_icon--active');
  } else {
  floatingMenuIcon.classList.remove('oxel_floating_icon_menu__main_icon--active');                                
  }
});

To automatically close the floating icon menu on a click of any of the child menu elements, you will need to add and modify the following code below the existing javascript:

function Close_Floating_Menu(){
  floatingMenuIcon.classList.remove('oxel_floating_icon_menu__main_icon--active')
}

document.getElementById("link-180-51").onclick=Close_Floating_Menu;
document.getElementById("link-177-51").onclick=Close_Floating_Menu;

The link id's are those of the link wrappers of the child menu elements. In my case, those labelled 'WhatsApp' and 'message' in the structure panel detailed above. If you have more than 2 child menu elements, then ensure you add a 'Close_Floating_Menu' line for each child menu you have. My final code looks like this:

This is my first time writing any javascript, so it may not be optimal. If you find a better way to do this, then please comment below. Perhaps Oxygen will add this capability in a future release??