diff --git a/src/components/Navigation.js b/src/components/Navigation.js index d74fe789a..e5028924b 100644 --- a/src/components/Navigation.js +++ b/src/components/Navigation.js @@ -11,6 +11,7 @@ import styles from './Navigation.module.scss'; // recursively create navigation const renderNav = (pages, depthLevel = 0) => { const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.displayName); + const isHomePage = crumbs.length === 0 && depthLevel === 0; const groupedPages = pages.reduce((groups, page) => { const { group = '' } = page; @@ -28,18 +29,20 @@ const renderNav = (pages, depthLevel = 0) => { )} {pages.map((page) => { const [isExpanded, setIsExpanded] = useState( - crumbs.length === depthLevel || crumbs.includes(page.displayName) + isHomePage || crumbs.includes(page.displayName) ); const isCurrentPage = crumbs[crumbs.length - 1] === page.displayName; return ( -
  • +
  • {page.url ? ( - + {page.displayName} {isCurrentPage && ( { onKeyPress={() => setIsExpanded(!isExpanded)} tabIndex={0} > + {depthLevel > 0 && ( + + )} {page.displayName} )} diff --git a/src/components/Navigation.module.scss b/src/components/Navigation.module.scss index 9bb71c303..40572148e 100644 --- a/src/components/Navigation.module.scss +++ b/src/components/Navigation.module.scss @@ -27,6 +27,11 @@ align-items: center; justify-content: space-between; text-decoration: none; + transition: 0.1s; + + &:hover { + color: var(--color-neutrals-600); + } [data-depth='0'] > & { font-weight: bold; @@ -50,6 +55,15 @@ button.navLink { stroke-width: 4; } +.nestedChevron { + margin-right: 0.5rem; + stroke-width: 4; + transition: 0.2s; + &.isExpanded { + transform: rotate(90deg); + } +} + .groupName { color: var(--color-neutrals-600); font-weight: bold; diff --git a/src/components/styles.scss b/src/components/styles.scss index 24d69298a..7a07ed788 100644 --- a/src/components/styles.scss +++ b/src/components/styles.scss @@ -162,6 +162,6 @@ pre { .site-container { max-width: 1460px; - margin: auto; + margin: 0 auto; } } diff --git a/src/data/sidenav.json b/src/data/sidenav.json index 1e5ff10d3..388831b20 100644 --- a/src/data/sidenav.json +++ b/src/data/sidenav.json @@ -8,15 +8,15 @@ "url": "/" }, { - "displayName": "OpenTelemetry Exporter", + "displayName": "OpenTelemetry exporter", "url": "/" }, { - "displayName": "Extend New Relic Agents", + "displayName": "Extend New Relic agents", "url": "/" }, { - "displayName": "Create Flex Integration", + "displayName": "Create a Flex integration", "url": "/" } ] @@ -26,41 +26,40 @@ "url": "/explore-data", "children": [ { - "displayName": "Write NRQL Queries", + "displayName": "Write NRQL queries", "url": "/" }, { - "displayName": "Build a NerdGraph Query", + "displayName": "Build a NerdGraph query", "url": "/" } ] }, { "displayName": "Build apps", - "url": "/build-apps", "children": [ { - "displayName": "Map Pageviews by Region", + "displayName": "Map pageviews by region", "url": "/build-apps/map-pageviews-by-region" }, { - "displayName": "Optimize Cloud Usage", + "displayName": "Optimize cloud usage", "url": "/build-apps/optimize-cloud-usage" }, { - "displayName": "Add a Time Picker", + "displayName": "Add a time picker", "url": "/build-apps/add-time-picker-guide" }, { - "displayName": "Use NerdGraph in an App", + "displayName": "Use NerdGraph in an app", "url": "/build-apps/use-nerdgraph-in-app" }, { - "displayName": "Build a Table", + "displayName": "Build a table", "url": "/build-apps/build-a-table" }, { - "displayName": "Persistent Storage for Apps", + "displayName": "Persistent storage for apps", "url": "/build-apps/persistent-storage-for-apps" } ] @@ -70,11 +69,11 @@ "url": "/automate-workflows", "children": [ { - "displayName": "Monitor, Alert, and Analyze", + "displayName": "Monitor, alert, and analyze", "url": "/automate-workflows/" }, { - "displayName": "OpenTelemetry Exporter", + "displayName": "OpenTelemetry exporter", "url": "/automate-workflows/" } ] diff --git a/src/pages/explore-data.js b/src/pages/explore-data.js index 7591888de..135276376 100644 --- a/src/pages/explore-data.js +++ b/src/pages/explore-data.js @@ -1,9 +1,12 @@ +import { BreadcrumbContext } from '../components/BreadcrumbContext'; +import createBreadcrumbs from '../utils/create-breadcrumbs'; import GuideListing from '../components/GuideListing/GuideListing'; import GuideTile from '../components/GuideTile'; import PageTitle from '../components/PageTitle'; import Layout from '../components/Layout'; import React from 'react'; import SEO from '../components/Seo'; +import pages from '../data/sidenav.json'; const title = 'Get data into New Relic'; @@ -30,23 +33,28 @@ const guides = [ }, ]; -const ExploreDataPage = () => ( - - - {title} -

    - Instrument your applications and infrastructure to start collecting - monitoring data -

    +const ExploreDataPage = () => { + const crumbs = createBreadcrumbs('/explore-data', pages); + return ( + + + + {title} +

    + Instrument your applications and infrastructure to start collecting + monitoring data +

    - - - {guides.map((guide, index) => ( - - ))} - - -
    -); + + + {guides.map((guide, index) => ( + + ))} + + +
    + + ); +}; export default ExploreDataPage;