Task 12 1

components/Dropdown/Dropdown.jsx

@@ -1,12 +1,18 @@
-'use strict'
-
 require('./Dropdown.scss')
-const React    = require('react')
 
-const Dropdown = {
-  getInitialState() {
-    return { isHidden: true }
-  },
+import React, { Component } from 'react'
+
+class Dropdown extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = { isHidden: true }
+
+    this.onClickOutside = this.onClickOutside.bind(this)
+    this.onClick = this.onClick.bind(this)
+    this.onClickOtherDropdown = this.onClickOtherDropdown.bind(this)
+  }
+
   onClickOutside(evt) {
     let currNode = evt.target
     let isDropdown = false
@@ -18,34 +24,42 @@ const Dropdown = {
       }
 
       currNode = currNode.parentNode
+
+      if(!currNode.tagName)
+        break
     } while(currNode.tagName)
 
     if(!isDropdown) {
       this.setState({ isHidden: true })
     }
-  },
+  }
+
   onClick(evt) {
     const dropdownClicked = new Event('dropdownClicked')
 
     document.dispatchEvent(dropdownClicked)
 
     this.setState({ isHidden: !this.state.isHidden })
     evt.stopPropagation()
-  },
+  }
+
   onClickOtherDropdown() {
     this.setState({ isHidden: true })
-  },
+  }
+
   componentDidMount() {
     document.removeEventListener('click', this.onClickOutside)
     document.removeEventListener('dropdownClicked', this.onClickOtherDropdown)
 
     document.addEventListener('click', this.onClickOutside)
     document.addEventListener('dropdownClicked', this.onClickOtherDropdown)
-  },
+  }
+
   componentWillUnmount() {
     document.removeEventListener('click', this.onClickOutside)
     document.removeEventListener('dropdownClicked', this.onClickOtherDropdown)
-  },
+  }
+
   render() {
     const pointerShadow = this.props.pointerShadow
     const noPointer = this.props.noPointer
@@ -70,14 +84,24 @@ const Dropdown = {
 
     return (
       <div className="dropdown-wrap" onClick={ this.onClick } ref="Dropdown">
-        { this.props.children[0] }
+        {
+          this.props.children.map((child) => {
+            if(child.props.className.indexOf('dropdown-menu-header') > -1)
+              return child
+          })
+        }
 
         <div className = {ndClasses}>
-          { this.props.children[1] }        
+          {
+            this.props.children.map((child) => {
+              if(child.props.className.indexOf('dropdown-menu-list') > -1)
+                return child
+            })
+          }
         </div>
       </div>
     )
   }
 }
 
-module.exports = React.createClass(Dropdown)
+export default Dropdown

components/Dropdown/Dropdown.scss

