Winter-of-Code-3.0-frontend/src/components/navBar/navBar.js at 923887e981a23dec500ba55044c957341eccb019 · GDSC-IIIT-Kalyani/Winter-of-Code-3.0-frontend · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import React, { useRef } from "react";
import { FaBars, FaTimes } from "react-icons/fa";
import "./navBar.css";
import { Link } from "react-router-dom";
import image from "../../assets/logo.png";

function NavBar() {
  const navRef = useRef();

  const showNavbar = () => {
    navRef.current.classList.toggle("responsive_nav");
  };

  React.useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://apply.devfolio.co/v2/sdk.js";
    script.async = true;
    script.defer = true;
    document.body.appendChild(script);
    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <nav>
      <div className="responsive-logo">
        <img className="woc-logo" src={image} alt="woc-logo" />
      </div>

      <div className="navBar_container" ref={navRef} onClick={showNavbar}>
        <div className="woc">WOC.</div>
        <ul className={`navBar_links`}>
          <li className="navBar_link-item">
            <Link to="/" className="navBar_link">
              Home
            </Link>
          </li>

          <li className="navBar_link-item">
            <Link to="/about" className="navBar_link">
              About
            </Link>
          </li>

          <li className="navBar_link-item">
            <Link
              // style={{ color: navLinkColor }}
              to="/timeline"
              // onClick={handleNavClick}
              className="navBar_link"
            >
              Timeline
            </Link>
          </li>

          <li className="navBar_link-item">
            <Link
              // style={{ color: navLinkColor }}
              to="/organisations"
              // onClick={handleNavClick}
              className="navBar_link"
            >
              organisations
            </Link>
          </li>

          <li className="navBar_link-item">
            <Link
              // style={{ color: navLinkColor }}
              to="/projects"
              // onClick={handleNavClick}
              className="navBar_link"
            >
              Projects
            </Link>
          </li>

          <li className="navBar_link-item">
            <Link
              // style={{ color: navLinkColor }}
              to="/sponsors"
              // onClick={handleNavClick}
              className="navBar_link"
            >
              Sponsors
            </Link>
          </li>

          <li className="navBar_link-item">
            <Link
              // style={{ color: navLinkColor }}
              to="/faqs"
              // onClick={handleNavClick}
              className="navBar_link"
            >
              FAQs
            </Link>
          </li>

          <div
          className="apply-button"
            data-hackathon-slug="winter-of-code"
            data-button-theme="light"
            // style="height: 44px; width: 312px"
          ></div>
        </ul>
        <button className="nav-btn nav-close-btn">
          <FaTimes />
        </button>
      </div>
      <button className="nav-btn" onClick={showNavbar}>
        <FaBars />
      </button>
    </nav>
  );
}

export default NavBar;