Search

src/components/AccountMenu/index.js

@@ -41,7 +41,7 @@ class AccountMenu extends React.Component {
 
   render () {
     const {
-      onClose, onClickNotifications, numNotifications, open, menu, switchText, onSwitch, profile
+      onClose, open, menu, switchText, onSwitch, profile
     } = this.props
 
     return (
@@ -82,7 +82,7 @@ class AccountMenu extends React.Component {
               onClick={onSwitch}
             >
               <IconSwitchBusiness className={styles['switch-icon']} />
-              <Link to={hasAccess(profile.roles)? _.isEmpty(switchText.href) ? switchText.link : switchText.href : 'http://www.topcoder.com'} onClick={onClose}>
+              <Link to={hasAccess(profile.roles) ? _.isEmpty(switchText.href) ? switchText.link : switchText.href : 'http://www.topcoder.com'} onClick={onClose}>
                 <span className={styles['switch-to-busniness']}>{switchText.title}</span>
               </Link>
             </div>
@@ -112,8 +112,6 @@ AccountMenu.propTypes = {
   onClose: PropTypes.func,
   menu: PropTypes.array,
   switchText: PropTypes.shape(),
-  numNotifications: PropTypes.number,
-  onClickNotifications: PropTypes.func,
   onSwitch: PropTypes.func,
   profile: PropTypes.shape()
 }

src/components/TopNav/MobileNav.js

@@ -3,8 +3,10 @@ import PropTypes from 'prop-types'
 import styles from './MobileNav.module.scss'
 import IconClose from '../../assets/images/icon-close.svg'
 import IconMenu from '../../assets/images/icon-menu.svg'
+import IconMagnifyingGlass from '../../assets/images/magnifying_glass.svg'
+import { config } from 'topcoder-react-utils'
 
-const MobileNav = ({ showLeftMenu, onClickLeftMenu, logo, rightMenu }) => (
+const MobileNav = ({ showLeftMenu, onClickLeftMenu, logo, rightMenu }) => (<div>
   <div className={styles.mobileNav}>
     <div className={styles.leftMenuContainer}>
       <button className={styles.menuBtn} onClick={onClickLeftMenu}>
@@ -24,6 +26,23 @@ const MobileNav = ({ showLeftMenu, onClickLeftMenu, logo, rightMenu }) => (
       </div>
     )}
   </div>
+  {showLeftMenu && (
+    <div className={styles.search}>
+      <IconMagnifyingGlass className={styles.icon} />
+      <input
+        onKeyPress={(event) => {
+          if (event.key === 'Enter') {
+            window.location = `${config.URL.BASE}/search/members?q=${
+              encodeURIComponent(event.target.value)
+            }`
+          }
+        }}
+        placeholder='Find members by username or skill'
+        aria-label='Find members by username or skill'
+      />
+    </div>
+  )}
+</div>
 )
 
 MobileNav.propTypes = {

src/components/TopNav/MobileNav.module.scss

@@ -43,3 +43,46 @@
     right: 0;
   }
 }
+
+.icon {
+  @include mobile-only;
+  left: 18px;
+  position: absolute;
+  top: 16px;
+}
+
+.search {
+  @include mobile-only;
+  padding: 6px 12px 0;
+  position: relative;
+
+  input {
+    background: none;
+    border: 1px solid $gray-50;
+    box-shadow: none;
+    color: $white;
+    font: 16px "Roboto", Helvetica, Arial, sans-serif !important;
+    height: 32px;
+    outline: none;
+    padding-left: 30px !important;
+
+    &::placeholder {
+      color: $gray-50;
+    }
+
+    &:hover {
+      border: 1px solid $gray-50;
+    }
+
+    &:focus {
+      border: 1px solid $blue;
+    }
+  }
+
+  input:active,
+  input:focus,
+  input:hover {
+    box-shadow: none;
+    outline: none;
+  }
+}

src/components/TopNav/PrimaryNav.js

@@ -4,7 +4,11 @@ import cn from 'classnames'
 import ResizeDetector from 'react-resize-detector'
 import ChosenArrow from '../ChosenArrow'
 import IconArrowSmalldown from '../../assets/images/arrow-small-down.svg'
+import MagnifyingGlass from '../../assets/images/magnifying_glass.svg'
 import styles from './PrimaryNav.module.scss'
+import { config } from 'topcoder-react-utils'
+
+const BASE_URL = config.URL.BASE
 
 const PrimaryNav = ({
   collapsed,
@@ -26,93 +30,146 @@ const PrimaryNav = ({
   createHandleClickMoreItem,
   createSetRef,
   showChosenArrow,
-  chosenArrowX
+  chosenArrowX,
+  searchOpened,
+  toggleSearchOpen
 }) => {
   const filterNotInMore = menu => !(moreMenu || []).find(x => x.id === menu.id)
-
+  const activeTrigger = {
+    bottom: 50 // The main nav head bottom Y
+  }
   return (
-    <div className={cn(styles.primaryNavContainer, showLeftMenu && styles.primaryNavContainerOpen)}>
-      <div className={styles.primaryNav} ref={createSetRef('primaryNav')}>
-        <a
-          className={cn(styles.tcLogo, collapsed && styles.tcLogoPush)}
-          onClick={onClickLogo}
-          href='/'
-        >
-          {logo}
-        </a>
-        {menu.map((level1, i) => ([
-          <span className={styles.primaryLevel1Separator} key={`separator-${i}`} />,
-          /* Level 1 menu item */
+    <div>
+      <div className={cn(styles.primaryNavContainer, showLeftMenu && styles.primaryNavContainerOpen)}>
+        <div className={styles.primaryNav} ref={createSetRef('primaryNav')}>
           <a
-            className={cn(styles.primaryLevel1, !activeLevel2Id && level1.id === activeLevel1Id && styles.primaryLevel1Open, level1.mobileOnly && styles.mobileOnly)}
-            href={level1.href}
-            key={`level1-${i}`}
-            onClick={createHandleClickLevel1(level1.id, true)}
-            ref={createSetRef(level1.id)}
+            className={cn(styles.tcLogo, collapsed && styles.tcLogoPush)}
+            onClick={onClickLogo}
+            href='/'
           >
-            {level1.title}
-          </a>,
-          /* Level 2 menu */
-          level1.subMenu && (
-            <div
-              className={cn(styles.primaryLevel2Container, level1.id === activeLevel1Id && styles.primaryLevel2ContainerOpen)}
-              key={`level2-${i}-container`}
-              ref={createSetRef(`level2Container${i}`)}
+            {logo}
+          </a>
+          {menu.map((level1, i) => ([
+            <span className={styles.primaryLevel1Separator} key={`separator-${i}`} />,
+            /* Level 1 menu item */
+            <a
+              className={cn(styles.primaryLevel1, !activeLevel2Id && level1.id === activeLevel1Id && styles.primaryLevel1Open, level1.mobileOnly && styles.mobileOnly)}
+              href={level1.href}
+              key={`level1-${i}`}
+              onClick={createHandleClickLevel1(level1.id, true)}
+              ref={createSetRef(level1.id)}
             >
-              {level1.subMenu.filter(filterNotInMore).map((level2, i) => (
-                <a
-                  className={cn(styles.primaryLevel2, level2.id === activeLevel2Id && styles.primaryLevel2Open)}
-                  href={level2.href}
-                  key={`level2-${i}`}
-                  onClick={createHandleClickLevel2(level2.id, true)}
-                  ref={createSetRef(level2.id)}
-                >
-                  {level2.title}
-                </a>
-              ))}
-              {/* The More menu */}
-              {level1.id === activeLevel1Id && moreMenu && moreMenu.length > 0 && (
-                <div className={cn(styles.moreBtnContainer, openMore && styles.moreOpen)}>
-                  <div className={styles.backdrop} onClick={onCloseMore} />
-                  <button
-                    className={cn(styles.primaryLevel2, styles.moreBtn)}
-                    onClick={handleClickMore}
-                    ref={createSetRef(moreId)}
+              {level1.title}
+            </a>,
+            /* Level 2 menu */
+            level1.subMenu && (
+              <div
+                className={cn(styles.primaryLevel2Container, level1.id === activeLevel1Id && styles.primaryLevel2ContainerOpen)}
+                key={`level2-${i}-container`}
+                ref={createSetRef(`level2Container${i}`)}
+              >
+                {level1.subMenu.filter(filterNotInMore).map((level2, i) => (
+                  <a
+                    className={cn(styles.primaryLevel2, level2.id === activeLevel2Id && styles.primaryLevel2Open)}
+                    href={level2.href}
+                    key={`level2-${i}`}
+                    onClick={createHandleClickLevel2(level2.id, true)}
+                    ref={createSetRef(level2.id)}
                   >
-                    <div className={styles.moreBtnMask} />
-                    <span>More</span>
-                    <IconArrowSmalldown />
-                  </button>
-                  <div className={styles.moreContentContainer}>
-                    {moreMenu.map((menu, i) => (
-                      <a
-                        className={cn(styles.primaryLevel2, menu.id === activeLevel2Id && styles.primaryLevel2Open)}
-                        href={menu.href}
-                        key={`more-item-${i}`}
-                        onClick={createHandleClickMoreItem(menu.id)}
-                      >
-                        {menu.title}
-                      </a>
-                    ))}
+                    {level2.title}
+                  </a>
+                ))}
+                {/* The More menu */}
+                {level1.id === activeLevel1Id && moreMenu && moreMenu.length > 0 && (
+                  <div className={cn(styles.moreBtnContainer, openMore && styles.moreOpen)}>
+                    <div className={styles.backdrop} onClick={onCloseMore} />
+                    <button
+                      className={cn(styles.primaryLevel2, styles.moreBtn)}
+                      onClick={handleClickMore}
+                      ref={createSetRef(moreId)}
+                    >
+                      <div className={styles.moreBtnMask} />
+                      <span>More</span>
+                      <IconArrowSmalldown />
+                    </button>
+                    <div className={styles.moreContentContainer}>
+                      {moreMenu.map((menu, i) => (
+                        <a
+                          className={cn(styles.primaryLevel2, menu.id === activeLevel2Id && styles.primaryLevel2Open)}
+                          href={menu.href}
+                          key={`more-item-${i}`}
+                          onClick={createHandleClickMoreItem(menu.id)}
+                        >
+                          {menu.title}
+                        </a>
+                      ))}
+                    </div>
                   </div>
-                </div>
-              )}
+                )}
+              </div>
+            )
+          ]))}
+          <ChosenArrow show={showChosenArrow} x={chosenArrowX} />
+        </div>
+        <div className={styles.primaryNavRight}>
+          <ResizeDetector
+            handleWidth
+            onResize={onRightMenuResize}
+          />
+          {rightMenu && (
+            <div className={styles.primaryLevel1}>
+              {rightMenu}
             </div>
-          )
-        ]))}
-        <ChosenArrow show={showChosenArrow} x={chosenArrowX} />
+          )}
+          <div
+            aria-label='Find members by username or skill'
+            role='button'
+            tabIndex={0}
+            data-menu='search'
+            className={cn(styles.searchIcon, { opened: searchOpened })}
+            onFocus={() => toggleSearchOpen(true)}
+            onBlur={(event) => {
+              if (event.pageY < activeTrigger.bottom) {
+                toggleSearchOpen(false)
+              }
+            }}
+            onMouseEnter={(event) => toggleSearchOpen(true)}
+            onMouseLeave={(event) => {
+              console.log(`${event.clientX} - ${event.clientY}`)
+              if (event.pageY < activeTrigger.bottom) {
+                toggleSearchOpen(false)
+              }
+            }}
+            onTouchStart={(event) => {
+              if (searchOpened) {
+                toggleSearchOpen(false)
+              } else {
+                toggleSearchOpen(true)
+              }
+            }}
+          >
+            <MagnifyingGlass />
+          </div>
+        </div>
       </div>
-
-      <div className={styles.primaryNavRight}>
-        <ResizeDetector
-          handleWidth
-          onResize={onRightMenuResize}
+      <div
+        role='search'
+        className={cn(styles.searchField, { opened: searchOpened, closed: !searchOpened })}
+        onMouseLeave={(event) => { toggleSearchOpen(false) }}
+      >
+        <input
+          ref={createSetRef('searchInputBox')}
+          onKeyPress={(event) => {
+            if (event.key === 'Enter') {
+              window.location = `${BASE_URL}/search/members?q=${
+                encodeURIComponent(event.target.value)
+              }`
+            }
+          }}
+          onBlur={() => toggleSearchOpen(false)}
+          aria-label='Find members by username or skill'
+          placeholder='Find members by username or skill'
         />
-        {rightMenu && (
-          <div className={styles.primaryLevel1}>
-            {rightMenu}
-          </div>
-        )}
       </div>
     </div>
   )
@@ -138,7 +195,9 @@ PrimaryNav.propTypes = {
   createHandleClickMoreItem: PropTypes.func,
   createSetRef: PropTypes.func,
   showChosenArrow: PropTypes.bool,
-  chosenArrowX: PropTypes.number
+  chosenArrowX: PropTypes.number,
+  searchOpened: PropTypes.bool,
+  toggleSearchOpen: PropTypes.func
 }
 
 export default PrimaryNav