Merge remote-tracking branch 'origin/master' into jerel/layout-tweaks

newrelic · Jun 17, 2020 · 0664603 · 0664603
2 parents c09f6c3 + 1dcb1de
commit 0664603
Show file tree

Hide file tree

Showing 19 changed files with 485 additions and 436 deletions.
diff --git a/src/components/GlobalHeader.js b/src/components/GlobalHeader.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { Link } from 'gatsby';
+import ExternalLink from './ExternalLink';
+
+import styles from './GlobalHeader.module.scss';
+
+const GlobalHeader = ({ className }) => {
+  return (
+    <div className={cx(styles.globalHeaderContainer, className)}>
+      <div className={cx(styles.globalHeaderContent, 'site-container')}>
+        <div className={styles.leftSideLinksContainer}>
+          <ExternalLink href="https://newrelic.com/" className={styles.logo}>
+            New Relic
+          </ExternalLink>
+
+          <ul className={styles.leftSideLinks}>
+            <li className={`${styles.leftSideLinkItem} ${styles.active}`}>
+              <Link to="/" className={styles.leftSideLink}>
+                Developers
+              </Link>
+            </li>
+            <li className={styles.leftSideLinkItem}>
+              <ExternalLink
+                href="https://opensource.newrelic.com/"
+                className={styles.leftSideLink}
+              >
+                Open Source
+              </ExternalLink>
+            </li>
+            <li className={styles.leftSideLinkItem}>
+              <ExternalLink
+                href="https://docs.newrelic.com/"
+                className={styles.leftSideLink}
+              >
+                Documentation
+              </ExternalLink>
+            </li>
+          </ul>
+        </div>
+
+        <ul className={styles.rightSideButtons}>
+          <li className={`${styles.rightSideButton} ${styles.githubButton}`}>
+            <ExternalLink
+              href="https://github.com/newrelic/developer-website"
+              className={styles.githubButtonLink}
+            >
+              GitHub
+            </ExternalLink>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+GlobalHeader.propTypes = {
+  className: PropTypes.string,
+};
+
+export default GlobalHeader;
diff --git a/src/components/GlobalHeader.module.scss b/src/components/GlobalHeader.module.scss
@@ -0,0 +1,119 @@
+.globalHeaderContainer {
+  background-color: var(--color-neutrals-100);
+}
+
+.globalHeaderContent {
+  height: var(--height-global-header);
+  display: flex;
+  justify-content: space-between;
+}
+
+.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;
+}
+
+.leftSideLinksContainer {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.leftSideLinks {
+  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);
+  }
+}
+
+.leftSideLink {
+  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 &,
+  .leftSideLinks:hover .active &:hover {
+    background-color: var(--color-neutrals-200);
+    color: var(--color-neutrals-700);
+  }
+}
+
+.rightSideButtons {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  list-style-type: none;
+  align-items: center;
+}
+
+.rightSideButton {
+  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;
+  }
+}
+
+.githubButton {
+  display: block;
+  width: 15px;
+  height: 15px;
+  text-indent: 0;
+}
+
+.githubButtonLink {
+  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) {
+  .globalHeaderContainer {
+    padding: 0 1.75rem;
+  }
+}
diff --git a/src/components/HamburgerMenu.module.scss b/src/components/HamburgerMenu.module.scss
@@ -1,8 +1,10 @@
 button.hamburgerMenu {
+  display: block;
   background: none;
   border: 0;
   cursor: pointer;
   width: 4rem;
+  outline: none;
 
   div {
     width: 100%;

diff --git a/src/components/Header.js b/src/components/Header.js