complete frontend restyling

2019-01-29 20:30:43 +01:00
parent c7aa9ca499
commit 2559afc1e8
34 changed files with 1235 additions and 145 deletions
--- a/frontend-react/src/components/Sidebar.js
+++ b/frontend-react/src/components/Sidebar.js
@@ -0,0 +1,135 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import withStyles from "@material-ui/core/styles/withStyles";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemText from "@material-ui/core/ListItemText";
+import Dashboard from "@material-ui/icons/Dashboard";
+import ExpandLess from "@material-ui/icons/ExpandLess";
+import ExpandMore from "@material-ui/icons/ExpandMore";
+import Collapse from "@material-ui/core/Collapse";
+import StarBorder from "@material-ui/icons/StarBorder";
+
+import sidebarStyle from "assets/sidebarStyle.js";
+import CollapseWrapperStyled from "components/widgets/CollapseWrapperStyled";
+import DeepCategoryWrapper from "./widgets/DeepCategoryWrapper";
+import { hoc } from "utils/helpers";
+
+import * as Vozila from "./categories/Vozila";
+import * as Nekretnine from "./categories/Nekretnine";
+
+import { connect } from "react-redux";
+import { CATEGORY_SELECT } from "constants/actionTypes";
+
+const options = [
+  { value: "Vozila", label: "Vozila" },
+  { value: "Nekretnine", label: "Nekretnine" }
+];
+
+const mapStateToProps = state => {
+  return {
+    category: state.category
+  };
+};
+
+const mapDispatchToProps = dispatch => ({
+  onCategoryChanged: option => dispatch({ type: CATEGORY_SELECT, option })
+});
+
+class Sidebar extends React.Component {
+  handleCategoryChange = selectedOption => {
+    this.props.onCategoryChanged(selectedOption);
+  };
+  render() {
+    const { classes, logo, image, logoText, category } = this.props;
+
+    return (
+      <div className={classes.drawerPaper}>
+        <div className={classes.logo}>
+          <a href="https://www.creative-tim.com" className={classes.logoLink}>
+            <div className={classes.logoImage}>
+              <img src={logo} alt="logo" className={classes.img} />
+            </div>
+            {logoText}
+          </a>
+        </div>
+        <div className={classes.sidebarWrapper}>
+          <List role="menu">
+            <ListItem className={classes.whiteText} onClick={this.handleClick}>
+              <ListItemIcon className={classes.whiteText}>
+                <Dashboard />
+              </ListItemIcon>
+              <ListItemText
+                className={classes.whiteText}
+                inset
+                primary="Kategorija"
+                disableTypography={true}
+              />
+              {true ? <ExpandLess /> : <ExpandMore />}
+            </ListItem>
+            <Collapse in={true} timeout="auto" unmountOnExit>
+              <List disablePadding>
+                {options.map(({ label, value }, index) => (
+                  <ListItem
+                    onClick={() => this.handleCategoryChange({ label, value })}
+                    className={
+                      classes.nested +
+                      " " +
+                      classes.collapsedItemStyle +
+                      " " +
+                      (category && category.value === value
+                        ? classes.checkedItem
+                        : "")
+                    }
+                    key={index}
+                  >
+                    <ListItemIcon className={classes.whiteText}>
+                      <StarBorder />
+                    </ListItemIcon>
+                    <ListItemText
+                      className={classes.whiteText}
+                      primary={label}
+                      disableTypography={true}
+                    />
+                  </ListItem>
+                ))}
+              </List>
+            </Collapse>
+
+            {hoc(category && category.value, {
+              Vozila: (
+                <CollapseWrapperStyled componentName="Podkategorija">
+                  <DeepCategoryWrapper {...Vozila.properties} />
+                </CollapseWrapperStyled>
+              ),
+              Nekretnine: (
+                <CollapseWrapperStyled componentName="Podkategorija">
+                  <DeepCategoryWrapper {...Nekretnine.properties} />
+                </CollapseWrapperStyled>
+              )
+            })}
+          </List>
+        </div>
+        {image !== undefined ? (
+          <div
+            className={classes.background}
+            style={{ backgroundImage: "url(" + image + ")" }}
+          />
+        ) : null}
+      </div>
+    );
+  }
+}
+
+Sidebar.propTypes = {
+  classes: PropTypes.object.isRequired
+};
+
+export default withStyles(sidebarStyle)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(Sidebar)
+);