tudor.stanciu
/
cdn-frontend
mirror of https://dev.azure.com/tstanciu94/CDN/_git/CDN_Frontend
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

SidebarLink update

master
Tudor Stanciu 2021-07-04 03:40:28 +03:00
parent 06b59be4ec
commit a16663d08d
1 changed files with 35 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/components/Sidebar/components/SidebarLink/SidebarLink.js
View File

@ -6,7 +6,7 @@ import {
ListItem, ListItem,
ListItemIcon, ListItemIcon,
ListItemText, ListItemText,
Typography, Typography
} from "@material-ui/core"; } from "@material-ui/core";
import { Inbox as InboxIcon } from "@material-ui/icons"; import { Inbox as InboxIcon } from "@material-ui/icons";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
@ -26,7 +26,7 @@ export default function SidebarLink({
location, location,
isSidebarOpened, isSidebarOpened,
nested, nested,
type, type
}) { }) {
var classes = useStyles(); var classes = useStyles();
@ -36,19 +36,19 @@ export default function SidebarLink({
link && link &&
(location.pathname === link || location.pathname.indexOf(link) !== -1); (location.pathname === link || location.pathname.indexOf(link) !== -1);
if (type === "divider") return <Divider className={classes.divider} />;
if (type === "title") if (type === "title")
return ( return (
<Typography <Typography
className={classnames(classes.linkText, classes.sectionTitle, { className={classnames(classes.linkText, classes.sectionTitle, {
[classes.linkTextHidden]: !isSidebarOpened, [classes.linkTextHidden]: !isSidebarOpened
})} })}
> >
{label} {label}
</Typography> </Typography>
); );
if (type === "divider") return <Divider className={classes.divider} />; if (link && link.includes("http")) {
if (link && link.includes('http')) {
return ( return (
<ListItem <ListItem
button button
@ -56,32 +56,33 @@ export default function SidebarLink({
classes={{ classes={{
root: classnames(classes.linkRoot, { root: classnames(classes.linkRoot, {
[classes.linkActive]: isLinkActive && !nested, [classes.linkActive]: isLinkActive && !nested,
[classes.linkNested]: nested, [classes.linkNested]: nested
}), })
}} }}
disableRipple disableRipple
> >
<a className={classes.externalLink} href={link}> <a className={classes.externalLink} href={link}>
<ListItemIcon <ListItemIcon
className={classnames(classes.linkIcon, { className={classnames(classes.linkIcon, {
[classes.linkIconActive]: isLinkActive, [classes.linkIconActive]: isLinkActive
})} })}
> >
{nested ? <Dot color={isLinkActive && "primary"} /> : icon} {nested ? <Dot color={isLinkActive && "primary"} /> : icon}
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
classes={{ classes={{
primary: classnames(classes.linkText, { primary: classnames(classes.linkText, {
[classes.linkTextActive]: isLinkActive, [classes.linkTextActive]: isLinkActive,
[classes.linkTextHidden]: !isSidebarOpened, [classes.linkTextHidden]: !isSidebarOpened
}), })
}} }}
primary={label} primary={label}
/> />
</a> </a>
</ListItem> </ListItem>
) );
} }
if (!children) if (!children)
return ( return (
<ListItem <ListItem
@ -92,24 +93,24 @@ export default function SidebarLink({
classes={{ classes={{
root: classnames(classes.linkRoot, { root: classnames(classes.linkRoot, {
[classes.linkActive]: isLinkActive && !nested, [classes.linkActive]: isLinkActive && !nested,
[classes.linkNested]: nested, [classes.linkNested]: nested
}), })
}} }}
disableRipple disableRipple
> >
<ListItemIcon <ListItemIcon
className={classnames(classes.linkIcon, { className={classnames(classes.linkIcon, {
[classes.linkIconActive]: isLinkActive, [classes.linkIconActive]: isLinkActive
})} })}
> >
{nested ? <Dot color={isLinkActive && "primary"} /> : icon} {nested ? icon || <Dot color={isLinkActive && "primary"} /> : icon}
</ListItemIcon> </ListItemIcon>
<ListItemText <ListItemText
classes={{ classes={{
primary: classnames(classes.linkText, { primary: classnames(classes.linkText, {
[classes.linkTextActive]: isLinkActive, [classes.linkTextActive]: isLinkActive,
[classes.linkTextHidden]: !isSidebarOpened, [classes.linkTextHidden]: !isSidebarOpened
}), })
}} }}
primary={label} primary={label}
/> />
@ -128,7 +129,7 @@ export default function SidebarLink({
> >
<ListItemIcon <ListItemIcon
className={classnames(classes.linkIcon, { className={classnames(classes.linkIcon, {
[classes.linkIconActive]: isLinkActive, [classes.linkIconActive]: isLinkActive
})} })}
> >
{icon ? icon : <InboxIcon />} {icon ? icon : <InboxIcon />}
@ -137,8 +138,8 @@ export default function SidebarLink({
classes={{ classes={{
primary: classnames(classes.linkText, { primary: classnames(classes.linkText, {
[classes.linkTextActive]: isLinkActive, [classes.linkTextActive]: isLinkActive,
[classes.linkTextHidden]: !isSidebarOpened, [classes.linkTextHidden]: !isSidebarOpened
}), })
}} }}
primary={label} primary={label}
/> />
@ -151,7 +152,7 @@ export default function SidebarLink({
className={classes.nestedList} className={classes.nestedList}
> >
<List component="div" disablePadding> <List component="div" disablePadding>
{children.map(childrenLink => ( {children.map((childrenLink) => (
<SidebarLink <SidebarLink
key={childrenLink && childrenLink.link} key={childrenLink && childrenLink.link}
location={location} location={location}
@ -167,8 +168,6 @@ export default function SidebarLink({
</> </>
); );
// ###########################################################
function toggleCollapse(e) { function toggleCollapse(e) {
if (isSidebarOpened) { if (isSidebarOpened) {
e.preventDefault(); e.preventDefault();