Merge pull request #2318 from dxc-technology/PelayoFelgueroso/quickNav-routing

Fix Quick Nav bug with HashRouter

Author: Jialecl

apps/website/screens/components/quick-nav/code/QuickNavCodePage.tsx

@@ -33,7 +33,8 @@ const sections = [
             </td>
             <td>
               Links of the quick nav component. Only first and second level links will be shown in the quick nav, due to
-              design restrictions. Each link has the following properties:
+              design restrictions. The component automatically detects HashRouter usage and enables smooth scrolling
+              navigation when appropriate. Each link has the following properties:
               <ul>
                 <li>
                   <b>label</b>: Text to be shown in the link. The content must be wrapped with an id equal to the

packages/lib/src/quick-nav/QuickNav.tsx

@@ -61,14 +61,29 @@ const Link = styled.a`
 
 export default function DxcQuickNav({ links, title }: QuickNavTypes) {
   const translatedLabels = useContext(HalstackLanguageContext);
+  const isHashRouter = (): boolean => {
+    if (typeof window === "undefined") return false;
+    return window.location.href.includes("/#/");
+  };
 
   return (
     <QuickNavContainer>
       <DxcHeading level={5} text={title ?? translatedLabels.quickNav.contentTitle} />
       <ListColumn>
         {links.map((link) => (
           <li key={link.label}>
-            <Link href={`#${slugify(link.label, { lower: true })}`}>
+            <Link
+              href={`#${slugify(link.label, { lower: true })}`}
+              onClick={
+                isHashRouter()
+                  ? (e) => {
+                      e.preventDefault();
+                      const id = slugify(link.label, { lower: true });
+                      document.getElementById(id)?.scrollIntoView();
+                    }
+                  : undefined
+              }
+            >
               <span>{link.label}</span>
             </Link>
             {link.links?.length && (
@@ -79,6 +94,15 @@ export default function DxcQuickNav({ links, title }: QuickNavTypes) {
                       href={`#${slugify(link?.label, { lower: true })}-${slugify(sublink?.label, {
                         lower: true,
                       })}`}
+                      onClick={
+                        isHashRouter()
+                          ? (e) => {
+                              e.preventDefault();
+                              const id = `${slugify(link.label, { lower: true })}-${slugify(sublink.label, { lower: true })}`;
+                              document.getElementById(id)?.scrollIntoView();
+                            }
+                          : undefined
+                      }
                     >
                       <span>{sublink.label}</span>
                     </Link>