fix: checkmark padding issue on the navbar (#1510)

* fix: fixed the navbar checkmark icon extra space issue * fix: added checkkmark in sidenav bar too * fix: added location undefined issue
adobe · May 19, 2023 · 9b7c31f · 9b7c31f
1 parent af1ef54
commit 9b7c31f
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 7 deletions.
diff --git a/packages/gatsby-theme-aio/src/components/GlobalHeader/index.js b/packages/gatsby-theme-aio/src/components/GlobalHeader/index.js
@@ -670,10 +670,8 @@ const GlobalHeader = ({
                                       -webkit-justify-content: center;
                                       justify-content: center;
                                       box-sizing: border-box;
-                                      padding: 0 var(--spectrum-global-dimension-size-175) !important;
-                                      margin-right: var(
-                                        --spectrum-global-dimension-size-175
-                                      ) !important;
+                                      padding: ${selectedMenu !== undefined && "0 var(--spectrum-global-dimension-size-175) !important"};
+                                      margin-right: ${selectedMenu === undefined && "var(--spectrum-global-dimension-size-175) !important; "}
                                       white-space: nowrap;
                                       color: var(--spectrum-global-color-gray-700) !important;
                                       -webkit-transition: background-color
@@ -690,6 +688,15 @@ const GlobalHeader = ({
                                         color: var(--spectrum-global-color-gray-900) !important;
                                         text-decoration: none !important;
                                       }
+
+                                      &>div>div{
+                                        width:var(--spectrum-global-dimension-size-100) !important;
+                                      }
+
+                                      &>div>div>svg{
+                                        padding : 0 !important;
+                                      }
+
                                     `}
                                     onKeyDown={e => {
                                       if (e.key === 'ArrowDown') {

diff --git a/packages/gatsby-theme-aio/src/components/Layout/index.js b/packages/gatsby-theme-aio/src/components/Layout/index.js
@@ -860,6 +860,7 @@ export default ({ children, pageContext, location }) => {
                 `}>
                 <SideNav
                   mainNavPages={pages}
+                  location={location}
                   selectedPages={sideNavSelectedPages}
                   selectedSubPages={sideNavSelectedSubPages}
                   setShowSideNav={setShowSideNav}

diff --git a/packages/gatsby-theme-aio/src/components/SideNav/index.js b/packages/gatsby-theme-aio/src/components/SideNav/index.js
@@ -13,19 +13,49 @@
 import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Link as GatsbyLink } from 'gatsby';
-import { isBrowser, isExternalLink, getExternalLinkProps, MOBILE_SCREEN_WIDTH } from '../../utils';
+import { isBrowser,   findSelectedTopPage,
+  findSelectedTopPageMenu,
+  rootFix,
+  rootFixPages, isExternalLink, getExternalLinkProps, MOBILE_SCREEN_WIDTH } from '../../utils';
 import { css } from '@emotion/react';
 import classNames from 'classnames';
 import '@spectrum-css/sidenav';
 import nextId from 'react-id-generator';
-import { ChevronRight } from '../Icons';
+import { ChevronRight, CheckMark } from '../Icons';
 import { AnchorButton } from '../AnchorButton';
 
-const SideNav = ({ mainNavPages, selectedPages, selectedSubPages, setShowSideNav }) => {
+
+const getSelectedTabIndex = (location, pages) => {
+  const pathWithRootFix = rootFix(location.pathname);
+  const pagesWithRootFix = rootFixPages(pages);
+
+  let selectedIndex = pagesWithRootFix.indexOf(
+    findSelectedTopPage(pathWithRootFix, pagesWithRootFix)
+  );
+  let tempArr = pathWithRootFix.split('/');
+  let inx = tempArr.indexOf('use-cases');
+  if (selectedIndex === -1 && inx > -1) {
+    tempArr[inx + 1] = 'agreements-and-contracts';
+    tempArr[inx + 2] = 'sales-proposals-and-contracts';
+    if (tempArr[inx + 3] == undefined) {
+      tempArr.push('');
+    }
+    let tempPathName = tempArr.join('/');
+    selectedIndex = pagesWithRootFix.indexOf(findSelectedTopPage(tempPathName, pagesWithRootFix));
+  }
+  // Assume first item is selected
+  if (selectedIndex === -1) {
+    selectedIndex = 0;
+  }
+  return selectedIndex;
+};
+
+const SideNav = ({ mainNavPages, selectedPages, selectedSubPages, setShowSideNav, location }) => {
   const [expandedPages, setExpandedPages] = useState([]);
   const [expandedMenus, setExpandedMenus] = useState([]);
   const [sideNavClick, setSideNavClick] = useState(false);
   const [mobileView, setMobileView] = useState(false);
+  const [selectedMenuItem, setSelectedMenuItem] = useState({});
 
   // If one page has header enabled, use header navigation type for all navigation items
   const hasHeader = selectedSubPages.some(page => page.header);
@@ -45,6 +75,13 @@ const SideNav = ({ mainNavPages, selectedPages, selectedSubPages, setShowSideNav
     };
   }, []);
 
+
+  useEffect(() => {
+    const index = getSelectedTabIndex(location, mainNavPages);
+    const pathWithRootFix = rootFix(location.pathname);
+    setSelectedMenuItem(findSelectedTopPageMenu(pathWithRootFix, mainNavPages[index]));
+  }, [location.pathname])
+
   useEffect(() => {
     if (window.innerWidth <= parseInt(MOBILE_SCREEN_WIDTH)) {
       setMobileView(true);
@@ -200,6 +237,7 @@ const SideNav = ({ mainNavPages, selectedPages, selectedSubPages, setShowSideNav
                 {...getExternalLinkProps(pageHref)}
                 href={pageHref}
                 className="spectrum-SideNav-itemLink">
+
                 {page.title}
               </a>
             ) : (
@@ -218,6 +256,7 @@ const SideNav = ({ mainNavPages, selectedPages, selectedSubPages, setShowSideNav
                 }}
                 to={pageHref}
                 className="spectrum-SideNav-itemLink">
+                { selectedMenuItem === page  && <CheckMark /> }
                 {page.title}
                 {page.menu && page.menu.length > 0 ? (
                   <ChevronRight