- Sidebar on hooks

Author: einazare

CHANGELOG.md

@@ -1,15 +1,13 @@
 # Change Log
 
 ## [1.8.0] date
-### Warning
-- Due to the fact that on the PRO version of this product the Sidebar component could not be changed to hooks, we've left the Sidebar component of this product unaltered as well (it makes use of classes and the withStyles function, instead of React Hooks and makeStyles function)
 ### Bug fixing
 - Rewrote the ISSUE_TEMPLATE
 - Deleted the copyright comments from all files, we only need to keep them inside our index.js and index.html
 - Added script that adds copyrights to the built app
 - Renamed all the files from `.jsx` to `.js`
 - Changed the `withStyles` function from Material-UI with the `makeStyles` function (integration with other frameworks should now be easy)
-- React Hooks is now supported (Please read the above warnings)
+- React Hooks is now supported
 ### Major style changes
 - Renamed `assets/jss/material-dashboard-react/layouts/dashboardStyle.js` to `assets/jss/material-dashboard-react/layouts/adminStyle.js`
 ### Deleted components

src/components/Sidebar/Sidebar.js

@@ -4,7 +4,7 @@ import classNames from "classnames";
 import PropTypes from "prop-types";
 import { NavLink } from "react-router-dom";
 // @material-ui/core components
-import withStyles from "@material-ui/core/styles/withStyles";
+import { makeStyles } from "@material-ui/core/styles";
 import Drawer from "@material-ui/core/Drawer";
 import Hidden from "@material-ui/core/Hidden";
 import List from "@material-ui/core/List";
@@ -15,14 +15,17 @@ import Icon from "@material-ui/core/Icon";
 import AdminNavbarLinks from "components/Navbars/AdminNavbarLinks.js";
 import RTLNavbarLinks from "components/Navbars/RTLNavbarLinks.js";
 
-import sidebarStyle from "assets/jss/material-dashboard-react/components/sidebarStyle.js";
+import styles from "assets/jss/material-dashboard-react/components/sidebarStyle.js";
 
-const Sidebar = props => {
+const useStyles = makeStyles(styles);
+
+export default function Sidebar(props) {
+  const classes = useStyles();
   // verifies if routeName is the one active (in browser input)
   function activeRoute(routeName) {
     return window.location.href.indexOf(routeName) > -1 ? true : false;
   }
-  const { classes, color, logo, image, logoText, routes } = props;
+  const { color, logo, image, logoText, routes } = props;
   var links = (
     <List className={classes.list}>
       {routes.map((prop, key) => {
@@ -146,10 +149,9 @@ const Sidebar = props => {
       </Hidden>
     </div>
   );
-};
+}
 
 Sidebar.propTypes = {
-  classes: PropTypes.object.isRequired,
   rtlActive: PropTypes.bool,
   handleDrawerToggle: PropTypes.func,
   bgColor: PropTypes.oneOf(["purple", "blue", "green", "orange", "red"]),
@@ -159,5 +161,3 @@ Sidebar.propTypes = {
   routes: PropTypes.arrayOf(PropTypes.object),
   open: PropTypes.bool
 };
-
-export default withStyles(sidebarStyle)(Sidebar);