Changed website to match fix of quick nav

Author: agonzalez97

website/screens/common/HeadingLink.tsx

@@ -8,10 +8,11 @@ type HeadingLinkProps = {
   children: string;
   level?: 1 | 2 | 3 | 4 | 5;
   as?: "h1" | "h2" | "h3" | "h4" | "h5";
+  navSubtitle?: string;
 };
 
-function HeadingLink({ children, level, as }: HeadingLinkProps) {
-  const elementId = slugify(children, { lower: true });
+function HeadingLink({ children, level, as, navSubtitle }: HeadingLinkProps) {
+  const elementId = slugify(navSubtitle ?? children, { lower: true });
   return (
     <HeadingLinkContainer id={elementId}>
       <HeadingAnchor href={`#${elementId}`}>{linkIcon}</HeadingAnchor>

website/screens/common/Section.tsx

@@ -9,20 +9,24 @@ type SectionType = {
   level?: 1 | 2 | 3 | 4 | 5;
   subSections?: SectionType[];
   children?: React.ReactNode;
+  navSubtitle?: string;
 };
 
 const Section = ({
   title,
   subSections,
   level,
   children,
+  navSubtitle,
 }: SectionType): JSX.Element => {
   return (
     <DxcFlex
       direction="column"
       gap={level === 1 ? "3rem" : level === 2 ? "2rem" : "1.5rem"}
     >
-      <HeadingLink level={level}>{title}</HeadingLink>
+      <HeadingLink level={level} navSubtitle={navSubtitle}>
+        {title}
+      </HeadingLink>
       {children}
       {subSections?.map((subSection) => {
         return (
@@ -32,6 +36,7 @@ const Section = ({
               title={subSection.title}
               subSections={subSection.subSections}
               level={level + 1 <= 5 ? level + 1 : 5}
+              navSubtitle={`${title} ${subSection.title}`}
             >
               {subSection.content}
             </Section>