Fix #3198

Author: kkartunov

src/shared/components/Contentful/Menu/index.jsx

@@ -10,6 +10,7 @@ import PT from 'prop-types';
 import React from 'react';
 import { removeTrailingSlash } from 'utils/url';
 import { isActive, target } from 'utils/contentful';
+import { isomorphy } from 'topcoder-react-utils';
 
 import NavMenu from './Menu';
 
@@ -66,23 +67,93 @@ function MenuItemsLoader(props) {
               </div>
             );
           }
-          if (menuItem.fields.childRoutes && menuItem.fields.excludeFromNavigationMenus !== true && isActive(baseUrl, menuItem, 'childRoutes')) {
-            return (
-              <div className={themeToUse.submenu} key={menuItem.sys.id}>
-                <MenuItemsLoader
-                  menuId={menuItem.sys.id}
-                  ids={_.map(menuItem.fields.childRoutes, 'sys.id')}
+          if (menuItem.fields.childRoutes && menuItem.fields.excludeFromNavigationMenus !== true) {
+            if (menuItem.fields.url && menuItem.fields.url !== '/' && isActive(baseUrl, menuItem, 'childRoutes')) {
+              return (
+                <div className={themeToUse.submenu} key={menuItem.sys.id}>
+                  <MenuItemsLoader
+                    menuId={menuItem.sys.id}
+                    ids={_.map(menuItem.fields.childRoutes, 'sys.id')}
+                    preview={preview}
+                    themeName={themeName}
+                    theme={themeToUse}
+                    baseUrl={target(baseUrl, menuItem)}
+                    parentBaseUrl={baseUrl}
+                    parentItems={_.values(data.entries.items)}
+                    activeParentItem={menuItem}
+                    level={level + 1}
+                  />
+                </div>
+              );
+            }
+            if (!menuItem.fields.url || menuItem.fields.url === '/') {
+              // need to load the submenu to see if it matches for the location
+              // this is special case when we have sub menus under root "/"" path
+              // all other cases are covered by above rule.
+
+              // get the current location 1st
+              let location = '';
+              if (isomorphy.isClientSide()) {
+                location = window.location.pathname;
+                location = location.toLowerCase();
+                location = _.replace(location, '/__community__/tco19', '');
+              } else {
+                // TODO: should probably get the current URL from the web framework
+              }
+              // When we are at home/root just load the menu directly
+              if (!location || location === '/') {
+                return (
+                  <div className={themeToUse.submenu} key={menuItem.sys.id}>
+                    <MenuItemsLoader
+                      menuId={menuItem.sys.id}
+                      ids={_.map(menuItem.fields.childRoutes, 'sys.id')}
+                      preview={preview}
+                      themeName={themeName}
+                      theme={themeToUse}
+                      baseUrl={target(baseUrl, menuItem)}
+                      parentBaseUrl={baseUrl}
+                      parentItems={_.values(data.entries.items)}
+                      activeParentItem={menuItem}
+                      level={level + 1}
+                    />
+                  </div>
+                );
+              }
+              // In all other cases we need to load the menu items
+              // to check if some matches against location path
+              return (
+                <ContentfulLoader
+                  entryIds={_.map(menuItem.fields.childRoutes, 'sys.id')}
                   preview={preview}
-                  themeName={themeName}
-                  theme={themeToUse}
-                  baseUrl={target(baseUrl, menuItem)}
-                  parentBaseUrl={baseUrl}
-                  parentItems={_.values(data.entries.items)}
-                  activeParentItem={menuItem}
-                  level={level + 1}
+                  spaceName={spaceName}
+                  environment={environment}
+                  key={menuItem.sys.id}
+                  render={(childRoutesData) => {
+                    const links = _.values(childRoutesData.entries.items).map(childItem => `/${childItem.fields.url}`);
+                    if (links.some(link => location.startsWith(link))) {
+                      return (
+                        <div className={themeToUse.submenu} key={menuItem.sys.id}>
+                          <MenuItemsLoader
+                            menuId={menuItem.sys.id}
+                            ids={_.map(menuItem.fields.childRoutes, 'sys.id')}
+                            preview={preview}
+                            themeName={themeName}
+                            theme={themeToUse}
+                            baseUrl={target(baseUrl, menuItem)}
+                            parentBaseUrl={baseUrl}
+                            parentItems={_.values(data.entries.items)}
+                            activeParentItem={menuItem}
+                            level={level + 1}
+                          />
+                        </div>
+                      );
+                    }
+                    return null;
+                  }}
+                  renderPlaceholder={LoadingIndicator}
                 />
-              </div>
-            );
+              );
+            }
           }
           return null;
         }));