MINOR : supported rtl in sidebar (#14929)

* supported rtl support in sidebar

* changes as per comments

openmetadata-ui/src/main/resources/ui/src/components/AppContainer/AppContainer.tsx

@@ -11,8 +11,10 @@
  *  limitations under the License.
  */
 import { Layout } from 'antd';
+import classNames from 'classnames';
 import { isEmpty } from 'lodash';
-import React from 'react';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import { ROUTES } from '../../constants/constants';
 import SignUpPage from '../../pages/SignUp/SignUpPage';
@@ -23,9 +25,12 @@ import LeftSidebar from '../MyData/LeftSidebar/LeftSidebar.component';
 import './app-container.less';
 
 const AppContainer = () => {
+  const { i18n } = useTranslation();
   const { Header, Sider, Content } = Layout;
   const { currentUser } = useAuthContext();
 
+  const isDirectionRTL = useMemo(() => i18n.dir() === 'rtl', [i18n]);
+
   return (
     <Switch>
       <Route exact component={SignUpPage} path={ROUTES.SIGNUP}>
@@ -33,7 +38,11 @@ const AppContainer = () => {
       </Route>
 
       <Layout className="app-container">
-        <Sider className="left-sidebar-col" width={60}>
+        <Sider
+          className={classNames('left-sidebar-col', {
+            'left-sidebar-col-rtl': isDirectionRTL,
+          })}
+          width={60}>
           <LeftSidebar />
         </Sider>
         <Layout>

openmetadata-ui/src/main/resources/ui/src/components/MyData/LeftSidebar/left-sidebar.less

@@ -271,3 +271,50 @@
   background-color: @white;
   overflow-x: hidden;
 }
+
+// support for rtl in sidebar
+
+.left-sidebar-col-rtl {
+  .left-sidebar-container {
+    right: 0;
+    left: initial;
+  }
+
+  .brand-logo-container {
+    padding-left: initial;
+    padding-right: 14px;
+  }
+
+  .left-sidebar-menu.ant-menu {
+    .ant-menu-item {
+      padding: 8px 13px 8px 0 !important;
+
+      .left-panel-item {
+        .anticon {
+          margin-right: initial;
+        }
+
+        .service-beta-tag {
+          right: initial;
+          left: 20px;
+        }
+      }
+    }
+
+    .ant-menu-submenu {
+      .ant-menu-submenu-title {
+        padding: 8px 13px 8px 0px !important;
+      }
+
+      .ant-menu-item {
+        padding: 8px 30px 8px 0 !important;
+      }
+
+      .ant-menu-sub.ant-menu-inline {
+        .ant-menu-item {
+          padding: 4px 30px 4px 0 !important;
+        }
+      }
+    }
+  }
+}