Another navbar

Author: kirbyk

themes/mongodb-tutorials/Gulpfile.js

@@ -110,6 +110,29 @@ gulp.task('js:build-navbar', function() {
     .pipe(gulp.dest('./static/js/'))
 })
 
+gulp.task('js:build-navbar-landing', function() {
+  gulp.src('./src/navbar-landing.js')
+    .pipe(webpack({
+      output: {
+        filename: 'navbar-landing.js'
+      },
+      devtool: 'source-maps',
+      module: {
+        loaders: [
+          {
+            test: /\.js$/,
+            loader: 'babel-loader',
+            query: {
+              presets: ['es2015', 'react'],
+              plugins: ['transform-class-properties']
+            }
+          }
+        ]
+      }
+    }))
+    .pipe(gulp.dest('./static/js/'))
+})
+
 gulp.task('js', ['js:build-home', 'js:build-single'])
 
 gulp.task('watch', function() {

themes/mongodb-tutorials/src/navbar-landing.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+import Navbar from './navbar.js'
+
+const baseURL = 'http://localhost:8000'
+
+class NavbarDocs extends React.Component {
+  constructor (props) {
+    super(props)
+  }
+
+  render () {
+    return (
+      <Navbar baseURL={baseURL}>
+        <input type="search" className="navbar-search" placeholder="Search" />
+      </Navbar>
+    )
+  }
+}
+
+ReactDOM.render(<NavbarDocs />, document.getElementById('navbar-landing'))