MINOR : supported rtl in sidebar (#14929)

* supported rtl support in sidebar

* changes as per comments
This commit is contained in:
Ashish Gupta 2024-01-29 19:31:55 +05:30 committed by GitHub
parent 69e6f50769
commit 0d9a2cb89e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 58 additions and 2 deletions

View File

@ -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>

View File

@ -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;
}
}
}
}
}