Removed unnecessary files

components/ExampleNav/ExampleNavContainer.coffee

@@ -16,7 +16,9 @@ navs =
     'ImageViewerExamples'
     'LoaderExamples',
     'PanelExamples',
-    'StandardListItemExamples'
+    'StandardListItemExamples',
+    'NavbarExample',
+    'QuickLinksExample'
   ]
   ManageSteps: [
     'ManageStepsExamples'

components/Navbar/Navbar.jsx

@@ -0,0 +1,39 @@
+'use strict'
+
+import MenuBar from '../MenuBar/MenuBar.jsx'
+
+require('./Navbar.scss')
+const React             = require('react')
+const SearchBar         = require('../SearchBar/SearchBar.jsx')
+const QuickLinks        = require('../QuickLinks/QuickLinks.jsx')
+const UserDropdownMenu  = require('../UserDropdownMenu/UserDropdownMenu.jsx')
+
+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:;'}
+]
+
+const Navbar = {
+  render() {
+    const dom = (
+      <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>
+    )
+
+    return dom
+  }
+}
+
+module.exports = React.createClass(Navbar)

components/Navbar/Navbar.scss

@@ -0,0 +1,121 @@
+@import "work/work-includes";
+
+$navbar-bg: #FAFAFB;
+$border-color: #CFCFD2;
+$placeholder-bg: #B47DD6;
+
+$iphone6: 768px;
+
+.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: $iphone6) {
+    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: 1376px) {
+      width: 155px;
+    }
+
+    @media screen and (max-width: $iphone6) {
+      width: 40px;
+      margin-right: 26px;
+      order: 1;
+    }
+  }
+
+  .search-bar-wrap {
+    .icon-placeholder {
+      display: none;
+
+      @media screen and (max-width: $iphone6) {
+        display: block;
+        height: 25px;
+        width: 25px;
+        background-color: $placeholder-bg;
+        margin: 9.5px;
+        order: 2;
+      }
+    }
+
+    .SearchBar {
+      margin-right: 45px;
+      max-width: 789px;
+
+      @media screen and (max-width: $iphone6) {
+        display: none;
+      }
+    }
+  }
+
+  .MenuBar {
+    margin-right: 30px;
+
+    @media screen and (max-width: $iphone6) {
+      order: 1;
+    }
+  }
+
+  .collapse-group {
+    flex: 1 0 auto;
+    position: relative;
+
+    @media screen and (max-width :$iphone6) {
+      width: 43px;
+      height: 43px;
+      background-color: #A3A3AE;
+      order: 3;
+    }
+
+    .icon-placeholder {
+      display: none;
+
+      @media screen and (max-width: $iphone6) {
+        display: initial;
+        height: 24px;
+        width: 24px;
+        background-color: $placeholder-bg;
+        margin: 10px;
+      }
+    }
+
+    .quick-links-wrap {
+      margin-right: 30px;
+      display: inline-block;
+
+      @media screen and (max-width: $iphone6) {
+        display: none;
+      }
+
+      .Dropdown {
+        right: -46px;
+        top: 10px;
+      }
+    }
+
+    .UserDropdownMenu {
+      flex-shrink: 0;
+      background-color: transparent;
+
+      @media screen and (max-width: $iphone6) {
+        display: none;
+      }
+    }
+  }
+}

components/Navbar/NavbarExample.jsx

@@ -0,0 +1,12 @@
+'use strict'
+
+const Navbar = require('./Navbar.jsx')
+const React    = require('react')
+
+const NavbarExample = {
+  render() {
+    return <Navbar />
+  }
+}
+
+module.exports = React.createClass(NavbarExample)

components/Router/Router.cjsx

@@ -19,6 +19,8 @@ ManageStepsExamples           = require '../ManageSteps/ManageStepsExamples.cjsx
 StepRowExamples               = require '../StepRow/StepRowExamples.cjsx'
 PanelExamples                 = require '../Panel/PanelExamples.jsx'
 StandardListItemExamples      = require '../StandardListItem/StandardListItemExamples.cjsx'
+NavbarExample                 = require '../Navbar/NavbarExample.jsx'
+QuickLinksExample             = require '../QuickLinks/QuickLinksExample.jsx'
 
 { Router, Route, Link, IndexRoute, browserHistory } = require 'react-router'
 
@@ -51,8 +53,12 @@ component = ->
         <Route path="/PanelExamples" component={PanelExamples} />
 
         <Route path="/StandardListItemExamples" component={StandardListItemExamples} />
+
+        <Route path="/NavbarExample" component={NavbarExample} />
+
+        <Route path="/QuickLinksExample" component={QuickLinksExample} />
       </Route>
     </Router>
   </Provider>
 
-module.exports = component
+module.exports = component