@@ -1,4 +1,4 @@
-@import "work/work-includes";
+@import "topcoder/tc-includes";
 
 .Dropdown {
   margin-top: 30px;

components/Dropdown/DropdownExamples.jsx

@@ -1,8 +1,8 @@
-'use strict'
-
 require('./DropdownExamples.scss')
-const Dropdown = require('./Dropdown.jsx')
-const React    = require('react')
+
+import Dropdown from './Dropdown'
+import React from 'react'
+
 const items = [
   'Review',
   'Web Arena',
@@ -11,7 +11,7 @@ const items = [
 
 const DropdownExamples = {
   render() {
-    const dom = (
+    return (
       <section>
         <div className="dropdown-example full-width">
           <Dropdown pointerShadow>
@@ -93,8 +93,6 @@ const DropdownExamples = {
 
       </section>
     )
-
-    return dom
   }
 }
 

components/ExampleNav/ExampleNavContainer.coffee

@@ -9,7 +9,8 @@ navs =
     'UserDropdownMenuExamples',
     'QuickLinksExample',
     'SearchSuggestionsExamples',
-    'SearchBarExample'
+    'SearchBarExample',
+    'NavbarExample'
   ]
   FileUploader: [
     'FileUploaderContainerExamples'

components/Navbar/Navbar.jsx

@@ -0,0 +1,35 @@
+require('./Navbar.scss')
+
+import MenuBar from '../MenuBar/MenuBar'
+import React, { Component } from 'react'
+import SearchBar from '../SearchBar/SearchBar'
+import QuickLinks from '../QuickLinks/QuickLinks'
+import UserDropdownMenu from '../UserDropdownMenu/UserDropdownMenu'
+
+const primaryNavigationItems = [
+  {img: '../components/MenuBar/nav-community.svg', text: 'Community', link: 'javascript:;'},
+  {img: '../components/MenuBar/nav-compete.svg', text: 'Compete', link: 'javascript:;', selected: true},
+  {img: '../components/MenuBar/nav-learn.svg', text: 'Learn', link: 'javascript:;'}
+]
+
+class Navbar extends Component {
+  render() {
+    return (
+      <div className="Navbar flex middle space-between">
+        <div className="topcoder-logo"></div>
+        <div className="search-bar-wrap">
+          <div className="icon-placeholder"></div>
+          <SearchBar />
+        </div>
+        <MenuBar items={primaryNavigationItems} mobileBreakPoint={767} orientation="horizontal" />
+        <div className="collapse-group">
+          <div className="icon-placeholder"></div>
+          <div className="quick-links-wrap"><QuickLinks /></div>
+          <UserDropdownMenu username="vic-tor" />
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Navbar

components/Navbar/Navbar.scss

@@ -0,0 +1,156 @@
+@import "topcoder/tc-includes";
+
+$navbar-bg: #FAFAFB;
+$border-color: #CFCFD2;
+$placeholder-bg: #B47DD6;
+
+/* Breakpoints - update as necessary */
+$mobile: 768px;
+$super-wide: 1376px;
+
+.Navbar {
+  height: 60px;
+  background-color: $navbar-bg;
+  border-bottom: 1px solid $border-color;
+  padding: 10px 20px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+
+  @media screen and (max-width: $mobile) {
+    height: 40px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .topcoder-logo {
+    width: 56px;
+    height: 24px;
+    background-color: $placeholder-bg;
+    margin-right: 40px;
+    flex: 0 0 auto;
+
+    @media screen and (min-width: $super-wide) {
+      width: 155px;
+    }
+
+    @media screen and (max-width: $mobile) {
+      width: 40px;
+      margin-right: 15px;
+      order: 1;
+    }
+  }
+
+  .search-bar-wrap {
+    flex: 1 1 auto;
+    margin-right: 35px;
+
+    @media screen and (min-width: $super-wide) {
+      margin-right: 32px;
+    }    
+
+    @media screen and (max-width: $mobile) {
+      flex: 0 0 60px;
+      order: 2;
+      background-color: $accent-gray;
+      width: 60px;
+      height: 40px;
+      display: flex;
+      margin-right: 10px;
+    }
+
+    .icon-placeholder {
+      display: none;
+
+      @media screen and (max-width: $mobile) {
+        display: block;
+        height: 25px;
+        width: 25px;
+        background-color: $placeholder-bg;
+        margin: auto;
+      }
+    }
+
+    .SearchBar {
+      margin-right: 45px;
+      max-width: 789px;
+
+      @media screen and (max-width: $mobile) {
+        display: none;
+      }
+    }
+  }
+
+  .MenuBar {
+    margin-right: 30px;
+
+    @media screen and (max-width: $mobile) {
+      order: 1;
+      margin-right: 7px;
+    }
+
+    &.horizontal li {
+      position: relative;
+
+      a {
+        @media screen and (max-width: $mobile) {
+          padding-bottom: 0;
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+      }
+    }
+  }
+
+  .collapse-group {
+    flex: 0 0 auto;
+    position: relative;
+
+    @media screen and (max-width :$mobile) {
+      width: 40px;
+      height: 40px;
+      order: 3;
+      cursor: pointer;
+    }
+
+    .icon-placeholder {
+
+      @media screen and (max-width: $mobile) {
+        display: block;
+        height: 24px;
+        width: 24px;
+        background-color: $placeholder-bg;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    .quick-links-wrap {
+      margin-right: 30px;
+      display: inline-block;
+      vertical-align: middle;
+
+      @media screen and (max-width: $mobile) {
+        display: none;
+      }
+
+      .Dropdown {
+        right: -46px;
+        top: 10px;
+      }
+    }
+
+    .UserDropdownMenu {
+      flex-shrink: 0;
+      background-color: transparent;
+
+      @media screen and (max-width: $mobile) {
+        display: none;
+      }
+    }
+  }
+}

components/Navbar/NavbarExample.jsx

@@ -0,0 +1,8 @@
+import Navbar from './Navbar'
+import React from 'react'
+
+const NavbarExample = () => (
+	<Navbar />
+)
+
+module.exports = NavbarExample

components/QuickLinks/QuickLinks.jsx

@@ -1,12 +1,11 @@
-'use strict'
-
 require('./QuickLinks.scss')
-const Dropdown = require('../Dropdown/Dropdown.jsx')
-const React    = require('react')
 
-import StandardListItem  from '../StandardListItem/StandardListItem.jsx'
+import React, { Component } from 'react'
+import Dropdown from '../Dropdown/Dropdown'
+
+import StandardListItem  from '../StandardListItem/StandardListItem'
 
-const QuickLinks = {
+class QuickLinks extends Component {
   render() {
     return (
       <div className="QuickLinks">
@@ -32,4 +31,4 @@ const QuickLinks = {
   }
 }
 
-module.exports = React.createClass(QuickLinks)
+export default QuickLinks