Skip to content

Commit 5253c87

Browse files
princiyaprinciya
authored
Merge pull request #15 from ToluAdegboyega/toluadegboyega-header
feat: implement header component.
2 parents 7b53386 + c132883 commit 5253c87

File tree

13 files changed

+323
-51
lines changed

13 files changed

+323
-51
lines changed

‎public/index.html

+24-21
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,19 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<meta name="theme-color" content="#000000" />
8-
<meta
9-
name="description"
10-
content="Web site created using create-react-app"
11-
/>
12-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13-
<!--
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<meta name="theme-color" content="#000000" />
9+
<meta name="description" content="Web site created using create-react-app" />
10+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
11+
<!--
1412
manifest.json provides metadata used when your web app is installed on a
1513
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1614
-->
17-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18-
<!--
15+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
16+
<!--
1917
Notice the use of %PUBLIC_URL% in the tags above.
2018
It will be replaced with the URL of the `public` folder during the build.
2119
Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +22,16 @@
2422
work correctly both with client-side routing and a non-root public URL.
2523
Learn how to configure a non-root public URL by running `npm run build`.
2624
-->
27-
<title>React App</title>
28-
</head>
29-
<body>
30-
<noscript>You need to enable JavaScript to run this app.</noscript>
31-
<div id="root"></div>
32-
<!--
25+
<link rel="preconnect" href="https://fonts.googleapis.com">
26+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
27+
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">
28+
<title>React App</title>
29+
</head>
30+
31+
<body>
32+
<noscript>You need to enable JavaScript to run this app.</noscript>
33+
<div id="root"></div>
34+
<!--
3335
This HTML file is a template.
3436
If you open it directly in the browser, you will see an empty page.
3537
@@ -39,5 +41,6 @@
3941
To begin the development, run `npm start` or `yarn start`.
4042
To create a production bundle, use `npm run build` or `yarn build`.
4143
-->
42-
</body>
43-
</html>
44+
</body>
45+
46+
</html>

‎src/App.js

+5-16
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,12 @@
1-
import logo from './logo.svg';
2-
import './App.css';
1+
import '../src/assets/css/App.css';
2+
import Header from './components/Header/Header';
3+
import Main from './components/Main/Main';
34

45
function App() {
56
return (
67
<div className="App">
7-
<header className="App-header">
8-
<img src={logo} className="App-logo" alt="logo" />
9-
<p>
10-
Welcome to Hacktoberfest!
11-
</p>
12-
<a
13-
className="App-link"
14-
href="http://womenwhocode.com/"
15-
target="_blank"
16-
rel="noopener noreferrer"
17-
>
18-
Supported by Women Who Code
19-
</a>
20-
</header>
8+
<Header />
9+
<Main />
2110
</div>
2211
);
2312
}

‎src/App.css renamed to ‎src/assets/css/App.css

File renamed without changes.

‎src/assets/css/index.css

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
*, ::before, ::after {
2+
box-sizing: border-box;
3+
-webkit-box-sizing: border-box;
4+
-moz-box-sizing: border-box;
5+
}
6+
7+
html,
8+
body {
9+
margin: 0;
10+
padding: 0;
11+
}
12+
13+
body {
14+
font-family: 'Open Sans', sans-serif;
15+
line-height: 1;
16+
font-weight: 400;
17+
}
18+
19+
a {
20+
text-decoration: none;
21+
cursor: pointer;
22+
}
23+
24+
@font-face {
25+
font-family: 'Brittany';
26+
src: local('Brittany'), url(../fonts/FontsFree-Net-BrittanySignature.ttf) format('truetype');
27+
font-display: swap;
28+
}
29+
30+
code {
31+
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
32+
}

‎src/assets/fonts/FontsFree-Net-BrittanySignature.ttf

26.9 KB
Binary file not shown.

‎src/assets/images/CloseIcon.svg

+1
Loading

‎src/assets/images/MenuIcon.svg

+1
Loading

‎src/assets/images/WWCode-Pride-Logo.png

73.3 KB
Loading

‎src/components/Header/Header.css

