Fix issue #337, #339, #223

src/shared/actions/topcoder_header.js

@@ -9,24 +9,27 @@ import { createActions } from 'redux-actions';
  * Payload creator for OPEN_MENU action.
  * @param {Object} menu Menu to open.
  * @param {Object} triggerNode HTML node which has triggered the action.
+ * @param {Boolean} triggeredByTouch whether this action is triggered by touch event.
  *  We gonna store to the state its on-screen layout position, so that
  *  when mouse cursor moves back and forth between that node and the
  *  opened menu, we can check it and keep the menu open.
  */
-function openMenu(menu, triggerNode) {
+function openMenu(menu, triggerNode, triggeredByTouch) {
   return ({
     menu,
     trigger: _.toPlainObject(triggerNode.getBoundingClientRect()),
+    isMobile: triggeredByTouch,
   });
 }
 
 /**
  * Payload creator for OPEN_SEARCH action.
  * @param {Object} triggerNode HTML node which has triggered the action.
+ * @param {Boolean} triggeredByTouch whether this action is triggered by touch event.
  *  This serves the same purpose as in openMenu() function.
  */
-function openSearch(triggerNode) {
-  return openMenu(undefined, triggerNode);
+function openSearch(triggerNode, triggeredByTouch) {
+  return openMenu(undefined, triggerNode, triggeredByTouch);
 }
 
 /**

src/shared/components/TopcoderFooter/style.scss

@@ -47,7 +47,7 @@
   }
 }
 
-@media only screen and (max-width: 1024px) {
+@include xxs-to-sm {
   .link {
     display: block;
   }

src/shared/components/TopcoderHeader/desktop/SubMenu/Item/index.jsx

@@ -12,11 +12,12 @@ export default function Item({
   icon,
   link,
   title,
+  closeMenu,
 }) {
   let styleName = 'item';
   if (currentSubMenuTitle === title) styleName += ' current';
   return (
-    <li styleName={styleName}>
+    <li styleName={styleName} onClick={closeMenu}>
       <Link to={link}>
         {icon}
         {title}
@@ -30,4 +31,5 @@ Item.propTypes = {
   icon: PT.node.isRequired,
   link: PT.string.isRequired,
   title: PT.string.isRequired,
+  closeMenu: PT.func.isRequired,
 };

src/shared/components/TopcoderHeader/desktop/SubMenu/index.jsx

@@ -18,6 +18,7 @@ export default function SubMenu({
     items = menu.items.map(item => (
       <Item
         currentSubMenuTitle={currentSubMenuTitle}
+        closeMenu={closeMenu}
         key={item.title}
         {...item}
       />