mobile menu:built the mobile menu

Author: veiled-coder

src/Nav.js

@@ -6,38 +6,56 @@ import logo from "../src/images/meta.png";
 import Button from "./components/Button";
 import { faBars } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Link } from 'react-router-dom';
-
-
-
-function Nav() {
-
+import { Link } from "react-router-dom";
+import withToggler from "./components/HOCS/withToggler";
 
+function Nav({ toggleValue, Toggling }) {
+  console.log(toggleValue);
   return (
     <section className="nav--container grid">
-      <div className="nav-section_content">
-        <div className="logo--container">
-          <img src={home} alt="a home icon" className="home--img" />
-          <img src={logo} className="meta--logo" alt="metabnb logo" />
-        </div>
-        <nav>
-          <ul className="nav-links">
-            <li className="nav-link">Home</li>
-            <Link to='/place'><li className="nav-link">Place to stay</li></Link>
-            <li className="nav-link">NFTs</li>
-            <li className="nav-link">Community</li>
-          </ul>
-        </nav>
-        <div>
-          {" "}
-          <Button name="Connect wallet" styleclass="nav-btn"/>
-                </div>
-        <div className="hamburger-menu">
-          <FontAwesomeIcon icon={faBars} className="hamburger-menu" />
+      <div className="nav--container_2">
+        <div className="nav-section_content">
+          <div className="logo--container">
+            <img src={home} alt="a home icon" className="home--img" />
+            <img src={logo} className="meta--logo" alt="metabnb logo" />
+          </div>
+          <nav>
+            <ul className="nav-links">
+              <li className="nav-link">Home</li>
+              <Link to="/place">
+                <li className="nav-link">Place to stay</li>
+              </Link>
+              <li className="nav-link">NFTs</li>
+              <li className="nav-link">Community</li>
+            </ul>
+          </nav>
+          <div>
+            {" "}
+            <Button name="Connect wallet" styleclass="nav-btn" />
+          </div>
+
+          <div className="hamburger-menu" onClick={Toggling}>
+            <FontAwesomeIcon icon={faBars} className="hamburger-menu" />
+          </div>
         </div>
+        {/* TOGGLE MENU LIST */}
+        {toggleValue ? (
+          <div className="mobile-menu_list">
+            <Link to="/">
+              <p>Home</p>
+            </Link>
+            <Link to="/place">
+              <p>Place to stay</p>
+            </Link>
+            <p>NFTs</p>
+            <p>Community</p>
+          </div>
+        ) : (
+          ""
+        )}
       </div>
     </section>
   );
 }
 
-export default Nav;
+export default withToggler(Nav);

src/components/HOCS/withToggler.js

@@ -0,0 +1,31 @@
+import { React, Component } from "react";
+
+function withToggler(Component) {
+  return function (props) {
+    return <Toggler CalledComp={Component} {...props} />;
+  };
+}
+
+class Toggler extends Component {
+  state = {
+    togglestate: "false",
+  };
+  toggling = () => {
+    this.setState({ togglestate: !this.state.togglestate });
+  };
+
+  render() {
+    const TheCalledComp = this.props.CalledComp;
+
+    return (
+      <div>
+        <TheCalledComp
+          toggleValue={this.state.togglestate}
+          Toggling={this.toggling}
+        />
+      </div>
+    );
+  }
+}
+
+export default withToggler;

src/styles/nav.css

@@ -1,14 +1,38 @@
 .nav--container {
-  background: linear-gradient(124.4deg, #ffffff 10.8%, #ffffff 87.34%);
+  /* background: linear-gradient(124.4deg, #ffffff 10.8%, #ffffff 87.34%); */
   align-items: center;
+  
+  
+  
 }
-.nav-section_content {
+.nav--container_2{
   grid-column: center-start/center-end;
+  display: flex;
+  flex-direction: column;
+  
+}
+.nav-section_content {
+
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap:wrap ;
+  position: relative;
+  
+  padding: 1rem 0;
+}
+.mobile-menu_list{
+  align-self: flex-end;
+ 
+  
+  width: 100%;
+  text-align: right;
+  font-size: 1.5rem;
+  line-height: 2;
+ border-bottom: 1px solid #6F6CE1;
+  border-radius: 1rem;
 }
+
 .logo--container {
   display: flex;
   align-items: center;

src/styles/styles.css

@@ -17,7 +17,7 @@ div#root {
   max-width: 100%;
   height: 100vh;
   display: grid;
-  grid-template-rows: 12% min-content min-content;
+  grid-template-rows:  repeat(3,min-content);
 
 }
 a{
@@ -33,7 +33,7 @@ html {
     [right-start] minmax(3%, 1fr)
     [right-end center-start] repeat(8, minmax(min-content, 14rem))
     [center-end left-start] minmax(3%, 1fr) [left-end];
-  grid-template-rows: auto;
+
 }
 .purp {
   color: var(--purple);