Bugfix/#15 nav elements broken

src/components/Nav/Nav.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import NavBrand from './NavBrand'
+import NavItem from './NavItem'
 import NavLeft from './NavLeft'
-import NavCenter from './NavCenter'
 import NavRight from './NavRight'
-import NavItem from './NavItem'
 import NavToggle from './NavToggle'
 import classNames from 'classnames'
 
@@ -16,7 +16,7 @@ const Nav = ({
   className,
   ...props
 }) => {
-  const classes = classNames('nav', {
+  const classes = classNames('navbar', {
     'has-shadow': hasShadow
   }, className)
 
@@ -35,8 +35,8 @@ Nav.defaultProps = {
   as: 'nav'
 }
 
+Nav.Brand = NavBrand
 Nav.Left = NavLeft
-Nav.Center = NavCenter
 Nav.Right = NavRight
 Nav.Item = NavItem
 Nav.Toggle = NavToggle

src/components/Nav/NavBrand.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+const NavBrand = ({
+  as: Div,
+  className,
+  ...props
+}) => {
+  const classes = classNames('navbar-brand', className)
+
+  return <Div className={classes} {...props} />
+}
+
+NavBrand.displayName = 'Nav.Brand'
+
+NavBrand.propTypes = {
+  as: PropTypes.node,
+  className: PropTypes.string
+}
+
+NavBrand.defaultProps = {
+  as: 'div'
+}
+
+export default NavBrand

src/components/Nav/NavItem.js

@@ -6,16 +6,18 @@ const NavItem = ({
   as: Item,
   active,
   tab,
+  hasDropdown,
   hiddenTablet,
   hiddenMobile,
   className,
   ...props
 }) => {
-  const classes = classNames('nav-item', {
+  const classes = classNames('navbar-item', {
+    'has-dropdown': hasDropdown,
     'is-active': active,
-    'is-tab': tab,
+    'is-hidden-mobile': hiddenMobile,
     'is-hidden-tablet': hiddenTablet,
-    'is-hidden-mobile': hiddenMobile
+    'is-tab': tab
   }, className)
 
   return <Item className={classes} {...props} />
@@ -24,12 +26,13 @@ const NavItem = ({
 NavItem.displayName = 'Nav.Item'
 
 NavItem.propTypes = {
+  active: PropTypes.bool,
   as: PropTypes.node,
   className: PropTypes.string,
-  active: PropTypes.bool,
-  tab: PropTypes.bool,
+  hasDropdown: PropTypes.bool,
+  hiddenMobile: PropTypes.bool,
   hiddenTablet: PropTypes.bool,
-  hiddenMobile: PropTypes.bool
+  tab: PropTypes.bool
 }
 
 NavItem.defaultProps = {

src/components/Nav/NavLeft.js

@@ -7,7 +7,7 @@ const NavLeft = ({
   className,
   ...props
 }) => {
-  const classes = classNames('nav-left', {
+  const classes = classNames('navbar-start', {
     'nav-menu': menu
   }, className)
 

src/components/Nav/NavRight.js

@@ -7,7 +7,7 @@ const NavRight = ({
   className,
   ...props
 }) => {
-  const classes = classNames('nav-right', {
+  const classes = classNames('navbar-end', {
     'nav-menu': menu
   }, className)
 

src/components/Nav/NavToggle.js

@@ -7,7 +7,7 @@ const NavToggle = ({
   className,
   ...props
 }) => {
-  const classes = classNames('nav-toggle', className)
+  const classes = classNames('navbar-burger', className)
 
   return (
     <Toggle className={classes} {...props}>

src/components/Nav/Readme.md

@@ -1,8 +1,7 @@
 The `nav` container can have 3 parts:
 
-- `nav-left`
-- `nav-center`
-- `nav-right`
+- `navbar-start`
+- `navbar-end`
 
 Each nav item needs to be wrapped in a `nav-item` element.
 
@@ -19,19 +18,17 @@ For responsiveness, 2 additional classes are available:
       <img src="http://bulma.io/images/bulma-logo.png" alt="Bulma logo"/>
     </Nav.Item>
   </Nav.Left>
-
-  <Nav.Center>
-    <Nav.Item>
-      <Icon>
-        <i className="fa fa-github"/>
-      </Icon>
-    </Nav.Item>
-    <Nav.Item>
-      <Icon>
-        <i className="fa fa-twitter"/>
-      </Icon>
-    </Nav.Item>
-  </Nav.Center>
+
+  <Nav.Item>
+    <Icon>
+      <i className="fa fa-github"/>
+    </Icon>
+  </Nav.Item>
+  <Nav.Item>
+    <Icon>
+      <i className="fa fa-twitter"/>
+    </Icon>
+  </Nav.Item>
 
   <Nav.Toggle/>
   <Nav.Right menu>
@@ -104,5 +101,3 @@ To optimise the space on desktop, but also allow the mobile view to be usable, y
   </Container>
 </Nav>
 ```
-
-