BeforeIDieAchievements/src/Components/Header/Header.jsx at fa85cc04ec1490dab86e53c4c5f68618fdf68517 · BeforeIDieCode/BeforeIDieAchievements · 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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
import React, { useState, useEffect } from "react";
// import styles of this component
import "./Header.scss";
// import other components
// import ContainerCard from "../ContainerCard/ContainerCard";
// import Nav from "../Nav/Nav";
// import BrickLayout from "../BrickLayout/BrickLayout";
// import { Typewriter } from "react-simple-typewriter";
import ContainerCard from "../ContainerCard/ContainerCard";
import Nav from "../Nav/Nav";
import BrickLayout from "../BrickLayout/BrickLayout";
import { Typewriter } from "react-simple-typewriter";
import RandomContributors from "../randomcontributor/RandomContributors";

// Header component
const Header = () => {
  const [isMobile, setIsMobile] = useState(window.innerWidth <= 900);
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    function handleResize() {
      setIsMobile(window.innerWidth <= 900);
    }
    window.addEventListener("resize", handleResize);
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  const toggleMenu = () => {
    setMenuOpen(!menuOpen);
  };

  return (
    <header className={`header flex ${menuOpen ? 'menu-open' : ''}`}>
      {isMobile ? (
        <>
          <div className="navbar">
            <div className="opensource__title">
              <span>
                An Open Source Project
              </span>
            </div>
            <div className="hamburger" onClick={toggleMenu}>
              <div className={`bar ${menuOpen ? "open" : ""}`}></div>
              <div className={`bar ${menuOpen ? "open" : ""}`}></div>
              <div className={`bar ${menuOpen ? "open" : ""}`}></div>
            </div>
            {menuOpen && (
              <div className="menu">
                <a href="https://github.com/BeforeIDieCode/BeforeIDieAchievements" target="_blank" rel="noopener noreferrer">GitHub Repo</a>
                <a href="https://before-i-die-achievements.vercel.app/Contributors" target="_blank" rel="noopener noreferrer">Contributors List</a>
                <a href="https://before-i-die-achievements.vercel.app/contributors-map" target="_blank" rel="noopener noreferrer">Contributors Map</a>
              </div>
            )}
          </div>
        </>
      ) : (
        <div className="text__container">
          <div className="opensource__title">
            <span>
              An Open<br></br> Source<br></br> Project
            </span>
          </div>

          <div className="github__section">
            <span>Join us and <br></br>share your wish</span>
            <a
              className="button"
              href="https://github.com/BeforeIDieCode/BeforeIDieAchievements"
              target="/black"
            >
              GitHub Repo
            </a>
            <a
              className="button"
              href="https://before-i-die-achievements.vercel.app/Contributors"
              target="/black"
            >
              Contributors List
            </a>
            <a
              className="button"
              href="https://before-i-die-achievements.vercel.app/contributors-map"
              target="/black"
            >
              Contributors Map
            </a>
          </div>
        </div>
      )}
      <div className={"animation__container flex justify-content-center"}>
        <div className={"untitled"}>
          <div className="untitled__slides">
            <div className="untitled__slide">
              <div className="untitled__slideBg"></div>
              <div className="untitled__slideContent">
                <span>
                  Plant seeds🌱<br></br>of inspiration{" "}
                </span>
              </div>
            </div>
            <div className="untitled__slide">
              <div className="untitled__slideBg"></div>
              <div className="untitled__slideContent">
                <span>
                  To codify 💻<br></br> your purpose{" "}
                </span>
              </div>
            </div>
            <div className="untitled__slide">
              <div className="untitled__slideBg"></div>
              <div className="untitled__slideContent">
                <span>
                  To compile your<br></br> bucket 🪣 list
                </span>
              </div>
            </div>

            <div className="untitled__slide">
              <div className="untitled__slideBg"></div>
              <div className="untitled__slideContent">
                <span>To learn how to contribute 📚</span>
              </div>
            </div>
            <div className="untitled__slide">
              <div className="untitled__slideBg"></div>
              <div className="untitled__slideContent">
                <span>
                  To learn <br></br>new skills 🎯
                </span>
              </div>
            </div>
            <div className="untitled__slide">
              <div className="untitled__slideBg"></div>
              <div className="untitled__slideContent">
                <span>
                  To advance <br></br>your career 💼
                </span>
              </div>
            </div>
            <div className="untitled__slide">
              <div className="untitled__slideBg"></div>
              <div className="untitled__slideContent"></div>
            </div>
          </div>
          <div className="untitled__shutters"></div>
        </div>
      </div>
    </header>
  );
};

export default Header;