style: Header consistent with open source site

newrelic · Jun 16, 2020 · b74b2aa · b74b2aa
1 parent 009e72f
commit b74b2aa
Show file tree

Hide file tree

Showing 5 changed files with 222 additions and 2 deletions.
diff --git a/src/components/GlobalHeader.js b/src/components/GlobalHeader.js
@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import styles from './GlobalHeader.module.scss';
+
+const GlobalHeader = ({ hasHeaderBg, className }) => {
+  return (
+    <div
+      className={`${styles.globalHeaderContainer} ${
+        hasHeaderBg ? styles.hasHeaderBg : ''
+      } ${className || className}`}
+    >
+      <div className={styles.globalHeaderContent}>
+        <div className={styles.leftSideLinksContainer}>
+          <a
+            href="https://newrelic.com/"
+            className={styles.logo}
+            rel="noopener noreferrer"
+          >
+            New Relic
+          </a>
+
+          <ul className={styles.leftSideLinks}>
+            <li className={`${styles.leftSideLinkItem} ${styles.active}`}>
+              <a
+                href="https://developer.newrelic.com/"
+                className={styles.leftSideLink}
+              >
+                Developers
+              </a>
+            </li>
+            <li className={styles.leftSideLinkItem}>
+              <a href="#" className={styles.leftSideLink}>
+                Open Source
+              </a>
+            </li>
+            <li className={styles.leftSideLinkItem}>
+              <a
+                href="https://docs.newrelic.com/"
+                className={styles.leftSideLink}
+              >
+                Documentation
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <ul className={styles.rightSideButtons}>
+          <li className={`${styles.rightSideButton} ${styles.githubButton}`}>
+            <a
+              href="https://github.com/newrelic/developer-website"
+              className={styles.githubButtonLink}
+              target="__blank"
+            >
+              GitHub
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+GlobalHeader.propTypes = {
+  hasHeaderBg: PropTypes.bool,
+  className: PropTypes.string,
+};
+
+export default GlobalHeader;
diff --git a/src/components/GlobalHeader.module.scss b/src/components/GlobalHeader.module.scss
@@ -0,0 +1,135 @@
+.global-header-container {
+  position: relative;
+  z-index: 10000;
+  background-color: var(--color-neutrals-100);
+}
+
+.has-header-bg {
+  background-color: transparent;
+  border-bottom: 1px dotted rgba(0, 0, 0, 0.05);
+  margin-bottom: -1px;
+}
+
+.global-header-content {
+  height: 30px;
+  display: flex;
+  justify-content: space-between;
+  max-width: 1180px;
+  margin: 0 auto;
+}
+
+.logo {
+  display: inline-block;
+  width: 79px;
+  height: 15px;
+  margin-right: 18px;
+  text-indent: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  background-image: url('../images/new-relic-logo.svg');
+  border: none;
+}
+
+.left-side-links-container {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.left-side-links {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  list-style-type: none;
+
+  &:hover .active .left-side-link {
+    background-color: transparent;
+    color: var(--color-neutrals-600);
+  }
+}
+
+.left-side-link {
+  display: flex;
+  line-height: 22px;
+  box-sizing: border-box;
+  display: block;
+  height: 100%;
+  padding: 4px 9px;
+  color: var(--color-neutrals-600);
+  font-size: 11px;
+  border: none;
+
+  &:hover {
+    background-color: var(--color-neutrals-200);
+    color: var(--color-neutrals-700);
+  }
+
+  .active &,
+  .left-side-links:hover .active &:hover {
+    background-color: var(--color-neutrals-200);
+    color: var(--color-neutrals-700);
+  }
+}
+
+.right-side-buttons {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  list-style-type: none;
+  align-items: center;
+}
+
+.right-side-button {
+  width: 14px;
+  height: 14px;
+  text-indent: 300%;
+  white-space: nowrap;
+  overflow: hidden;
+  padding: 0;
+  opacity: 0.45;
+  background-repeat: no-repeat;
+  background-position: center;
+  transition: opacity 0.1s var(--ease-out-quad);
+
+  &:hover {
+    cursor: pointer;
+    opacity: 0.75;
+  }
+
+  &:last-child {
+    padding-right: 0;
+    background-position: right;
+  }
+}
+
+.github-button {
+  display: block;
+  width: 15px;
+  height: 15px;
+  text-indent: 0;
+}
+
+.github-button-link {
+  display: block;
+  background-image: url('../images/icon-github.svg');
+  text-indent: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+// ==============================================================
+// Responsive styles
+// ==============================================================
+
+@media screen and (max-width: 1240px) {
+  .global-header-container {
+    padding: 0 28px;
+  }
+}
+
+// @media screen and (max-width: 480px) {
+//   .global-header-container {
+//     display: none;
+//   }
+// }
diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -2,15 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import Footer from './Footer';
-import Header from './Header';
+import GlobalHeader from './GlobalHeader';
 import Sidebar from './Sidebar';
 import styles from './Layout.module.scss';
 import pages from '../data/sidenav.json';
 import './styles.scss';
 
 const Layout = ({ children }) => (
   <>
-    <Header />
+    <GlobalHeader />
     <div className={styles.layout}>
       <Sidebar pages={pages} />
       <main>{children}</main>

diff --git a/src/images/icon-github.svg b/src/images/icon-github.svg
diff --git a/src/images/new-relic-logo.svg b/src/images/new-relic-logo.svg