Hi I have an floating group as sidebar. It toggled perfectly at desktop view.
On mobile I want to achieve something different. From screen width 768 and below I want to expand sidebar with a close button something like: that
I managed this with a group focus, but that will hide when I click outside this group.
So what other options do I have. I tried a regular group, but positioning didn’t work. Should I place this close icon in a small floating group, next to the sidebar
or should I make a specific mobile sidebar by using a transparent floating group that is wider . In there I place a group that acts as sidebar and a group that acts as closing icon? In that case an invisible area below the close icon which is a floating group won’t react on user interaction
As a UX Designer I’m always a big fan of giving users simple and clear direction. My recommendation would be to place the close icon next to the panel on mobile while making sure it has a big enough touch target.
I use custom states managed by workflow. If I don’t use floating group. What should I do to position the close button next to the sidebar on mobile view-port. When I use a group it is placed to far on the left due to the responsiveness behavior
Sure, lets look at Stripe for example. As you can see for their mobile menu, they open up a panel when a user clicks the hamburger icon, from there the user can close the panel by clicking on the close icon which has big enough touch area for their thumb or user can close the panel by clicking anywhere outside the panel view.
Having both of those interactions would be great but, If you can only do one of those interactions mentioned above I would say go for the close icon interaction. The interaction (click on outside area to close) is more of a nice to have.
As for how to achieve this? You can put a close icon with workflow inside the sidebar if that makes it easier on your part.
It seems that I got it the way I want. I added another floating group (337px * 60px). At the right I added the close button. In the workflow I added a bit of animation.
I toggle the menu using a custom state which you see switch to yes or no in the example below.
I am thinking about placing the menu toggle to open the menu at the right of the screen.
This for no will be my base setup. From here I will go to expand my app.
Next step: responsive repeating group with search and filter properties and pagination.
, thanks for sharing