SidebarLink update

src/components/Sidebar/components/SidebarLink/SidebarLink.js

@@ -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,32 +56,33 @@ 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,
-          })}
-        >
-          {nested ? <Dot color={isLinkActive && "primary"} /> : icon}
-        </ListItemIcon>
-        <ListItemText
-          classes={{
-            primary: classnames(classes.linkText, {
-              [classes.linkTextActive]: isLinkActive,
-              [classes.linkTextHidden]: !isSidebarOpened,
-            }),
-          }}
-          primary={label}
-        />
+          <ListItemIcon
+            className={classnames(classes.linkIcon, {
+              [classes.linkIconActive]: isLinkActive
+            })}
+          >
+            {nested ? <Dot color={isLinkActive && "primary"} /> : icon}
+          </ListItemIcon>
+          <ListItemText
+            classes={{
+              primary: classnames(classes.linkText, {
+                [classes.linkTextActive]: isLinkActive,
+                [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();