Scrolling bug in HCD left nav menu

config/gulp/scripts.js

@@ -1,6 +1,7 @@
 const { src, dest, series } = require("gulp");
 const webpack = require("webpack-stream");
 const compiler = require("webpack");
+const TerserPlugin = require('terser-webpack-plugin');
 
 // Directories
 const USWDS = "node_modules/@uswds/uswds/dist";
@@ -23,15 +24,32 @@ function copyUswdsJS() {
  * @return {File} common.js - The bundled and uglified script.
  */
 function compile() {
+
+  // check the environment mode
+  // if it is development, then set the mode to development
+  const isProduction = process.env.NODE_ENV === 'production';
+  const webpackConfig = {
+    mode: isProduction ? 'production' : 'development',
+    devtool: isProduction ? false : 'inline-source-map',
+    optimization: {
+      minimize: true,
+      minimizer: [new TerserPlugin({
+        terserOptions: {
+          keep_fnames: !isProduction, // Keep function names in non-production
+          keep_classnames: true
+        }
+      })],
+    },
+  };
+
+
   // Stream images is imported by itself in `content/images/_index.md`.
   return src([`${PROJECT_JS_SRC}/*.js`], {
     sourcemaps: true,
   })
     .pipe(
       webpack(
-        {
-          mode: "production",
-        },
+        webpackConfig,
         compiler
       )
     )

content/guides/hcd/design-concepts/simple-is-hard.md

@@ -12,7 +12,7 @@ primary_image: hcd-design-concepts
 Leadership and clients should not expect a design solution to be completely finished in a month, especially if the team is working on multiple projects either together or apart, but rationally defining the term of the design phase can help.
 
 
-### Making decisions
+## Making decisions
 
 A successful design phase requires the team to make a lot of decisions. Some of these include: what to design, how to make a model or prototype of it, who to test with, how to test it, how to get on those peoples’ calendars, how long to wait before finding other people to test with, how to integrate their feedback, and how to move through iterations on that feedback.
 

content/resources/requirements-for-improving-access-to-services-for-people-with-limited-english-proficiency-lep.md

@@ -26,23 +26,23 @@ weight: 1
 
 ## What is Executive Order 13166?
 
-All people in this country, regardless of the language they speak, deserve meaningful access to programs and activities that are conducted or supported by federal agencies. 
+All people in this country, regardless of the language they speak, deserve meaningful access to programs and activities that are conducted or supported by federal agencies.
 
 [Executive Order 13166, Improving Access to Services for Persons with Limited English Proficiency](https://www.federalregister.gov/documents/2000/08/16/00-20938/improving-access-to-services-for-persons-with-limited-english-proficiency) was issued more than two decades ago in August 2000. It affirms the federal government's commitment to improve the accessibility of these services, and to help ensure full participation by individuals with limited English proficiency (LEP).
 
 In November 2022, Attorney General Merrick B. Garland issued a memorandum to all federal agencies, [Strengthening the Federal Government’s Commitment to Language Access (PDF, 289 KB, 2 pages)](https://www.justice.gov/ag/file/1554086/dl). This memo builds upon Executive Order 13166 — requiring agencies to reexamine and enhance their practices for creating a more accessible environment to those with limited English proficiency. Additionally, the memo asks agencies to share best practices for providing access to multilingual information with each other.
 
 ## Why is it important?
 
-Millions of Americans have limited English proficiency, meaning that they have difficulty reading, writing, speaking—or any combination of the three—in English. For example, finding a job, receiving education, and accessing healthcare can all be extremely difficult for these individuals when resources and information are not provided in their language. 
+Millions of Americans have limited English proficiency, meaning that they have difficulty reading, writing, speaking—or any combination of the three—in English. For example, finding a job, receiving education, and accessing healthcare can all be extremely difficult for these individuals when resources and information are not provided in their language.
 
-The Census Bureau estimates that about [8.3% of the U.S. population](https://public.tableau.com/views/PeopleThatSpeakEnglishLessthanVeryWellintheUnitedStates/2018LanguageCounty?:showVizHome=no) is of limited English proficiency, which they [define](https://www.census.gov/topics/population/language-use/about/faqs.html#ti1043546883) as those who respond that they speak English at any level less than "very well." And the need for language access will continue to grow as the population with limited English proficiency grows. 
+The Census Bureau estimates that about [8.3% of the U.S. population](https://public.tableau.com/views/PeopleThatSpeakEnglishLessthanVeryWellintheUnitedStates/2018LanguageCounty?:showVizHome=no) is of limited English proficiency, which they [define](https://www.census.gov/topics/population/language-use/about/faqs.html#ti1043546883) as those who respond that they speak English at any level less than "very well." And the need for language access will continue to grow as the population with limited English proficiency grows.
 
 Further strengthening and improving meaningful language access ensures we address linguistic barriers in governmental services that would otherwise deny individuals a full opportunity to participate in economic, social, and civic life.
 
 ## What’s in the Executive Order?
 
-The executive order requires agencies to examine the services they provide, and then develop and implement a system by which LEP individuals can meaningfully access these services. 
+The executive order requires agencies to examine the services they provide, and then develop and implement a system by which LEP individuals can meaningfully access these services.
 
 [Title VI of the landmark Civil Rights Act of 1964](https://www.govinfo.gov/content/pkg/USCODE-2008-title42/html/USCODE-2008-title42-chap21-subchapV.htm) prohibits discrimination on the basis of race, color, and national origin in programs and activities receiving federal financial assistance. Executive Order 13166 also requires agencies to ensure that these recipients of federal financial assistance provide meaningful access to their applicants and beneficiaries with limited English proficiency. The [Department of Justice’s Final LEP Guidance](https://www.federalregister.gov/documents/2002/06/18/02-15207/guidance-to-federal-financial-assistance-recipients-regarding-title-vi-prohibition-against-national) provides compliance standards for recipients to follow.
 
@@ -60,9 +60,9 @@ Executive Order 13166 requires:
 <a href="https://www.federalregister.gov/documents/2000/08/16/00-20938/improving-access-to-services-for-persons-with-limited-english-proficiency">Explore Executive Order 13166</a>
 </article>
 
-## How does the memo strengthen the Executive Order? 
+## How does the memo strengthen the Executive Order?
 
-The Attorney General’s November 2022 memorandum requires agencies to improve upon their current processes for language access. The criteria for enhancing agency language access systems involves assessing whether agencies: 
+The Attorney General’s November 2022 memorandum requires agencies to improve upon their current processes for language access. The criteria for enhancing agency language access systems involves assessing whether agencies:
 
 * Can enhance their existing language access policies and plans
 * Can effectively reach individuals with limited English proficiency when disseminating information
@@ -71,8 +71,8 @@ The Attorney General’s November 2022 memorandum requires agencies to improve u
 
 Executive Order 13166 requires each federal agency to create a limited English proficiency (LEP) plan. In November 2023, as part of the one-year anniversary of the Attorney General’s memorandum on strengthening the federal government’s commitment to language access, several agencies released their [federal agency language access plans on LEP.gov](https://www.lep.gov/language-access-plans).
 
-{{< note >}} 
+{{< note >}}
 Digital.gov provides information and resources for federal agencies related to web and digital policies. However, we cannot interpret the statutes or specific requirements.
 
-To contact the Department of Justice’s Civil Rights Division with any questions about interpretations of the executive order, memo, or Title VI of the Civil Rights Act, visit <a href="https://www.lep.gov/contact-us">LEP.gov/contact-us</a>. 
+To contact the Department of Justice’s Civil Rights Division with any questions about interpretations of the executive order, memo, or Title VI of the Civil Rights Act, visit <a href="https://www.lep.gov/contact-us">LEP.gov/contact-us</a>.
 {{< /note >}}

package.json

@@ -55,6 +55,7 @@
     "sass": "^1.69.7",
     "sass-embedded": "^1.69.7",
     "sharp": "^0.33.3",
+    "terser-webpack-plugin": "^5.3.10",
     "webpack-stream": "^7.0.0"
   },
   "devDependencies": {

themes/digital.gov/src/js/guide-sidenav.js

@@ -154,11 +154,25 @@ function findTopHeading(
 
   // Recursive case
   /* eslint-disable no-param-reassign */
-  if (scrollPos < headings[i].offsetTop) {
+  // Caluclate the distance of the current heading fro the top of the page
+  // getBoundingClientRect().top gives the distance from the viewport, so we add the scrollY to get the distance from the top of the page
+  const currentHeadingTop =
+    headings[i].getBoundingClientRect().top + window.scrollY;
+
+  //   // Calculate the distance of the next heading from the top of the document, if there is a next heading
+  // If there is no next heading, set nextHeadingTop to Infinity
+  const nextHeadingTop =
+    i < headings.length - 1
+      ? headings[i + 1].getBoundingClientRect().top + window.scrollY
+      : Infinity;
+
+  // If the scroll position is greater than the current heading's distance from the top of the page
+  // and less than the next heading's distance from the top of the page, the current heading is the top heading
+  if (scrollPos >= currentHeadingTop && scrollPos < nextHeadingTop) {
     found = true;
-  } else {
     topHeading = headings[i];
   }
+  // Call the function recursively for the next heading
   return findTopHeading(i + 1, found, scrollPos, headings, topHeading);
 }