updated sidebarlink component

Author: guardofparadise

src/components/Sidebar/SidebarStructure.js

@@ -226,9 +226,9 @@ const structure = [
     },
     { id: 14, type: 'divider' },
     { id: 15, type: 'title', label: 'HELP' },
-    { id: 16, label: 'Library', link: '', icon: <LibraryIcon /> },
-    { id: 17, label: 'Support', link: '', icon: <SupportIcon /> },
-    { id: 18, label: 'FAQ', link: '', icon: <FAQIcon /> },
+    { id: 16, label: 'Library', link: 'https://flatlogic.com/templates', icon: <LibraryIcon /> },
+    { id: 17, label: 'Support', link: 'https://flatlogic.com/forum/', icon: <SupportIcon /> },
+    { id: 18, label: 'FAQ', link: 'https://flatlogic.com/forum/', icon: <FAQIcon /> },
     { id: 19, type: 'divider' },
     { id: 20, type: 'title', label: 'PROJECTS' },
     {

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

@@ -101,7 +101,40 @@ export default function SidebarLink({
   const chatSetClose = () => {
     setChat(false);
   };
-
+  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 (
       <>

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

@@ -1,6 +1,12 @@
 import { makeStyles } from "@material-ui/styles";
 
 export default makeStyles(theme => ({
+  externalLink: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    textDecoration: 'none'
+  },
   link: {
     textDecoration: "none",
     "&:hover, &:focus": {