SidebarLink update
parent
06b59be4ec
commit
a16663d08d
|
@ -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();
|
||||
|
|
Loading…
Reference in New Issue