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

View File

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