Responsive swapper

Hi,

I am using responsive swapper to adjust menu at the top of the screen based on screen size.

Small/narrow screens just get the ‘hamburger’ icon. Pressing it should reveal/hide component named ‘menu’ which displays menu options.

Wider screens should display just the menu options horizontally along the top of the screen.

I created two components for this.
One is called menu-icon and contains the hamburger icon only.
30%20AM

The other is called menu-bar and contains menu items laid our horizontally.
28%20AM

I then place both into the responsive swapper.
05%20AM

I now want action associated with the menu-icon component to be reveal/hide component ‘menu’, and actions associated with menu-bar component to be either display ‘about’ alert or ‘contact’ email form.

But it seems that I can associate reveal/hide action only with the responsive swapper component itself, which means that regardless of it’s state (narrow/wide phone or narrow/wide tablet) I trigger that action.

Any suggestions?

Thank you,

Hi,

You’re right that you cannot hide embedded component “inside” the component in case you want to hide something outside the component. You can use component’s Visible property and link it to Data slot value. Then when the Data slot value changes between “true/false” component appears or disappears from anywhere it is placed.

I also tested to implement this with Show/Hide interaction. It looks like it kind of works: https://neonto.cloud/preview/vdd6zv6w. Download project file here: https://s3.amazonaws.com/sc.neonto.com/example_projects/responsive%20Menu.rsproj.zip

1 Like

Back to this topic.

Do you have project code for this: https://neonto.cloud/u/menuexample/

Thanks!

Hi, yes we do if you mean React Studio project file.

It is this: https://s3.amazonaws.com/sc.neonto.com/example_projects/responsive%20Menu.rsproj.zip (this link was also in the previous answer )

Thank you Antti,

Can you tell me how you got the background to dim/gray-out when the hamburger menu item is tapped? This happens on the neonto.cloud but not when I run it on my machine.

Animation when the menu list appears is also smoother and I could not replicate it.

Thank you
Mac

Hi,

You’re right that my example wasn’t exactly the same as in the link you sent. Anyway you can add “Fade in” animation into menu component to make it’s appearance smoother. I also added BG color which is opacity is about 50%.

Here’s a preview link to new version: https://neonto.cloud/preview/vdd6zv6w

Download the project file here: https://s3.amazonaws.com/sc.neonto.com/example_projects/responsive-Menu-example.rsproj.zip

Hi,

After a long pause coming back to this. Now with the drawer component available I went back to see if dimming the background would get easier but there still doesn’t seem to be a way to do it.

Seems like this requires some custom JS which I’m not able to do. Could someone show it could be done with the new drawer element, to behave like this:

https://neonto.cloud/u/menuexample/

Thanks!
Mac

I have the solution. Tomorrow I will post you

1 Like

Hi Paolo,

Could you post it when you have a moment? Really curious how you do it.

Thanks
Mac