How can I create a click event for a hamburger menu item?

I need to take the user to a specific screen in the app when they click on a hamburger menu item, but I need to add a dynamic query parameter, so I can’t use the built in option to take the user to another screen. How can I add a click event using JavaScript that will work with the hamburger menu?

In order to this you need to inspect the menu to find the class you need to be targeting. In this case we need to be looking at this:

Here you can see that the parent class we need to inspect is linked with-icon focus-outline and in order to target a specific menu item we need to match with the Text inside the menu item. In my example lets target the click event on the Home button. See code example:

//Here we are targeting a click event on the class we found. 
$(document).on('click', '.linked.with-icon.focus-outline', function(){
//We need to log the text of the clicked item to see if it matches 
  console.log($(this).text().trim())
//if the text matches the one we are looking for
  if ($(this).text().trim() === 'Home'){
//If it matches then navigate to the required screen. 
    Fliplet.Navigate.screen(123456)
  }
})

In order for this to work with the menu we need to add this to the Global JS so it can run on every screen.

Hope this helps,
Deb