Fix sidebar external links

Author: Blari

src/components/Sidebar/SidebarStructure.js

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

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

@@ -24,10 +24,11 @@ import useStyles2 from '../../styles';
 
 // components
 import Dot from '../Dot';
-import { Button, Badge } from '../../../Wrappers';
+import {Button, Badge, Link as LinkMaterial} from '../../../Wrappers';
 
 export default function SidebarLink({
   link,
+  ext,
   icon,
   label,
   children,
@@ -87,6 +88,47 @@ export default function SidebarLink({
     setAnchorEl(null);
   };
 
+  if (!children && ext)
+    return (
+      <>
+        <ListItem
+          onClick={(e) => {
+            if (click) {
+              return click(e, addSectionClick, onLogin);
+            }
+            return toggleDrawer(e);
+          }}
+          onKeyPress={toggleDrawer}
+          component={link ? LinkMaterial : null}
+          href={link}
+          className={classes.link}
+          classes={{
+            root: classnames(classes.link, {
+              [classes.linkActive]: isLinkActive && !nested,
+              [classes.linkNested]: nested,
+            }),
+          }}
+        >
+          <ListItemIcon
+            className={classnames(classes.linkIcon, {
+              [classes.linkIconActive]: isLinkActive,
+            })}
+            style={{ margin: nested && -11 }}
+          >
+            {nested ? <Dot color={isLinkActive && 'primary'} /> : icon}
+          </ListItemIcon>
+          <ListItemText
+            classes={{
+              primary: classnames(classes.linkText, {
+                [classes.linkTextActive]: isLinkActive,
+                [classes.linkTextHidden]: !isSidebarOpened,
+              }),
+            }}
+            primary={label}
+          />
+        </ListItem>
+      </>
+    );
   if (!children)
     return (
       <>

src/pages/CRUD/Users/table/UsersTable.js

@@ -9,7 +9,6 @@ import { uniqueId } from 'lodash';
 
 import { makeStyles } from '@mui/styles';
 import { DataGrid } from '@mui/x-data-grid';
-import { Link as LinkMaterial } from '../../../../components/Wrappers';
 
 import MenuItem from '@mui/material/MenuItem';
 
@@ -405,20 +404,6 @@ const UsersTable = () => {
             autoHeight
           />
         </div>
-
-        <div>
-          <LinkMaterial
-            color={'primary'}
-            target={'_blank'}
-            href={
-              process.env.NODE_ENV === 'production'
-                ? window.location.origin + '/api-docs/#/Users'
-                : 'http://localhost:8080/api-docs/#/Users'
-            }
-          >
-            API documentation for users
-          </LinkMaterial>
-        </div>
       </Widget>
 
       <Dialog