First, what version of the OutSystems platform are you using, and what version of Service Studio? This information is needed to ensure that the answers you get are accurate.

Second, you should be aware that the common pattern for mobile apps is that the left side is where the menu panel appears when the hamburger menu is tapped. Replacing that with a non-menu sidebar is something that may provide a poor user experience, since it departs from the patterns that users will be accustomed to.

Moreover, if what you're saying is you want to have the sidebar from the right on web or desktop, and from the left on mobile, that further compounds the potential UI confusion, particularly if you will have users who would use your app in both modalities (large screen vs. mobile screen).

As a follow-up, I looked into this a bit, and here are my basic findings:

1. The default Sidebar pattern is right-side only, for the reasons that I mentioned above. Left-side is typically where a menu would appear on mobile, so putting the sidebar there is not a good UX choice.
2. If you want to go ahead with the attempt, your best bet is probably to clone the OutSystems UI Web module, and modify the Sidebar pattern to add support for flying in from the left. The good news here is that the CSS for OutSystems UI Web already includes the classes needed (enter-left and leave-left, respectively).

I did a quick experiment, and was able to produce a left-sidebar by duplicating the Sidebar pattern, giving it a new name, changing the classes on the child container of SidebarWrapper to use enter-left and leave-left, and adding a new class sidebar-left-container (to replace the existing sidebar-container) to correctly position the sidebar on the left side.

SyntaxEditor Code Snippet

.sidebar-left-container {
    background: var(--color-neutral-0);
    box-shadow: var(--shadow-l);
    height: 100vh;
    position: fixed;
    overflow-y: auto;
    left: 0;
    top: 0;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    width: 500px;
    z-index: 150;
    -servicestudio-position: relative;
    -servicestudio-height: auto;
    -servicestudio-transform: translateX(0);
}

Note that this does not provide for switching from one side to another based on device type...it was just an experiment to see how much work would be required to move a sidebar to the left.

It's certainly possible to expand upon the info above to modify the existing Sidebar pattern (or a clone of it, anyway) to get the behavior you desire.

I would still strongly recommend against this, for reasons of UX consistency.

Viru 7 wrote:

Hello Viru 7,

write css

SyntaxEditor Code Snippet

.is--hidden .leave-right
{
    animation-name: leave-left;  
  }
  .is--visible .enter-right
  {
  animation-name: enter-left;
  }
  .sidebar-container
  {
  left:0;
  }
  

Hello!

How to do side menu bro.