Permalink
Browse files

step 3 - add jss-rtl

  • Loading branch information...
moshtaghi committed May 1, 2018
1 parent 3882d49 commit 6930a89165f674371867c86cef225348ef97b2b8
Showing with 51 additions and 27 deletions.
  1. +1 −0 package.json
  2. +40 −27 src/layouts/Dashboard/Dashboard.jsx
  3. +10 −0 yarn.lock
@@ -8,6 +8,7 @@
"@material-ui/icons": "1.0.0-beta.42",
"chartist": "0.10.1",
"classnames": "2.2.5",
"jss-rtl": "^0.2.3",
"material-ui": "1.0.0-beta.41",
"npm-run-all": "4.1.2",
"perfect-scrollbar": "1.3.0",
@@ -3,6 +3,12 @@ import PropTypes from "prop-types";
import { Switch, Route, Redirect } from "react-router-dom";
// import MuiThemeProvider and createMuiTheme to create custom theme
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
// import jss and jss-rtl for change all style to support RTL
import { create } from 'jss';
import rtl from 'jss-rtl';
import JssProvider from 'react-jss/lib/JssProvider';
import { createGenerateClassName, jssPreset } from 'material-ui/styles';
// creates a beautiful scrollbar
import PerfectScrollbar from "perfect-scrollbar";
import "perfect-scrollbar/css/perfect-scrollbar.css";
@@ -21,6 +27,11 @@ import logo from "assets/img/reactlogo.png";
const theme = createMuiTheme({
direction: 'rtl'
});
// Configure JSS
const jss = create({ plugins: [...jssPreset().plugins, rtl()] });
// Custom Material-UI class name generator.
const generateClassName = createGenerateClassName();
const switchRoutes = (
<Switch>
@@ -55,34 +66,36 @@ class App extends React.Component {
const { classes, ...rest } = this.props;
return (
<MuiThemeProvider theme={theme}>
<div className={classes.wrapper}>
<Sidebar
routes={dashboardRoutes}
logoText={"Creative Tim"}
logo={logo}
image={image}
handleDrawerToggle={this.handleDrawerToggle}
open={this.state.mobileOpen}
color="blue"
{...rest}
/>
<div className={classes.mainPanel} ref="mainPanel">
<Header
routes={dashboardRoutes}
handleDrawerToggle={this.handleDrawerToggle}
{...rest}
/>
{/* On the /maps route we want the map to be on full screen - this is not possible if the content and conatiner classes are present because they have some paddings which would make the map smaller */}
{this.getRoute() ? (
<div className={classes.content}>
<div className={classes.container}>{switchRoutes}</div>
<JssProvider jss={jss} generateClassName={generateClassName}>
<div className={classes.wrapper}>
<Sidebar
routes={dashboardRoutes}
logoText={"Creative Tim"}
logo={logo}
image={image}
handleDrawerToggle={this.handleDrawerToggle}
open={this.state.mobileOpen}
color="blue"
{...rest}
/>
<div className={classes.mainPanel} ref="mainPanel">
<Header
routes={dashboardRoutes}
handleDrawerToggle={this.handleDrawerToggle}
{...rest}
/>
{/* On the /maps route we want the map to be on full screen - this is not possible if the content and conatiner classes are present because they have some paddings which would make the map smaller */}
{this.getRoute() ? (
<div className={classes.content}>
<div className={classes.container}>{switchRoutes}</div>
</div>
) : (
<div className={classes.map}>{switchRoutes}</div>
)}
{this.getRoute() ? <Footer /> : null}
</div>
) : (
<div className={classes.map}>{switchRoutes}</div>
)}
{this.getRoute() ? <Footer /> : null}
</div>
</div>
</div>
</JssProvider>
</MuiThemeProvider>
);
}

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

0 comments on commit 6930a89

Please sign in to comment.