Add contact menu item with smooth scrolling for #links

src/client/components/home/content.js

@@ -34,9 +34,10 @@ export const STEP = {
   ERROR:   'ERROR',
 };
 
-const menuDef = [
+export const menuDef = [
   { label: "FAQ",      href: '/#faq' },
   { label: "About",    href: '/#about' },
+  { label: "Contact",  href: 'https://baderlab.org/', target: '_blank' }
 ];
 
 const logosDef = [

src/client/components/home/header.js

@@ -9,6 +9,7 @@ import { Button, Typography } from '@material-ui/core';
 
 import MenuIcon from '@material-ui/icons/Menu';
 import { AppLogoIcon } from '../svg-icons';
+import { openPageLink } from '../util';
 
 
 const useHeaderStyles = makeStyles(theme => ({
@@ -70,8 +71,8 @@ const useHeaderStyles = makeStyles(theme => ({
 export function Header({ menuDef, showRecentNetworks, mobile, tablet, onClickGetStarted, onOpenMobileMenu }) {
   const classes = useHeaderStyles();
 
-  const handleClick = (href) => {
-    window.location.href = href;
+  const handleClick = (href, target) => {
+    openPageLink(href, target);
   };
 
   const ToolbarDivider = ({ unrelated }) => {
@@ -89,7 +90,7 @@ export function Header({ menuDef, showRecentNetworks, mobile, tablet, onClickGet
           <ToolbarDivider />
           <Typography variant="inherit" className={classes.title}>EnrichmentMap:RNA-Seq</Typography>
         {!mobile && !tablet && menuDef.map((menu, idx) => (
-          <MenuItem key={idx} className={classes.menuItem} onClick={() => handleClick(menu.href)}>
+          <MenuItem key={idx} className={classes.menuItem} onClick={() => handleClick(menu.href, menu.target)}>
             { menu.label }
           </MenuItem>
         ))}

src/client/components/home/mobile-menu.js

@@ -8,6 +8,7 @@ import { Button, Typography } from '@material-ui/core';
 
 import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
 import { AppLogoIcon } from '../svg-icons.js';
+import { openPageLink } from '../util.js';
 
 
 const useStyles = makeStyles((theme) => ({
@@ -56,8 +57,10 @@ const useStyles = makeStyles((theme) => ({
 export function MobileMenu({ menuDef, open, onClose }) {
   const classes = useStyles();
 
-  const handleClick = (href) => {
-    setTimeout(() => window.location.href = href, 100);
+  const handleClick = (href, target) => {
+    openPageLink(href, target);
+
+    // setTimeout(() => window.location.href = href, 100);
     onClose();
   };
 
@@ -77,7 +80,7 @@ export function MobileMenu({ menuDef, open, onClose }) {
         </Button>
       </Toolbar>
     {menuDef.map((menu, idx) => (
-      <MenuItem key={idx} onClick={() => handleClick(menu.href)} className={classes.menuItem}>
+      <MenuItem key={idx} onClick={() => handleClick(menu.href, menu.target)} className={classes.menuItem}>
         { menu.label }
       </MenuItem>
     ))}

src/client/components/util.js

@@ -16,4 +16,40 @@ export function stringToBlob(str) {
 
 export function networkURL(id) {
   return `${window.location.origin}/document/${id}`;
+}
+
+const USE_SMOOTH_LINK_SCROLLING = true;
+
+export function openPageLink(href, target) {
+  if (target === '_blank') {
+    window.open(href);
+  } else if (href.indexOf("#") >= 0 && USE_SMOOTH_LINK_SCROLLING) {
+    // get hash portion of url
+    const hash = href.split("#")[1];
+
+    document.getElementById(hash).scrollIntoView({
+        behavior: 'smooth'
+    });
+
+    let isScrolling;
+
+    // Listen for scroll events
+    const lis = function() {
+      // Clear the timeout if it was already set
+      window.clearTimeout(isScrolling);
+
+      // Set a timeout to run after scrolling ends
+      isScrolling = setTimeout(function() {
+        // Remove passive listener
+        window.removeEventListener('scroll', lis);
+
+        // Update the URL when scrolling has stopped
+        window.location.href = href;
+      }, 150); // delay after scrolling ends
+    };
+
+    window.addEventListener('scroll', lis, { passive: true });
+  } else {
+    window.location.href = href;
+  }
 }