updated sidebar link component

Author: guardofparadise

src/components/Sidebar/Sidebar.js

@@ -57,9 +57,9 @@ const structure = [
   },
   { id: 5, type: "divider" },
   { id: 6, type: "title", label: "HELP" },
-  { id: 7, label: "Library", link: "", icon: <LibraryIcon /> },
-  { id: 8, label: "Support", link: "", icon: <SupportIcon /> },
-  { id: 9, label: "FAQ", link: "", icon: <FAQIcon /> },
+  { id: 7, label: "Library", link: "https://flatlogic.com/templates", icon: <LibraryIcon /> },
+  { id: 8, label: "Support", link: "https://flatlogic.com/forum", icon: <SupportIcon /> },
+  { id: 9, label: "FAQ", link: "https://flatlogic.com/forum", icon: <FAQIcon /> },
   { id: 10, type: "divider" },
   { id: 11, type: "title", label: "PROJECTS" },
   {

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

@@ -48,7 +48,40 @@ export default function SidebarLink({
     );
 
   if (type === "divider") return <Divider className={classes.divider} />;
-
+  if (link && link.includes('http')) {
+    return (
+      <ListItem
+        button
+        className={classes.link}
+        classes={{
+          root: classnames(classes.linkRoot, {
+            [classes.linkActive]: isLinkActive && !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}
+        />
+        </a>
+      </ListItem>
+    )
+  }
   if (!children)
     return (
       <ListItem

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

@@ -7,6 +7,12 @@ export default makeStyles(theme => ({
       backgroundColor: theme.palette.background.light,
     },
   },
+  externalLink: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    textDecoration: 'none'
+  },
   linkActive: {
     backgroundColor: theme.palette.background.light,
   },