[Reactive Sidebar with Overlay] Reactive Sidebar with Overlay need menu on LEFT side of screen.  How to move it?
Forge component by José Pedro Proença
Application Type
Reactive

Hello


the Reactive Sidebar with Overlay has the menu on the Right side of the screen, how can I flip it to come from LEFT side?



Thanks!

Solution

Hi again :)

Are you sure that you've added the CSS class "sidebar-left" in the module that is consuming the component? Like this:

From your screenshot it looks like the component was correctly updated. The only other thing that could have been missing is also the refresh of the references, after the update of the module. To be sure that they are refreshed, please head to:
and then it this button:

Hope this solves it :)

You must open the component and change it there. As you can see it uses ColumnsSmallRight widget from OutsystemsUI. I added the Left version, you can do it as well and apply the changes in the main widget.

That is what I have done and refreshed up, but it continues to display on the right

left.png

Can you send me the component modified? You must have missed something to change...

Yes, of course.  Thanks

ReactiveSidebarCW.oml

You're right, it doesn't look so simple and requires some time to explore.

Maybe you can contact the component creator and ask for a left side version, it will be benefitial for both.

Regards

Hello :)

I'm part of the team that created this component.

I just looked into it and have a solution. In the end all you'll need to do is to add the CSS class sidebar-left on the component, like this:

The class definition is as follows:

.sidebar.sidebar-left {
    right: inherit;
    left: 0;
    -webkit-transform: translateX(-102%);
    transform: translateX(-102%);
}
.sidebar.sidebar-left.sidebar-open {
    -webkit-transform: none;
    transform: none;
    -webkit-transition: all 330ms ease-out;
    transition: all 330ms ease-out;
    will-change: transform;
}

You can add it on your theme to use it right away if you want here:

However I also published a new version of the component with this extra CSS already on it. So if you want you can just update the component on your environment and add the new CSS class :)


Let me know if you need more help,
José

Hello!

Thank you for your response.  I have downloaded your latest component with the new css, however the sidebar continues to display on right side of screen.  I attempted to change to Adaptive columns small left, same result.  Sorry, I must have missed something?

Please advise at your earliest convenience and thank you again for your help.

screen.png

Solution

Hi again :)

Are you sure that you've added the CSS class "sidebar-left" in the module that is consuming the component? Like this:

From your screenshot it looks like the component was correctly updated. The only other thing that could have been missing is also the refresh of the references, after the update of the module. To be sure that they are refreshed, please head to:
and then it this button:

Hope this solves it :)

Yes sir, thank you for that insight, got it working.

Thank you for this widget and all your assistance.


Stay safe!

Great!! Nice to hear that it is working :)

Feel free to reach out in the future if you have any question!

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.