Split Nav

Author: marcodearaujo

app/components/LinksApp/LinksApp.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Router, Link } from 'react-router'
+
+class LinksApp extends React.Component
+{
+    constructor(props, context) {
+        super(props, context);
+        this.generate = this.generate.bind(this);
+        this.state = {
+            links: [
+                [ '/', 'Home'],
+                ['/client', 'Client'],
+                ['/area', 'Area']
+            ]
+        };
+    }
+
+    generate() {
+        return this.state.links.map((link, index) => (
+            <Link to={link[0]}
+                key={index}
+                className="nav-item is-tab"
+                onlyActiveOnIndex={true}
+                activeClassName="is-active"
+                onClick={this.props.hide}>{link[1]}
+            </Link>
+        ));
+    }
+
+    render() {
+        return (
+            <span className="nav-right nav-menu is-active">
+                {this.generate()}
+            </span>
+        );
+    }
+}
+
+LinksApp.propTypes = {
+    hide: React.PropTypes.func.isRequired,
+};
+
+export default LinksApp;
+

app/components/Menu/Menu.js

@@ -1,70 +1,27 @@
 import React from 'react';
 import { Router, Link } from 'react-router'
 
+import Nav from 'components/Nav/Nav'
+
 class Menu extends React.Component{
     constructor(props, context) {
         super(props, context);
         this.handleLogout = this.handleLogout.bind(this);
         this.handleView = this.handleView.bind(this);
-        this.toggleNav = this.toggleNav.bind(this);
-        this.handleLink = this.handleLink.bind(this);
-        this.createLink = this.createLink.bind(this);
-        this.state = {
-            toggleNav: '',
-            links: [
-                [ '/', 'Home'],
-                ['/client', 'Client'],
-                ['/area', 'Area']
-            ]
-        };
     }
 
     handleLogout() {
         delete localStorage.token;
         this.context.router.push("/");
     }
 
-    toggleNav() {
-        let isActive = this.state.toggleNav ? '' : 'is-active';
-        this.setState({toggleNav: isActive});
-    }
-
-    handleLink(e) {
-        this.setState({toggleNav: ''});
-    }
-
-    createLink() {
-        return this.state.links.map((link, index) => (
-            <Link to={link[0]}
-                key={index}
-                className="nav-item is-tab"
-                onlyActiveOnIndex={true}
-                activeClassName="is-active"
-                onClick={this.handleLink}>{link[1]}
-            </Link>
-        ));
-    }
-
     handleView() {
         return (
-            <nav className="nav has-shadow" id="top">
-                <div className="container">
-                    <div className="nav-left">
-                        <a className="nav-item" href="../index.html">IClient</a>
-                    </div>
-                    <span className={ `nav-toggle ${this.state.toggleNav}` } onClick={this.toggleNav}>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                    </span>
-                    <div className={ `nav-right nav-menu ${this.state.toggleNav}` }>
-                        {this.createLink()}
-                        <span className="nav-item">
-                            <a className="button" onClick={this.handleLogout}>Logout</a>
-                        </span>
-                    </div>
-                </div>
-            </nav>
+            <Nav>
+                <span className="nav-item">
+                    <a className="button" onClick={this.handleLogout}>Logout</a>
+                </span>
+            </Nav>
         );
     }
 

app/components/Nav/Nav.js

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import LinksApp from 'components/LinksApp/LinksApp'
+
+class Nav extends React.Component
+{
+    constructor(props, context) {
+        super(props, context);
+        this.toggleNav = this.toggleNav.bind(this);
+        this.hide = this.hide.bind(this);
+        this.state = {
+            toggleNav: ''
+        };
+    }
+
+    hide(e) {
+        this.setState({toggleNav: ''});
+    }
+
+    toggleNav() {
+        let isActive = this.state.toggleNav ? '' : 'is-active';
+        this.setState({toggleNav: isActive});
+    }
+
+    render() {
+        return (
+            <nav className="nav has-shadow" id="top">
+                <div className="container">
+                    <div className="nav-left">
+                        <a className="nav-item" href="../index.html">IClient</a>
+                    </div>
+                    <span className={ `nav-toggle ${this.state.toggleNav}` } onClick={this.toggleNav}>
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                    </span>
+                    <div className={ `nav-right nav-menu ${this.state.toggleNav}` }>
+                        <LinksApp hide={this.hide} />
+                        {this.props.children}
+                    </div>
+                </div>
+            </nav>
+        );
+    }
+}
+
+export default Nav;
+