feat: Add dev champ icon to sidebar link

newrelic · Jun 24, 2020 · 25bff81 · 25bff81
1 parent 4bfc1be
commit 25bff81
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 13 deletions.
diff --git a/src/components/NavigationItems.js b/src/components/NavigationItems.js
@@ -8,6 +8,17 @@ import { BreadcrumbContext } from './BreadcrumbContext';
 import styles from './NavigationItems.module.scss';
 import { link } from '../types';
 
+const iconLibrary = {
+  'Collect data': 'collectData',
+  'Build apps': 'buildApps',
+  'Automate workflows': 'automation',
+  'Explore docs': 'developerDocs',
+};
+
+const featherIconLibrary = {
+  'Developer champions': 'award',
+};
+
 const getHighlightedText = (text, highlight) => {
   const parts = text.split(new RegExp(`(${highlight})`, 'gi'));
   return (
@@ -59,6 +70,28 @@ const NavigationItems = ({
   });
 };
 
+const NavIcon = ({ page }) => {
+  if (featherIconLibrary[page.displayName]) {
+    return (
+      <FeatherIcon
+        className={styles.headerIcon}
+        name={featherIconLibrary[page.displayName]}
+      />
+    );
+  }
+
+  if (iconLibrary[page.displayName]) {
+    return (
+      <NewRelicIcon
+        className={styles.headerIcon}
+        name={iconLibrary[page.displayName]}
+      />
+    );
+  }
+
+  return null;
+};
+
 const NavItem = ({ page, depthLevel, searchTerm, filteredPageNames }) => {
   const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.displayName);
   const isHomePage = crumbs.length === 0 && depthLevel === 0;
@@ -67,19 +100,8 @@ const NavItem = ({ page, depthLevel, searchTerm, filteredPageNames }) => {
     isHomePage || crumbs.includes(page.displayName)
   );
 
-  const iconLibrary = {
-    'Collect data': 'collectData',
-    'Build apps': 'buildApps',
-    'Automate workflows': 'automation',
-    'Explore docs': 'developerDocs',
-  };
   const isCurrentPage = crumbs[crumbs.length - 1] === page.displayName;
-  const headerIcon = depthLevel === 0 && (
-    <NewRelicIcon
-      className={styles.headerIcon}
-      name={iconLibrary[page.displayName]}
-    />
-  );
+  const headerIcon = depthLevel === 0 && <NavIcon page={page} />;
   const display = filteredPageNames
     ? getHighlightedText(page.displayName, searchTerm)
     : page.displayName;
@@ -104,7 +126,7 @@ const NavItem = ({ page, depthLevel, searchTerm, filteredPageNames }) => {
           )}
           to={page.url}
         >
-          <span>
+          <span className={styles.navLinkText}>
             {headerIcon}
             {display}
           </span>
@@ -154,6 +176,12 @@ const NavItem = ({ page, depthLevel, searchTerm, filteredPageNames }) => {
   );
 };
 
+NavIcon.propTypes = {
+  page: PropTypes.shape({
+    displayName: PropTypes.string.isRequired,
+  }),
+};
+
 NavigationItems.propTypes = {
   pages: PropTypes.array.isRequired,
   filteredPageNames: PropTypes.array,

diff --git a/src/components/NavigationItems.module.scss b/src/components/NavigationItems.module.scss
@@ -51,6 +51,11 @@ button.navLink {
   }
 }
 
+.navLinkText {
+  display: flex;
+  align-items: center;
+}
+
 .currentPageIndicator {
   stroke-width: 4;
 }