fix: move chevrons to right of the link

newrelic · Aug 7, 2020 · 91c2854 · 91c2854
1 parent ddd6107
commit 91c2854
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 15 deletions.
diff --git a/src/components/NavigationItems.js b/src/components/NavigationItems.js
@@ -155,29 +155,36 @@ const NavItem = ({ page, depthLevel, searchTerm, filteredPageNames }) => {
           >
             <span className={styles.navLinkText}>
               {headerIcon}
-              {depthLevel > 0 && page.children && (
-                <FeatherIcon
-                  className={cx(
-                    { [styles.isExpanded]: isExpanded },
-                    styles.nestedChevron
-                  )}
-                  name="chevron-right"
-                />
-              )}
               {display}
             </span>
+            {depthLevel > 0 && page.children && (
+              <FeatherIcon
+                className={cx(
+                  { [styles.isExpanded]: isExpanded },
+                  styles.nestedChevron
+                )}
+                name="chevron-right"
+              />
+            )}
             {isExternal(page.url) && <FeatherIcon name="external-link" />}
           </Link>
         ) : (
-          <button
-            type="button"
+          <div
+            role="button"
+            css={css`
+              cursor: pointer;
+            `}
             className={cx(styles.navLink, {
               [styles.isPartiallyCurrent]: isBreadCrumb,
             })}
             onClick={() => setToggleIsExpanded(!toggleIsExpanded)}
             onKeyPress={() => setToggleIsExpanded(!toggleIsExpanded)}
             tabIndex={0}
           >
+            <span className={styles.navLinkText}>
+              {headerIcon}
+              {display}
+            </span>
             {depthLevel > 0 && (
               <FeatherIcon
                 className={cx(
@@ -187,9 +194,7 @@ const NavItem = ({ page, depthLevel, searchTerm, filteredPageNames }) => {
                 name="chevron-right"
               />
             )}
-            {headerIcon}
-            {display}
-          </button>
+          </div>
         )}
 
         {page.children && isExpanded && (

diff --git a/src/components/NavigationItems.module.scss b/src/components/NavigationItems.module.scss
@@ -52,7 +52,6 @@ button.navLink {
 }
 
 .nestedChevron {
-  margin-right: 0.5rem;
   stroke-width: 4;
   transition: 0.2s;