Skip to content

Commit b947b88

Browse files
zstixzstix
committed
chore: added images to header
1 parent be62612 commit b947b88

File tree

4 files changed

+102
-74
lines changed

4 files changed

+102
-74
lines changed

‎src/components/Header.js

+95-73
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,107 @@
1-
import { Link } from 'gatsby';
1+
import { Link, useStaticQuery, graphql } from 'gatsby';
22
import React from 'react';
33
import PropTypes from 'prop-types';
44

55
import Container from './Container';
66
import './Header.scss';
77

8-
const Header = ({ links }) => (
9-
<header className="Header">
10-
<Container>
11-
<>
12-
<nav className="Header-nav Header-nav--nr">
13-
<ul>
14-
<li>
15-
<a
16-
href="//newrelic.com"
17-
target="_blank"
18-
className="Header-nav-link"
19-
rel="noopener noreferrer"
20-
>
21-
New Relic
22-
</a>
23-
</li>
24-
<li>
25-
<Link to="/" className="Header-nav-link">
26-
Developers
27-
</Link>
28-
</li>
29-
<li>
30-
<a
31-
href="//opensource.newrelic.com"
32-
target="_blank"
33-
className="Header-nav-link"
34-
rel="noopener noreferrer"
35-
>
36-
Open Source
37-
</a>
38-
</li>
39-
<li>
40-
<a
41-
href="//docs.newrelic.com"
42-
target="_blank"
43-
className="Header-nav-link"
44-
rel="noopener noreferrer"
45-
>
46-
Docs
47-
</a>
48-
</li>
49-
</ul>
50-
<ul>
51-
<li>
52-
<a
53-
href="//githib.com/newrelic"
54-
target="_blank"
55-
className="Header-nav-link"
56-
rel="noopener noreferrer"
57-
>
58-
GitHub
59-
</a>
60-
</li>
61-
</ul>
62-
</nav>
8+
const Header = ({ links }) => {
9+
// NOTE: we may want to abstract this
10+
const data = useStaticQuery(graphql`
11+
query {
12+
nrLogo: file(relativePath: { eq: "NewRelic-logo.png" }) {
13+
childImageSharp {
14+
fixed(width: 739, height: 133, quality: 100) {
15+
...GatsbyImageSharpFixed
16+
}
17+
}
18+
}
19+
ghLogo: file(relativePath: { eq: "GitHub-logo.png" }) {
20+
childImageSharp {
21+
fixed(width: 64, height: 64, quality: 100) {
22+
...GatsbyImageSharpFixed
23+
}
24+
}
25+
}
26+
}
27+
`);
6328

64-
<h1 className="Header-title">
65-
<Link to="/">{'</>'} New Relic Developers</Link>
66-
</h1>
67-
68-
<nav className="Header-nav Header-nav--main">
69-
<ul>
70-
{links.map((link, i) => (
71-
<li key={i}>
72-
<Link to={link.url} className="Header-nav-link">
73-
{link.displayName}
29+
return (
30+
<header className="Header">
31+
<Container>
32+
<>
33+
<nav className="Header-nav Header-nav--sitesAndTools">
34+
<ul>
35+
<li>
36+
<a
37+
href="//newrelic.com"
38+
target="_blank"
39+
className="Header-nav-link"
40+
rel="noopener noreferrer"
41+
>
42+
<img src={data.nrLogo.childImageSharp.fixed.src} />
43+
</a>
44+
</li>
45+
<li>
46+
<Link to="/" className="Header-nav-link">
47+
Developers
7448
</Link>
7549
</li>
76-
))}
77-
</ul>
78-
</nav>
79-
</>
80-
</Container>
81-
</header>
82-
);
50+
<li>
51+
<a
52+
href="//opensource.newrelic.com"
53+
target="_blank"
54+
className="Header-nav-link"
55+
rel="noopener noreferrer"
56+
>
57+
Open Source
58+
</a>
59+
</li>
60+
<li>
61+
<a
62+
href="//docs.newrelic.com"
63+
target="_blank"
64+
className="Header-nav-link"
65+
rel="noopener noreferrer"
66+
>
67+
Documentation
68+
</a>
69+
</li>
70+
</ul>
71+
<ul>
72+
<li>
73+
<a
74+
href="//githib.com/newrelic"
75+
target="_blank"
76+
className="Header-nav-link"
77+
rel="noopener noreferrer"
78+
>
79+
<img src={data.ghLogo.childImageSharp.fixed.src} />
80+
</a>
81+
</li>
82+
</ul>
83+
</nav>
84+
85+
<h1 className="Header-title">
86+
<Link to="/">{'</>'} New Relic Developers</Link>
87+
</h1>
88+
89+
<nav className="Header-nav Header-nav--main">
90+
<ul>
91+
{links.map((link, i) => (
92+
<li key={i}>
93+
<Link to={link.url} className="Header-nav-link">
94+
{link.displayName}
95+
</Link>
96+
</li>
97+
))}
98+
</ul>
99+
</nav>
100+
</>
101+
</Container>
102+
</header>
103+
);
104+
};
83105

84106
Header.propTypes = {
85107
links: PropTypes.arrayOf(

‎src/components/Header.scss

+7-1
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,14 @@ header.Header {
4747
justify-content: flex-end;
4848
}
4949

50-
nav.Header-nav--nr {
50+
nav.Header-nav--sitesAndTools {
5151
display: flex;
5252
justify-content: space-between;
53+
54+
img {
55+
height: 1.2em;
56+
vertical-align: middle;
57+
padding-bottom: 0.1em;
58+
}
5359
}
5460
}

‎src/images/GitHub-logo.png

2.56 KB
Loading

‎src/images/NewRelic-logo.png

10.1 KB
Loading

0 commit comments

Comments
 (0)