Adiciona menu colapsado para telas menores que 1080

Enegrecer · Apr 2, 2018 · 8c82751 · 8c82751
1 parent 16bddab
commit 8c82751
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 37 deletions.
diff --git a/public/index.html b/public/index.html
@@ -8,6 +8,7 @@
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:700|Roboto:400,700" rel="stylesheet">
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

diff --git a/src/components/menu/Menu.js b/src/components/menu/Menu.js
@@ -4,23 +4,80 @@ import logo from '../../imagens/logo.svg';
 import './menu.css';
 
 export default class Menu extends Component {
-  componentWillMount() {
+  constructor(props) {
+    super(props);
+    this.state = {
+      windowWidth: window.innerWidth,
+      mobileNavVisible: false
+    };
+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', screenSize => this.handleResize(screenSize));
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', screenSize => this.handleResize(screenSize));
+  }
+
+  handleResize() {
+    this.setState({ windowWidth: window.innerWidth });
+  }
+
+  handleNavClick() {
+    if (!this.state.mobileNavVisible) {
+      this.setState({ mobileNavVisible: true });
+    } else {
+      this.setState({ mobileNavVisible: false });
+    }
+  }
+
+  navigationLinks() {
+    return [
+      <ul>
+        <li key={1}><Link to="/sobre">SOBRE</Link></li>
+        <li key={2}><Link to="/depois-denuncia">E DEPOIS DA DENÚNCIA?</Link></li>
+        <li key={3}><Link to="/coletivo-enegrecer">O COLETIVO ENEGRECER</Link></li>
+        <li key={4}><Link to="/denunciar">DENUNCIAR</Link></li>
+      </ul>
+    ];
+  }
+
+  renderMobileNav() {
+    if (this.state.mobileNavVisible) {
+      return this.navigationLinks();
+    }
+    return null;
+  }
+
+  renderNavigation() {
+    if (this.state.windowWidth <= 1080) {
+      return [
+        <div key={7} className="mobile_nav">
+          <a
+            role="button"
+            tabIndex="0"
+            onClick={elementClicked => this.handleNavClick(elementClicked)}
+          >
+            <i className="material-icons icon-white">menu</i></a>
+          {this.renderMobileNav()}
+        </div>
+      ];
+    }
+    return [
+      <div key={7} className="links">
+        {this.navigationLinks()}
+      </div>
+    ];
   }
 
   render() {
     return (
-      <div className="col s12 menu">
+      <div className="menu">
         <div className="logo">
-          <Link to="/">
-            <img src={logo} alt="Logo Verdade Seja Dita" />
-          </Link>
-        </div>
-        <div className="links">
-          <Link to="/sobre">SOBRE</Link>
-          <Link to="/depois-denuncia">E DEPOIS DA DENÚNCIA?</Link>
-          <Link to="/coletivo-enegrecer">O COLETIVO ENEGRECER</Link>
-          <Link to="/denunciar">DENUNCIAR</Link>
+          <Link to="/"><img src={logo} alt="Logo Verdade Seja Dita" /></Link>
         </div>
+        {this.renderNavigation()}
       </div>
     );
   }

diff --git a/src/components/menu/__snapshots__/Menu.test.js.snap b/src/components/menu/__snapshots__/Menu.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Menu deve construir a pagina corretamente  1`] = `
 <div
-  className="col s12 menu"
+  className="menu"
 >
   <div
     className="logo"
@@ -18,32 +18,20 @@ exports[`Menu deve construir a pagina corretamente  1`] = `
     </Link>
   </div>
   <div
-    className="links"
+    className="mobile_nav"
+    key="7"
   >
-    <Link
-      replace={false}
-      to="/sobre"
-    >
-      SOBRE
-    </Link>
-    <Link
-      replace={false}
-      to="/depois-denuncia"
+    <a
+      onClick={[Function]}
+      role="button"
+      tabIndex="0"
     >
-      E DEPOIS DA DENÚNCIA?
-    </Link>
-    <Link
-      replace={false}
-      to="/coletivo-enegrecer"
-    >
-      O COLETIVO ENEGRECER
-    </Link>
-    <Link
-      replace={false}
-      to="/denunciar"
-    >
-      DENUNCIAR
-    </Link>
+      <i
+        className="material-icons icon-white"
+      >
+        menu
+      </i>
+    </a>
   </div>
 </div>
 `;
diff --git a/src/components/menu/menu.css b/src/components/menu/menu.css
@@ -14,11 +14,15 @@
 
 .links {
   width: 59%;
+}
+
+.links > ul{
+
   display: flex;
   justify-content: space-between;
 }
 
-.links a {
+.links ul > li > a {
   padding:5px;
   font-family: Roboto;
   font-size: 14px;
@@ -30,3 +34,39 @@
   text-align: center;
   color: #c3c3c3;
 }
+
+.mobile_nav {
+  padding-left: 20%;
+  z-index: 999;
+}
+
+.mobile_nav > ul {
+  position: absolute;
+  width: auto;
+  margin-top: 2%;
+  margin-left: 10%;
+}
+
+.mobile_nav ul > li > a {
+  background-color: #eee;
+  font-family: Roboto;
+  font-size: 14px;
+  font-weight: 500;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  text-align: center;
+  color: black;
+  display: block;
+  padding: 8%;
+  text-decoration: none;
+}
+
+
+i.icon-white {
+  color: white;
+  position: absolute;
+  top: 30px;
+  margin-left: 30%;
+}