Add support for external links in SidebarNav component

Author: modularcoder

src/AppRouter.tsx

@@ -33,6 +33,16 @@ const AppRouter: React.FC = () => {
           component={Administration}
           layout={DashboardLayout}
         />
+        <RouteWithLayout
+          path={`/account`}
+          component={() => null}
+          layout={DashboardLayout}
+        />
+        <RouteWithLayout
+          path={`/settings`}
+          component={() => null}
+          layout={DashboardLayout}
+        />
       </Switch>
     </AppRouterComponent>
   )

src/_common/AppSidebar/SidebarNavRecursive/NavItemComponent.tsx

@@ -6,32 +6,50 @@ import { makeStyles, createStyles } from '@material-ui/core/styles'
 
 import { NavLink, NavLinkProps } from 'react-router-dom'
 
-export const NavItemLink = forwardRef<HTMLAnchorElement, NavLinkProps>((props, ref) => (
-  <NavLink exact {...props} innerRef={ref} />
-))
-
-export interface INavItemComponent {
+type NavItemComponentProps = {
   link?: string
   className?: string
   isCollapsed?: boolean
   style?: any
   onClick(e: MouseEvent): void
 }
 
+interface NavItemLinkInternalProps extends NavLinkProps {}
+
+export const NavItemLinkInternal = forwardRef<
+  HTMLAnchorElement,
+  NavItemLinkInternalProps
+>((props, ref) => {
+  return <NavLink exact {...props} innerRef={ref} />
+})
+
+export const NavItemLinkExternal = forwardRef<HTMLAnchorElement, NavItemComponentProps>(
+  (props, ref) => {
+    return (
+      <a {...props} href={props.link} ref={ref}>
+        {props.children}
+      </a>
+    )
+  },
+)
+
 // Can be a link, or button
 export const NavItemComponent = forwardRef<
   HTMLDivElement,
-  React.PropsWithChildren<INavItemComponent>
+  React.PropsWithChildren<NavItemComponentProps>
 >((props, ref) => {
   const { isCollapsed, ...newProps } = props
   const classes = useStyles()
 
-  const component =
-    typeof props.link === 'string' ? (
-      <ListItem {...newProps} component={NavItemLink} to={props.link} />
-    ) : (
-      <ListItem {...newProps} button />
-    )
+  const component = (() => {
+    if (!props.link) {
+      return <ListItem {...newProps} button />
+    } else if (typeof props.link === 'string' && !props.link.includes('http')) {
+      return <ListItem {...newProps} component={NavItemLinkInternal} to={props.link} />
+    } else if (typeof props.link === 'string' && props.link.includes('http')) {
+      return <ListItem {...newProps} component={NavItemLinkExternal} />
+    }
+  })()
 
   return (
     <div ref={ref} className={clsx(isCollapsed && classes.navItemCollapsedWrapper)}>

src/_common/AppSidebar/SidebarNavRecursive/SidebarNav.tsx

@@ -65,11 +65,11 @@ const SidebarNav: React.FC<ISidebarNavProps> = (props) => {
       items: [
         {
           name: 'Profile',
-          link: '/profile/me',
+          link: '/account/profile',
         },
         {
           name: 'Organization',
-          link: '/organization',
+          link: '/account/organization',
         },
       ],
     },
@@ -92,15 +92,15 @@ const SidebarNav: React.FC<ISidebarNavProps> = (props) => {
   ]
 
   const itemsTheme = [
-    {
-      name: 'Why Modular?',
-      link: '/demo/features',
-      Icon: IconNewReleases,
-      IconClassName: classes.iconFeatures,
-    },
+    // {
+    //   name: 'Why Modular?',
+    //   link: '/demo/features',
+    //   Icon: IconNewReleases,
+    //   IconClassName: classes.iconFeatures,
+    // },
     {
       name: 'Docs',
-      link: '/demo/docs',
+      link: 'https://github.com/modularcode/modular-admin-react/blob/master/README.md',
       Icon: IconLibraryBooks,
       IconClassName: classes.iconDocs,
     },