From b74b2aa6b2c9830e533fe43c77a530b7d7770eb4 Mon Sep 17 00:00:00 2001 From: Tim Glaser Date: Tue, 16 Jun 2020 16:36:13 -0700 Subject: [PATCH] style: Header consistent with open source site --- src/components/GlobalHeader.js | 69 ++++++++++++ src/components/GlobalHeader.module.scss | 135 ++++++++++++++++++++++++ src/components/Layout.js | 4 +- src/images/icon-github.svg | 3 + src/images/new-relic-logo.svg | 13 +++ 5 files changed, 222 insertions(+), 2 deletions(-) create mode 100644 src/components/GlobalHeader.js create mode 100644 src/components/GlobalHeader.module.scss create mode 100644 src/images/icon-github.svg create mode 100644 src/images/new-relic-logo.svg diff --git a/src/components/GlobalHeader.js b/src/components/GlobalHeader.js new file mode 100644 index 000000000..082881a5a --- /dev/null +++ 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 ( +
+
+
+ + New Relic + + + +
+ + +
+
+ ); +}; + +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 new file mode 100644 index 000000000..666bcc10b --- /dev/null +++ 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 index 4d29e0e5b..dbe9784cf 100644 --- a/src/components/Layout.js +++ b/src/components/Layout.js @@ -2,7 +2,7 @@ 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'; @@ -10,7 +10,7 @@ import './styles.scss'; const Layout = ({ children }) => ( <> -
+
{children}
diff --git a/src/images/icon-github.svg b/src/images/icon-github.svg new file mode 100644 index 000000000..9f1a60996 --- /dev/null +++ b/src/images/icon-github.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/new-relic-logo.svg b/src/images/new-relic-logo.svg new file mode 100644 index 000000000..c6ae7da6c --- /dev/null +++ b/src/images/new-relic-logo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + +