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;