Merge pull request #170 from newrelic/liz/sidenav-styles

Side nav style tweaks
newrelic · Jun 18, 2020 · e4cd2ad · e4cd2ad
2 parents 4c59841 + fe980a6
commit e4cd2ad
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 39 deletions.
diff --git 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 (
-          <li
-            key={page.displayName}
-            data-depth={depthLevel}
-            className={cx({ [styles.isCurrentPage]: isCurrentPage })}
-          >
+          <li key={page.displayName} data-depth={depthLevel}>
             {page.url ? (
-              <Link className={styles.navLink} to={page.url}>
+              <Link
+                className={cx(
+                  { [styles.isCurrentPage]: isCurrentPage },
+                  styles.navLink
+                )}
+                to={page.url}
+              >
                 {page.displayName}
                 {isCurrentPage && (
                   <FeatherIcon
@@ -56,6 +59,15 @@ const renderNav = (pages, depthLevel = 0) => {
                 onKeyPress={() => setIsExpanded(!isExpanded)}
                 tabIndex={0}
               >
+                {depthLevel > 0 && (
+                  <FeatherIcon
+                    className={cx(
+                      { [styles.isExpanded]: isExpanded },
+                      styles.nestedChevron
+                    )}
+                    name="chevron-right"
+                  />
+                )}
                 {page.displayName}
               </button>
             )}

diff --git 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
@@ -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
@@ -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
@@ -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 = () => (
-  <Layout>
-    <SEO title={title} />
-    <PageTitle>{title}</PageTitle>
-    <p className="intro-text">
-      Instrument your applications and infrastructure to start collecting
-      monitoring data
-    </p>
+const ExploreDataPage = () => {
+  const crumbs = createBreadcrumbs('/explore-data', pages);
+  return (
+    <BreadcrumbContext.Provider value={crumbs}>
+      <Layout>
+        <SEO title={title} />
+        <PageTitle>{title}</PageTitle>
+        <p className="intro-text">
+          Instrument your applications and infrastructure to start collecting
+          monitoring data
+        </p>
 
-    <GuideListing>
-      <GuideListing.List>
-        {guides.map((guide, index) => (
-          <GuideTile key={index} {...guide} />
-        ))}
-      </GuideListing.List>
-    </GuideListing>
-  </Layout>
-);
+        <GuideListing>
+          <GuideListing.List>
+            {guides.map((guide, index) => (
+              <GuideTile key={index} {...guide} />
+            ))}
+          </GuideListing.List>
+        </GuideListing>
+      </Layout>
+    </BreadcrumbContext.Provider>
+  );
+};
 
 export default ExploreDataPage;