Toggle when mobile view

marcodearaujo · marcodearaujo · commit 816cfc4e63bc · 2016-10-25T11:20:45.000-02:00
diff --git a/app/components/Menu/Menu.js b/app/components/Menu/Menu.js
@@ -6,29 +6,59 @@ class Menu extends React.Component{
         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.state = {
+            toggleNav: ''
+        };
     }
 
     handleLogout() {
         delete localStorage.token;
         this.context.router.push("/");
     }
 
+    toggleNav() {
+        if (this.state.toggleNav) {
+            this.setState({toggleNav: ''});
+        } else {
+            this.setState({toggleNav: 'is-active'});
+        }
+    }
+
+    handleLink(e) {
+        this.setState({toggleNav: ''});
+    }
+
     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">
+                    <span className={ `nav-toggle ${this.state.toggleNav}` } onClick={this.toggleNav}>
                         <span></span>
                         <span></span>
                         <span></span>
                     </span>
-                    <div className="nav-right nav-menu">
-                        <Link to="/" className="nav-item is-tab is-active">Home</Link>
-                        <Link to="/client" className="nav-item is-tab">Client</Link>
-                        <Link to="/area" className="nav-item is-tab">Area</Link>
+                    <div className={ `nav-right nav-menu ${this.state.toggleNav}` }>
+                        <Link to="/" 
+                            className="nav-item is-tab"
+                            onlyActiveOnIndex={true}
+                            activeClassName="is-active"
+                            onClick={this.handleLink}>Home
+                        </Link>
+                        <Link to="/client"
+                            className="nav-item is-tab"
+                            activeClassName="is-active"
+                            onClick={this.handleLink}>Client
+                        </Link>
+                        <Link to="/area"
+                            className="nav-item is-tab"
+                            activeClassName="is-active"
+                            onClick={this.handleLink}>Area
+                        </Link>
                         <span className="nav-item">
                             <a className="button" onClick={this.handleLogout}>Logout</a>
                         </span>
diff --git a/public/index.html b/public/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
         <title>React Client</title>
     </head>
     <body>