+166
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
.headerWrap {
2+
display: flex;
3+
justify-content: space-between;
4+
align-items: center;
5+
width: 100%;
6+
background-color: #fff;
7+
box-shadow: 0 0 5px 0 rgb(0 0 0 / 15%);
8+
padding: 10px;
9+
}
10+
11+
.logoWrap {
12+
display: flex;
13+
align-items: center;
14+
}
15+
16+
.logo {
17+
width: auto;
18+
height: 40px;
19+
margin-right: 10px;
20+
}
21+
22+
.logoText {
23+
margin: 0;
24+
font-family: Brittany, 'Open Sans', sans-serif;
25+
font-size: 30px;
26+
color: rgb(0, 122, 124);
27+
}
28+
29+
.navContainer {
30+
display: flex;
31+
align-items: center;
32+
}
33+
34+
.navOptions {
35+
display: flex;
36+
align-items: center;
37+
}
38+
39+
.option {
40+
list-style-type: none;
41+
margin: auto 10px;
42+
}
43+
44+
.mobileOption {
45+
display: none;
46+
}
47+
48+
.option a {
49+
color: #111;
50+
font-size: 20px;
51+
position: relative;
52+
}
53+
54+
.option a:after {
55+
content: '';
56+
position: absolute;
57+
left: 0;
58+
display: inline-block;
59+
height: 1em;
60+
width: 100%;
61+
border-bottom: 2px solid rgb(0, 122, 124);
62+
margin-top: 10px;
63+
opacity: 0;
64+
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
65+
transition: opacity 0.35s, transform 0.35s;
66+
-webkit-transform: scale(0,1);
67+
transform: scale(0,1);
68+
}
69+
70+
.option a:hover:after {
71+
opacity: 1;
72+
-webkit-transform: scale(1);
73+
transform: scale(1);
74+
}
75+
76+
.navDisplay {
77+
display: flex;
78+
align-items: center;
79+
}
80+
81+
.optionDisplay {
82+
list-style-type: none;
83+
margin: auto 20px;
84+
}
85+
86+
.optionDisplay a {
87+
color: #111;
88+
font-size: 20px;
89+
position: relative;
90+
}
91+
92+
.optionDisplay a:after {
93+
content: '';
94+
position: absolute;
95+
left: 0;
96+
display: inline-block;
97+
height: 1em;
98+
width: 100%;
99+
border-bottom: 2px solid rgb(0, 122, 124);
100+
margin-top: 10px;
101+
opacity: 0;
102+
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
103+
transition: opacity 0.35s, transform 0.35s;
104+
-webkit-transform: scale(0,1);
105+
transform: scale(0,1);
106+
}
107+
108+
.optionDisplay a:hover:after {
109+
opacity: 1;
110+
-webkit-transform: scale(1);
111+
transform: scale(1);
112+
}
113+
114+
.mobileMenu {
115+
display: none;
116+
}
117+
118+
@media (max-width: 875px) {
119+
/*Mobile View */
120+
121+
.navOptions {
122+
display: flex;
123+
flex-direction: column;
124+
width: 100%;
125+
height: 350px;
126+
position: absolute;
127+
top: 60px;
128+
left: -100%;
129+
opacity: 0;
130+
transition: all 0.5s ease;
131+
}
132+
133+
.navOptions.active {
134+
background: #fff;
135+
transition: all 0.5s ease;
136+
padding-left: 0px;
137+
margin: 0;
138+
left: 0;
139+
opacity: 1;
140+
z-index: 1;
141+
}
142+
143+
.option {
144+
display: flex;
145+
align-items: center;
146+
justify-content: center;
147+
height: 10vw;
148+
padding: 30px 0px;
149+
}
150+
151+
.optionDisplay {
152+
display: none;
153+
}
154+
155+
.mobileMenu {
156+
display: block;
157+
cursor: pointer;
158+
}
159+
}
160+
161+
@media (max-width: 432px) {
162+
.logoText {
163+
font-size: 20px;
164+
}
165+
}
166+

‎src/components/Header/Header.js

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React, { useState } from 'react';
2+
import './Header.css';
3+
import WWCLogo from '../../assets/images/WWCode-Pride-Logo.png';
4+
import MenuIcon from '../../assets/images/MenuIcon.svg';
5+
import CloseIcon from '../../assets/images/CloseIcon.svg';
6+
7+
const Header = () => {
8+
const [click, setClick] = useState(false);
9+
const handleClick = () => setClick(!click);
10+
const closeMobileMenu = () => setClick(false);
11+
12+
return (
13+
<section className="headerWrap">
14+
<div className="logoWrap">
15+
<a href="/">
16+
<img src={WWCLogo} className="logo" alt="Women Who Code Pride Logo" />
17+
</a>
18+
<a href="/">
19+
<p className="logoText" >Frontend Study Group</p>
20+
</a>
21+
</div>
22+
<div className="navContainer" >
23+
<ul className={click ? "navOptions active" : "navOptions"}>
24+
<li className="option mobileOption" onClick={closeMobileMenu}>
25+
<a href="#">
26+
About
27+
</a>
28+
</li>
29+
<li className="option mobileOption" onClick={closeMobileMenu}>
30+
<a href="#">
31+
Resources
32+
</a>
33+
</li>
34+
<li className="option mobileOption" onClick={closeMobileMenu}>
35+
<a href="#">
36+
Contact Us
37+
</a>
38+
</li>
39+
</ul>
40+
<ul className="navDisplay">
41+
<li className="optionDisplay" onClick={closeMobileMenu}>
42+
<a href="#">
43+
About
44+
</a>
45+
</li>
46+
<li className="optionDisplay" onClick={closeMobileMenu}>
47+
<a href="#">
48+
Resources
49+
</a>
50+
</li>
51+
<li className="optionDisplay" onClick={closeMobileMenu}>
52+
<a href="#">
53+
Contact Us
54+
</a>
55+
</li>
56+
</ul>
57+
<div className="mobileMenu" onClick={handleClick}>
58+
{click ? (
59+
<img src={CloseIcon} alt="Icon to close Navigation Menu" className="menuIcon" />
60+
) : (
61+
<img src={MenuIcon} alt="Icon to open Navigation Menu" className="menuIcon" />
62+
)}
63+
</div>
64+
</div>
65+
</section>
66+
)
67+
}
68+
69+
export default Header;

‎src/components/Main/Main.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react';
2+
import logo from '../../logo.svg';
3+
import '../../assets/css/App.css';
4+
5+
const Main = () => {
6+
return (
7+
<header className="App-header">
8+
<img src={logo} className="App-logo" alt="logo" />
9+
<p>
10+
Welcome to Hacktoberfest!
11+
</p>
12+
<a
13+
className="App-link"
14+
href="http://womenwhocode.com/"
15+
target="_blank"
16+
rel="noopener noreferrer"
17+
>
18+
Supported by Women Who Code
19+
</a>
20+
</header>
21+
)
22+
}
23+
24+
export default Main;

0 commit comments

Comments
 (0)