Merge pull request #30 from Abusayid693/main

#27 nav responsive and hash links fixed

package.json

@@ -31,10 +31,13 @@
     "react-dom": "^17.0.2",
     "react-dropdown": "^1.9.2",
     "react-media-hook": "^0.4.9",
+    "react-responsive": "^9.0.0-beta.5",
     "react-reveal": "^1.2.2",
     "react-router-dom": "^5.2.0",
+    "react-router-hash-link": "^2.4.3",
     "react-scripts": "4.0.3",
     "react-typed": "^1.2.0",
+    "styled-components": "^5.3.3",
     "typed.js": "^2.0.12",
     "use-dark-mode": "^2.3.1",
     "web-vitals": "^1.1.2"

src/components/Main-page/HomePage.jsx

@@ -89,7 +89,7 @@ function FrequentlyAsked(props) {
 export default function HomePage(props) {
   return (
     <div className="Whole_div" style={{backgroundImage: `url(${pattern})`}}>
-      <div className="color_sectiom">
+      <div className="color_sectiom" id="home">
         <Container fluid>
           <Row className="Row info">
             <Col className="info-div" sm={12} lg={7} md={8}>
@@ -119,13 +119,13 @@ export default function HomePage(props) {
         </Row>
 
         {/* ********Frequently asked Questions here ***** */}
-        <div className="Myfaqs">
+        <div className="Myfaqs" id="faq">
         {frequentlyAskedQuestions.map(FrequentlyAsked)}
         {/* ********Frequently asked Questions ending here ***** */}
          </div>  
 
         {/* ********Prizes here ***** */}
-        <Row className="prizesection">
+        <Row className="prizesection" id="prizes">
           <PrizeHeading type="Prize section" />
           {Prizeinfo.map(PrizeGroup)}
         </Row>
@@ -138,7 +138,7 @@ export default function HomePage(props) {
 
         {/* ********Sponsors here ***** */}
 
-        <Row className="sponsorSection">
+        <Row className="sponsorSection" id="sponsors">
           <SponsorsHead />
           <SponsorUS />
           {sponsorLogos.map(SponsorGroup)}
@@ -148,7 +148,7 @@ export default function HomePage(props) {
         <Birds top="120vh" left="0vh" type="" />
 
         {/* ********Team here ***** */}
-        <h1>Our Team</h1>
+        <h1 id="team">Our Team</h1>
         {FOOTER.JOIN_TEAM.required && <JoinTeam />}
         {TeamInfo.map(TeamMembers)}
         {/* ********Team ending here ***** */}

src/components/navbar/App.jsx

@@ -1,81 +1,125 @@
-import React from "react";
-import "./styles.scss";
-// import MytypedComponent from "../typing-effect/typing.js"
-// import TOGGLE from "../toggle-button/toggle";
+import React, {useState, useEffect, useRef} from "react";
 import HomePage from "../Main-page/HomePage";
-// import logo from "./logoo.png"
-import {BrowserRouter as Router, Switch, Route, Link} from "react-router-dom";
+import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
+import { HashLink as Link } from 'react-router-hash-link';
+import hamLogo from "./ham.svg";
+import logoClose from "./ham-c.svg";
+import styled from "styled-components";
+import "./styles.scss";
 
-import Discord from "../Routes/Discord";
-import Twitter from "../Routes/Twitter";
-import Linkedin from "../Routes/LinkedIn";
-import Instagram from "../Routes/Instagram";
-import Devpost from "../Routes/Devpost";
+const Wrapper = styled.div`
+  display: block;
+  width:40%;
+  margin-top: 20px;
+  @media (max-width: 470px) {
+    margin: 0;
+    display: ${props => (props.toggle ? "none" : "static")};
+    height: 100vh;
+    width: 100vw;
+    position: fixed;
+    top: ${props => (props.toggle ? "-1000px" : "0px")};
+    transition: top 1s;
+    .nav-content {
+      height: 35%;
+      background-color: rgba(50, 13, 136);
+    }
+  }
+`;
 
-export default class NAVBAR extends React.Component {
-  state = {
-    color: "#121930"
-  };
-  listenScrollEvent = e => {
+const NAVBAR = ({}) => {
+  const [toggle, setToggle] = useState(true);
+  const [color, setColor] = useState("#121930");
+
+  const navigation = useRef();
+
+  const listenScrollEvent = e => {
     if (window.scrollY > 800) {
-      this.setState({color: "rgba(50, 13, 136)"});
+      setColor("rgba(50, 13, 136)");
     } else {
-      this.setState({color: "#121930"});
+      setColor("#121930");
     }
   };
 
-  componentDidMount() {
-    window.addEventListener("scroll", this.listenScrollEvent);
-  }
+  useEffect(() => {
+    window.addEventListener("scroll", listenScrollEvent);
+    console.log(navigation);
+  }, []);
+
+  const handleOutsideCick = (event, ref) => {
+    if (!ref.current.contains(event.target)) {
+      setToggle(true);
+    } else {
+      setToggle(false);
+    }
+  };
 
-  render() {
-    return (
-      <Router>
-        <div>
-          <nav className="nav_bar" style={{backgroundColor: this.state.color}}>
-            <ul>
+  useEffect(() => {
+    document.addEventListener("mousedown", e =>
+      handleOutsideCick(e, navigation)
+    );
+
+    return () => {
+      document.removeEventListener("mousedown", e =>
+        handleOutsideCick(e, navigation)
+      );
+    };
+  }, []);
+
+  return (
+    <Router>
+      <nav className="nav_bar" style={{backgroundColor: color}}>
+        <Wrapper toggle={toggle}>
+          <div className="nav-content" ref={navigation}>
+          <ul>
               <li>
-                <Link to="/">
+                <Link   to={`#home`}>
                   <span className="links">Home </span>{" "}
                 </Link>
               </li>
               <li>
-                <Link to="/contact">
-                  <span className="links">Sponsors </span>{" "}
+                <Link to={`#faq`}>
+                  <span className="links">FAQ </span>{" "}
+                </Link>
+              </li>
+              <li>
+                <Link to={`#prizes`}>
+                  <span className="links">prizes </span>{" "}
+                </Link>
+              </li>
+              <li>
+                <Link to={`#sponsors`}>
+                  <span className="links">sponsors </span>{" "}
                 </Link>
               </li>
               <li>
-                <Link to="/projects">
-                  <span className="links">More info </span>{" "}
+                <Link to={`#team`}>
+                  <span className="links">team </span>{" "}
                 </Link>
               </li>
+              <img
+                className="s-close"
+                onClick={() => setToggle(true)}
+                src={logoClose}
+              />
             </ul>
-          </nav>
+          </div>
+          <div className="ease" />
+        </Wrapper>
+        <img
+          className="s-open"
+          onClick={() => setToggle(false)}
+          src={hamLogo}
+        />
+      </nav>
 
-          <Switch>
-            <Route path="/discord" exact component={Discord} />
-            <Route path="/linkedin" exact component={Linkedin} />
-            <Route path="/devpost" exact component={Devpost} />
-            <Route path="/twitter" exact component={Twitter} />
-            <Route path="/instagram" exact component={Instagram} />
-            <Route path="/contact">
-              <HomePage />
-            </Route>
-            <Route path="/links">
-              <HomePage />
-            </Route>
-            <Route path="/projects">
-              <HomePage />
-            </Route>
-            <Route path="/">
-              <HomePage />
-            </Route>
-          </Switch>
-        </div>
-      </Router>
-    );
-  }
-}
+      <Switch>
+        <Route path="/">
+          <HomePage />
+        </Route>
+      </Switch>
+    </Router>
+  );
+};
 
 function Projects() {
   return <h2>Projects here</h2>;
@@ -88,3 +132,5 @@ function Contact() {
 function Links() {
   return <h2>Home</h2>;
 }
+
+export default NAVBAR;

src/components/navbar/styles.scss

@@ -5,26 +5,40 @@ nav {
   font-size: 1.8rem;
   position: fixed;
   width: 100%;
-  z-index: 10000;
+  z-index: 10;
   transition: 0.2s;
   box-shadow: 0px 5px 10px rgba(50, 13, 136, 0.25);
+  img{
+    z-index: 1000000;
+    &:hover{
+      cursor: pointer;
+    }
+  }
+}
+.s-open,.s-close{
+  display:none;
+}
+.nav-inner {
+  width: 30%;
 }
-
 ul {
-  display: inline;
-  margin-left: 7%;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: baseline;
+  height: 100%;
 }
 nav ul li {
   display: inline-block;
-  margin: 2rem 0 5rem 6rem;
+  // margin: 2rem 0 5rem 6rem;
 }
 .links {
   color: rgb(231, 228, 228);
   transition: 0.5s;
   font-weight: 300;
   letter-spacing: 1.3px;
 }
-
 .links:hover {
   color: rgb(184, 180, 180);
 }
@@ -33,34 +47,28 @@ a:link {
   padding: 1px;
 }
 
-@media (max-width: 600px) {
-  ul {
-    text-align: center;
-    margin-right: 6rem;
-    margin-left: 0%;
-  }
-  nav ul li {
-    margin: 2rem 1rem 0 1rem;
-  }
-  nav {
-    height: 8.5vh;
-  }
+@media (max-width: 470px) {
+.ease{
+  background: #484848;
+  height: 75%;
+  opacity: 0.2;
+ pointer-events: none;
 }
-
-@media (max-width: 380px) {
-  .links {
-    letter-spacing: 0px;
+  ul {
+    flex-direction: column;
+    padding: 30px 20;
   }
-}
-@media (max-width: 370px) {
-  nav {
-    font-size: 1.6rem;
+  .s-open{
+    display:inline;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: -1;
   }
-  nav ul li {
-    margin: 0px;
-    z-index: 5000;
-    padding: 4px 11px;
-    margin-left: -1rem;
-    margin-right: -1rem;
+  .s-close{
+    display: block;
+    position: absolute;
+    right: 10px;
+    top: 10px;
   }
 }