Select Git revision
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
Sidebar.js 7.73 KiB
/*eslint-disable*/
import React from "react";
import { useHistory } from "react-router-dom";
import classNames from "classnames";
import PropTypes from "prop-types";
import { NavLink } from "react-router-dom";
// @material-ui/core components
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";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import Icon from "@material-ui/core/Icon";
// core components
import AdminNavbarLinks from "components/Navbars/AdminNavbarLinks.js";
import RTLNavbarLinks from "components/Navbars/RTLNavbarLinks.js";
import ExitToAppIcon from "@material-ui/icons/ExitToApp";
import UpdateIcon from "@material-ui/icons/Update";
import styles from "assets/jss/material-dashboard-react/components/sidebarStyle.js";
import auth from "auth";
import Snackbar from "@material-ui/core/Snackbar/Snackbar";
import i18next from "i18next";
const useStyles = makeStyles(styles);
export default function Sidebar(props) {
const classes = useStyles();
const mainPanel = React.createRef();
const [open, setOpen] = React.useState(false);
const history = useHistory();
const handleCloseProfile = () => {
auth.logout(() => {
history.push("/");
});
};
const handleListItemClick = (e, layout, path) => {
e.preventDefault();
history.push(layout + path.substring(0, 2));
};
React.useEffect(() => {
if (auth.isUpdateAvailable() && auth.hasAdminScope()) setOpen(true);
}, [mainPanel]);
// verifies if routeName is the one active (in browser input)
function activeRoute(routeName) {
return window.location.href.indexOf(routeName) > -1 ? true : false;
}
const { color, logo, image, logoText, routes } = props;
var links = (
<List className={classes.list}>
{routes.map((prop, key) => {
var activePro = " ";
var listItemClasses;
if (prop.path === "/upgrade-to-pro") {
activePro = classes.activePro + " ";
listItemClasses = classNames({
[" " + classes[color]]: true,
});
} else {
listItemClasses = classNames({
[" " + classes[color]]: activeRoute(prop.layout + prop.path),
});
}
const whiteFontClasses = classNames({
[" " + classes.whiteFont]: activeRoute(prop.layout + prop.path),
});
return (
<div className={classes.wrapper}>
{props.updating && (
<Snackbar
anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
open={open}
message={props.snackbarMessage}
key={"bottomright"}
></Snackbar>
)}
<NavLink
to={prop.layout + prop.path}
className={activePro + classes.item}
activeClassName="active"
key={key}
>
<ListItem
button
className={classes.itemLink + listItemClasses}
onClick={(e) => handleListItemClick(e, prop.layout, prop.path)}
>
{typeof prop.icon === "string" ? (
<Icon
className={classNames(classes.itemIcon, whiteFontClasses, {
[classes.itemIconRTL]: props.rtlActive,
})}
>
{prop.icon}
</Icon>
) : (
<prop.icon
className={classNames(classes.itemIcon, whiteFontClasses, {
[classes.itemIconRTL]: props.rtlActive,
})}
/>
)}
<ListItemText
primary={props.rtlActive ? prop.rtlName : prop.name}
className={classNames(classes.itemText, whiteFontClasses, {
[classes.itemTextRTL]: props.rtlActive,
})}
disableTypography={true}
/>
</ListItem>
</NavLink>
</div>
);
})}
</List>
);
var bottomLinks = (
<List className={classes.bottomlist}>
{open && (
<ListItem
button
className={classes.itemLink}
onClick={(e) => {
props.handleQuery();
props.setOpenUpdate(true);
}}
>
<Icon
className={classNames(classes.itemIcon, {
[classes.itemIconRTL]: false,
})}
>
<UpdateIcon />
</Icon>
<ListItemText
primary="Update now"
className={classNames(classes.itemText, {
[classes.itemTextRTL]: false,
})}
disableTypography={true}
/>
</ListItem>
)}
<ListItem
button
className={classes.itemLink}
onClick={handleCloseProfile}
>
<Icon
className={classNames(classes.itemIcon, {
[classes.itemIconRTL]: false,
})}
>
<ExitToAppIcon />
</Icon>
<ListItemText
primary={i18next.t("Logout", "Logout")}
className={classNames(classes.itemText, {
[classes.itemTextRTL]: false,
})}
disableTypography={true}
/>
</ListItem>
</List>
);
var brand = (
<div className={classes.logo}>
<a
href="/"
className={classNames(classes.logoLink, {
[classes.logoLinkRTL]: props.rtlActive,
})}
target="_blank"
>
<div className={classes.logoImage}>
<img src={logo} alt="logo" className={classes.img} />
</div>
{/* {logoText} */}
</a>
</div>
);
return (
<div>
<Hidden mdUp implementation="css">
<Drawer
variant="temporary"
anchor={props.rtlActive ? "left" : "right"}
open={props.open}
classes={{
paper: classNames(classes.drawerPaper, {
[classes.drawerPaperRTL]: props.rtlActive,
}),
}}
onClose={props.handleDrawerToggle}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
>
{brand}
<div className={classes.sidebarWrapper}>
{props.rtlActive ? <RTLNavbarLinks /> : <AdminNavbarLinks />}
{links}
{bottomLinks}
</div>
{image !== undefined ? (
<div
className={classes.background}
style={{ backgroundImage: "url(" + image + ")" }}
/>
) : null}
</Drawer>
</Hidden>
<Hidden smDown implementation="css">
<Drawer
anchor={props.rtlActive ? "right" : "left"}
variant="permanent"
open
classes={{
paper: classNames(classes.drawerPaper, {
[classes.drawerPaperRTL]: props.rtlActive,
}),
}}
>
{brand}
<div className={classes.sidebarWrapper}>{links}</div>
<div className={classes.sidebarWrapper}>{bottomLinks}</div>
{image !== undefined ? (
<div
className={classes.background}
style={{ backgroundImage: "url(" + image + ")" }}
/>
) : null}
</Drawer>
</Hidden>
</div>
);
}
Sidebar.propTypes = {
rtlActive: PropTypes.bool,
handleDrawerToggle: PropTypes.func,
bgColor: PropTypes.oneOf(["purple", "blue", "green", "orange", "red"]),
logo: PropTypes.string,
image: PropTypes.string,
logoText: PropTypes.string,
routes: PropTypes.arrayOf(PropTypes.object),
open: PropTypes.bool,
};