117 lines
3.7 KiB
JavaScript
117 lines
3.7 KiB
JavaScript
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 Nekretnine from "./categories/Nekretnine";
|
|
|
|
import { connect } from "react-redux";
|
|
import { CATEGORY_SELECT } from "../constants/actionTypes";
|
|
|
|
const options = [
|
|
{ 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">
|
|
<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, {
|
|
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)
|
|
);
|