Sidebar on mobile view

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

Thanks for insights

The closing button shouldn’t be floating. You can toggle default states to control functionality.

1 Like

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.

1 Like

Thanks. UX is a weaker spot at my side. Can you explain more what you mean. Maybe with a simple graphic?

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.

Thank you. I will try it out and post back the results

1 Like

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.



Looking good :heart_eyes:, thanks for sharing

1 Like