From 0d1cdd5d0ec76fcfdabf4a2e05e5641191b4f322 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Tue, 16 Jun 2020 17:17:45 -0700
Subject: [PATCH] feat: Add current page indicator to selected page

---
 src/components/FeatherIcon.js      |  1 +
 src/components/Sidebar.js          |  7 +++++++
 src/components/Sidebar.module.scss | 15 +++++++++------
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/FeatherIcon.js b/src/components/FeatherIcon.js
index b97c3e605..e0291eba8 100644
--- a/src/components/FeatherIcon.js
+++ b/src/components/FeatherIcon.js
@@ -31,6 +31,7 @@ const ICONS = {
       <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
     </>
   ),
+  'chevron-right': <polyline points="9 18 15 12 9 6" />,
   clock: (
     <>
       <circle cx="12" cy="12" r="10" />
diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
index 7ff69314d..b579d66a3 100644
--- a/src/components/Sidebar.js
+++ b/src/components/Sidebar.js
@@ -4,6 +4,7 @@ import { Link } from 'gatsby';
 import cx from 'classnames';
 import { BreadcrumbContext } from './BreadcrumbContext';
 
+import FeatherIcon from './FeatherIcon';
 import Logo from './Logo';
 import { link } from '../types';
 import styles from './Sidebar.module.scss';
@@ -27,6 +28,12 @@ const renderNav = (pages, depthLevel = 0) => {
         {page.url ? (
           <Link className={styles.navItem} to={page.url}>
             {page.displayName}
+            {isCurrentPage && (
+              <FeatherIcon
+                className={styles.currentPageIndicator}
+                name="chevron-right"
+              />
+            )}
           </Link>
         ) : (
           <div
diff --git a/src/components/Sidebar.module.scss b/src/components/Sidebar.module.scss
index 52308e71f..53cd39a33 100644
--- a/src/components/Sidebar.module.scss
+++ b/src/components/Sidebar.module.scss
@@ -9,12 +9,6 @@
     list-style: none;
   }
 
-  a {
-    text-decoration: none;
-    color: var(--color-black);
-    display: inline-block;
-  }
-
   h3 {
     margin: 0;
   }
@@ -72,7 +66,16 @@
 }
 
 .navItem {
+  color: var(--color-black);
   margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  text-decoration: none;
+}
+
+.currentPageIndicator {
+  stroke-width: 4;
 }
 
 .navDepth0 {