fix: refactored and removed mobile prop

newrelic · Jun 25, 2020 · 0933aba · 0933aba
1 parent 63eca33
commit 0933aba
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 21 deletions.
diff --git a/src/components/MobileHeader.js b/src/components/MobileHeader.js
@@ -33,11 +33,7 @@ const MobileHeader = ({ className, isOpen, toggle }) => {
             onChange={(e) => setSearchTerm(e.target.value)}
             value={searchTerm}
           />
-          <Navigation
-            mobile
-            searchTerm={searchTerm}
-            className={styles.navigation}
-          />
+          <Navigation searchTerm={searchTerm} className={styles.navigation} />
         </>
       )}
     </header>

diff --git a/src/components/Navigation.js b/src/components/Navigation.js
@@ -25,7 +25,7 @@ const filterPageNames = (pages, searchTerm, parent = []) => {
   ].filter((el) => el !== undefined);
 };
 
-const Navigation = ({ className, searchTerm, mobile }) => {
+const Navigation = ({ className, searchTerm }) => {
   const searchTermSanitized = searchTerm?.replace(
     /[.*+?^${}()|[\]\\]/g,
     '\\$&'
@@ -50,7 +50,6 @@ const Navigation = ({ className, searchTerm, mobile }) => {
           searchTerm={searchTermSanitized}
           pages={pages}
           filteredPageNames={filteredPageNames}
-          mobile={mobile}
         />
       </ul>
     </nav>

diff --git a/src/components/NavigationItems.js b/src/components/NavigationItems.js
@@ -24,7 +24,6 @@ const NavigationItems = ({
   filteredPageNames,
   searchTerm,
   depthLevel = 0,
-  mobile,
 }) => {
   const groupedPages = pages.reduce((groups, page) => {
     const { group = '' } = page;
@@ -53,21 +52,14 @@ const NavigationItems = ({
             searchTerm={searchTerm}
             filteredPageNames={filteredPageNames}
             key={index}
-            mobile={mobile}
           />
         ))}
       </Fragment>
     );
   });
 };
 
-const NavItem = ({
-  page,
-  depthLevel,
-  searchTerm,
-  filteredPageNames,
-  mobile,
-}) => {
+const NavItem = ({ page, depthLevel, searchTerm, filteredPageNames }) => {
   const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.displayName);
   const isHomePage = crumbs.length === 0 && depthLevel === 0;
 
@@ -116,7 +108,7 @@ const NavItem = ({
             {headerIcon}
             {display}
           </span>
-          {!mobile && isCurrentPage && (
+          {isCurrentPage && (
             <FeatherIcon
               className={styles.currentPageIndicator}
               name="chevron-right"
@@ -131,7 +123,7 @@ const NavItem = ({
           onKeyPress={() => setIsExpanded(!isExpanded)}
           tabIndex={0}
         >
-          {!mobile && depthLevel > 0 && (
+          {depthLevel > 0 && (
             <FeatherIcon
               className={cx(
                 { [styles.isExpanded]: isExpanded },
@@ -155,7 +147,6 @@ const NavItem = ({
             filteredPageNames={filteredPageNames}
             depthLevel={depthLevel + 1}
             searchTerm={searchTerm}
-            mobile={mobile}
           />
         </ul>
       )}
@@ -168,15 +159,13 @@ NavigationItems.propTypes = {
   filteredPageNames: PropTypes.array,
   searchTerm: PropTypes.string,
   depthLevel: PropTypes.number,
-  mobile: PropTypes.bool,
 };
 
 NavItem.propTypes = {
   page: link,
   filteredPageNames: PropTypes.array,
   searchTerm: PropTypes.string,
   depthLevel: PropTypes.number.isRequired,
-  mobile: PropTypes.bool,
 };
 
 export default NavigationItems;
diff --git a/src/components/NavigationItems.module.scss b/src/components/NavigationItems.module.scss
@@ -53,6 +53,9 @@ button.navLink {
 
 .currentPageIndicator {
   stroke-width: 4;
+  @media (min-width: 760px + 1) {
+    display: none;
+  }
 }
 
 .nestedChevron {