Responsive swapper


#1

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,


#2

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


#3

Back to this topic.

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

Thanks!


#4

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 )


#5

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


#6

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