initial commit

comps/Header.js

@@ -0,0 +1,75 @@
+import React, { Component } from 'react';
+import { withRouter } from 'next/router'; 
+import { connect } from 'react-redux'; 
+import { doLogout } from '../redux/actions/userAct'; 
+import Link from 'next/link';
+import getUrl from '../util/getUrl'; 
+import mapUser from '../util/mapUser'; 
+
+const NavLink = ({ children, href, active }) => {
+  const activeClass = active ? ' active' : ''; 
+  return (
+    <Link href={href} as={getUrl(href)}>
+      <a className={activeClass}>{children}</a>
+    </Link>
+  );
+};
+const navItems = [
+  ['/', 'Home'],
+  ['/new', 'New Doc'],
+  ['/settings', 'Settings']
+];
+
+class Header extends Component {
+  state = {
+    open: false
+  }
+  hideNav = () => this.setState({ open: false }); 
+  toggleNav = () => this.setState({ 
+    open: !this.state.open 
+  });
+  isActive = url => (
+    getUrl(this.props.router.pathname) === getUrl(url)
+  );
+  logout = e => {
+    e.preventDefault();
+    this.hideNav(); 
+    doLogout(); 
+  }; 
+
+  render() { 
+    const expandClass = this.state.open ? ' active' : ''; 
+    const { user } = this.props;
+    return(
+      <nav className='navbar' role='navigation' aria-label='main navigation'>
+        <div className='navbar-brand'>
+          <NavLink href='/'>
+            <h3 onClick={this.hideNav}>MYKB</h3>
+          </NavLink>
+        </div>
+
+        {!user.email ? null
+          : [
+            <div className={'navbar-burger ' + expandClass} 
+              onClick={this.toggleNav} key='burger'
+            >
+              <div /><div /><div />
+            </div>,
+            <div className={'navbar-items' + expandClass} key='items'>
+              {navItems.map(item => (
+                <NavLink key={item[0]} href={item[0]} 
+                  active={this.isActive(item[0])}
+                >
+                  <p className='item' onClick={this.hideNav}>{item[1]}</p>
+                </NavLink>
+              ))}
+              <a href='/logout' onClick={this.logout}>
+                <p className='item'>Logout</p>
+              </a>
+            </div> 
+          ]}
+      </nav>
+    );
+  }
+}
+export default withRouter(connect(mapUser)(Header));