[New Feature] Supporting RTL

src/components/home/HomeComponent.tsx

@@ -56,7 +56,7 @@ import {
 import { IHomeComponentProps } from './IHomeComponentProps'
 import { IHomeComponentState } from './IHomeComponentState'
 
-const drawerWidth = 240
+const drawerWidth = 220
 const styles = (theme: any) => ({
   root: {
     width: '100%',
@@ -99,7 +99,7 @@ const styles = (theme: any) => ({
     backgroundColor: '#EEEEEE'
   },
   content: {
-    backgroundColor: 'transparent',    
+    backgroundColor: 'transparent',
     width: '100%',
     flexGrow: 1,
     padding: theme.spacing.unit * 1,
@@ -191,49 +191,49 @@ export class HomeComponent extends Component<IHomeComponentProps, IHomeComponent
   render() {
     const HR = HomeRouter as any
     const { loaded, authed, loadDataStream, mergedPosts, hasMorePosts, showSendFeedback, translate, classes, theme } = this.props
-    const {drawerOpen} = this.state
+    const { drawerOpen } = this.state
     const drawer = (
       <>
 
-        <NavLink to='/'>
-          <MenuItem style={{ color: 'rgb(117, 117, 117)' }}>
-            <ListItemIcon>
-              <SvgHome />
-            </ListItemIcon>
-            <ListItemText inset primary={translate!('sidebar.home')} />
-          </MenuItem>
-        </NavLink>
-        <NavLink to={`/${this.props.uid}`}>
-          <MenuItem style={{ color: 'rgb(117, 117, 117)' }}>
-            <ListItemIcon>
-              <SvgAccountCircle />
-            </ListItemIcon>
-            <ListItemText inset primary={translate!('sidebar.profile')} />
-          </MenuItem>
-        </NavLink>
-        <NavLink to='/people'>
-          <MenuItem style={{ color: 'rgb(117, 117, 117)' }}>
-            <ListItemIcon>
-              <SvgPeople />
-            </ListItemIcon>
-            <ListItemText inset primary={translate!('sidebar.people')} />
-          </MenuItem>
-        </NavLink>
-        <Divider />
-        <NavLink to='/settings'>
-          <MenuItem style={{ color: 'rgb(117, 117, 117)' }}>
-            <ListItemIcon>
-              <SvgSettings />
-            </ListItemIcon>
-            <ListItemText inset primary={translate!('sidebar.settings')} />
-          </MenuItem>
-        </NavLink>
-        <MenuItem onClick={() => showSendFeedback!()} style={{ color: 'rgb(117, 117, 117)' }}>
+      <NavLink to='/'>
+        <MenuItem style={{ color: 'rgb(117, 117, 117)' }}>
           <ListItemIcon>
-            <SvgFeedback />
+            <SvgHome />
           </ListItemIcon>
-          <ListItemText inset primary={translate!('sidebar.sendFeedback')} />
+          <ListItemText inset primary={translate!('sidebar.home')} />
         </MenuItem>
+      </NavLink>
+      <NavLink to={`/${this.props.uid}`}>
+        <MenuItem style={{ color: 'rgb(117, 117, 117)' }}>
+          <ListItemIcon>
+            <SvgAccountCircle />
+          </ListItemIcon>
+          <ListItemText inset primary={translate!('sidebar.profile')} />
+        </MenuItem>
+      </NavLink>
+      <NavLink to='/people'>
+        <MenuItem style={{ color: 'rgb(117, 117, 117)' }}>
+          <ListItemIcon>
+            <SvgPeople />
+          </ListItemIcon>
+          <ListItemText inset primary={translate!('sidebar.people')} />
+        </MenuItem>
+      </NavLink>
+      <Divider />
+      <NavLink to='/settings'>
+        <MenuItem style={{ color: 'rgb(117, 117, 117)' }}>
+          <ListItemIcon>
+            <SvgSettings />
+          </ListItemIcon>
+          <ListItemText inset primary={translate!('sidebar.settings')} />
+        </MenuItem>
+      </NavLink>
+      <MenuItem onClick={() => showSendFeedback!()} style={{ color: 'rgb(117, 117, 117)' }}>
+        <ListItemIcon>
+          <SvgFeedback />
+        </ListItemIcon>
+        <ListItemText inset primary={translate!('sidebar.sendFeedback')} />
+      </MenuItem>
       </>
     )
 
@@ -245,7 +245,6 @@ export class HomeComponent extends Component<IHomeComponentProps, IHomeComponent
           <Hidden mdUp>
             <Drawer
               variant='temporary'
-              anchor={anchor}
               open={this.state.drawerOpen}
               classes={{
                 paper: classes.drawerPaper,
@@ -258,8 +257,8 @@ export class HomeComponent extends Component<IHomeComponentProps, IHomeComponent
               <div>
                 <div className={classes.drawerHeader} />
                 <MenuList style={{ color: 'rgb(117, 117, 117)', width: '210px' }}>
-                <Divider />
-                {drawer}
+                  <Divider />
+                  {drawer}
                 </MenuList>
               </div>
             </Drawer>
@@ -273,8 +272,8 @@ export class HomeComponent extends Component<IHomeComponentProps, IHomeComponent
               }}
             >
               <div>
-              <MenuList className={classes.menu} style={{ color: 'rgb(117, 117, 117)', width: '210px' }}>
-                {drawer}
+                <MenuList className={classes.menu} style={{ color: 'rgb(117, 117, 117)', width: '210px' }}>
+                  {drawer}
                 </MenuList>
               </div>
             </Drawer>

src/components/homeHeader/HomeHeaderComponent.tsx

@@ -2,6 +2,7 @@
 import React, { Component } from 'react'
 import { NavLink } from 'react-router-dom'
 import { connect } from 'react-redux'
+import classNames from 'classnames'
 
 // - Material UI
 import SvgDehaze from 'material-ui-icons/Dehaze'
@@ -172,7 +173,8 @@ export class HomeHeaderComponent extends Component<IHomeHeaderComponentProps, IH
 
   // Render app DOM component
   render () {
-    const { classes , translate} = this.props
+    const { classes , translate, theme} = this.props
+    const anchor = theme.direction === 'rtl' ? 'right' : 'left'
     return (
 
       <AppBar position='fixed' color='secondary'>
@@ -188,7 +190,7 @@ export class HomeHeaderComponent extends Component<IHomeHeaderComponentProps, IH
           </Typography>
           <div className='homeHeader__title-root'>
           <Hidden smDown>
-           <div className='homeHeader__title'>{this.props.title}</div> 
+           <div className={classNames({'homeHeader__title-left': anchor === 'left', 'homeHeader__title-right': anchor === 'right' })}>{this.props.title}</div> 
            </Hidden>
           </div>
 
@@ -271,4 +273,4 @@ const mapStateToProps = (state: any, ownProps: IHomeHeaderComponentProps) => {
 }
 
 // - Connect component to redux store
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(HomeHeaderComponent as any) as any)
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles, { withTheme: true })(HomeHeaderComponent as any) as any)

src/components/homeHeader/IHomeHeaderComponentProps.ts

@@ -65,6 +65,11 @@ export interface IHomeHeaderComponentProps {
    * Material ui theme style
    */
   classes?: any
+    
+  /**
+   * Theme
+   */
+  theme?: any
 
   /**
    * Translate to locale string

src/styles/app.css

@@ -676,9 +676,7 @@ g__input-underline::after {
 .homeHeader__title-root {
   flex: 1; }
 
-.homeHeader__title {
-  border-left: 1px solid #fff;
-  padding-left: 24px;
+.homeHeader__title, .homeHeader__title-right, .homeHeader__title-left {
   margin-left: 24px;
   line-height: 32px;
   font-weight: 500;
@@ -687,6 +685,14 @@ g__input-underline::after {
   -webkit-font-smoothing: antialiased;
   color: #fff; }
 
+.homeHeader__title-right {
+  border-right: 1px solid #fff;
+  padding-right: 24px; }
+
+.homeHeader__title-left {
+  border-left: 1px solid #fff;
+  padding-left: 24px; }
+
 .homeHeader__right {
   padding-left: 30px;
   padding-right: 30px;

src/styles/components/_homeHeader.scss

@@ -3,8 +3,6 @@
 }
 
 .homeHeader__title {
-  border-left: 1px solid #fff;
-  padding-left: 24px;
   margin-left: 24px;
   line-height: 32px;
   font-weight: 500;
@@ -14,6 +12,17 @@
   color: #fff;
 }
 
+.homeHeader__title-right {
+  @extend .homeHeader__title;
+  border-right: 1px solid #fff;
+  padding-right: 24px;    
+}
+.homeHeader__title-left {
+  @extend .homeHeader__title;
+  border-left: 1px solid #fff;
+  padding-left: 24px;  
+}
+
 .homeHeader__right {
   padding-left: 30px;
   padding-right: 30px;