Reactjs Ant-Design Menu - change subMenu appearance

Question

I'm developing a Reactjs website and I'm using Ant-Design (antd) library. I have a Menu and I decided to use the vertical mode. Since my website has rtl layout, I need the SubMenu items to be opened in the left side of the Menu box. How can I do that?

I've prepared an image of what I really want to do:

This is my code:

<Layout className="SideMenus">
  <Menu mode="vertical" defaultSelectedKeys={['One']}>
  <Menu.Item key="One">One</Menu.Item>
  <Menu.Item key="Two">Two</Menu.Item>
  <SubMenu key="Three" title="Three">
     <Menu.Item key="Option3">Option3</Menu.Item>
     <Menu.Item key="Option4">Option4</Menu.Item>
  </SubMenu>
</Layout>

Answer 1

If there is no space on the right, the menu will be automatically opened in the left side.

Have you tried vertical-right mode? I couldn't really try it, but maybe it is what you are looking for ...

Answer 2

在菜单级样式中使用向右浮动，它将自动弹出子菜单左侧

<Menu onClick={handleClick} style={{ width: 256 , float : "right"}} mode="vertical">