Group Focus responsiveness / focus behaviour for regular group

Need help Responsiveness
1

Hi everyone, I’m trying to create a full-width dropdown menu for my app’s floating nav bar.

As it’s a dropdown menu, I figured it made sense to use a group focus, and it was working great, but then I learned that a group focus can’t widen or narrow according to screen size.

So I tried to recreate it with a regular group and used workflows and collapsed height to achieve group focus functionality, but there was one important part I couldn’t recreate: hiding the group when clicking anywhere away from it, which is a behaviour I think most people are familiar with.

As an alternative solution, I added an action to my workflow to save the current page position as a state when the menu is opened, and I added a ‘when condition is true’ event to hide the menu when the user’s scroll position is more or less than the saved state.

This should be a satisfactory UX, but I’m interested to know if there’s something you would do differently? Also, I’m wondering if there’s a reason why group focus doesn’t have responsiveness settings. Otherwise, I’d like to submit this as a feature request.

I’m yet to confirm whether my workaround is possible while also adding the nav bar to a floating group. I’m guessing I can add a ‘spacer’ group to the floating group that hides/collapses when the reusable nav bar’s state changes.

Thanks!

2

For the functionality to close the group when a user clicks outside, did you try placing the group inside a larger group that is full screen, and when user clicks the bigger group, they both close?

3

I didn’t think of that! To get it to work with the nav bar as a reusable element, I had to change the nav bar workflows so that the state of the whole reusable element is changed when the dropdown button is clicked (instead of the specific menu’s state) and the dropdown group hides/shows accordingly, which meant I could change the state of the reusable element when an external group is clicked. Thank you.

Turns out that my spacer-group-in-floating-group idea technically works but the spacer group is much slower to hide than the dropdown menu, so I can’t use this. Any ideas?*

*Edit: Ah never mind; I incorrectly assumed that the floating group would have to be the same height as the reusable element’s maximum height, but I’m pleased to discover it only needs to be the minimum height and the dropdown menu still opens.