feat: Add current page indicator to selected page

newrelic · Jun 17, 2020 · 0d1cdd5 · 0d1cdd5
1 parent b75f5bc
commit 0d1cdd5
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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 {