Add smooth scroll and fix styles on in page nav

src/frontend/components/field--objectives.tsx

@@ -43,7 +43,6 @@ interface FieldObjectiveProps {
 
 
 export function FieldObjectives({fieldObjectives} : FieldObjectiveProps) {
-  console.log(fieldObjectives)
   return (
     <div>
       <h2 className="font-sans-2xl margin-bottom-1" id="objectives">

src/frontend/components/usa--in-page-nav.tsx

@@ -1,9 +1,23 @@
-import * as React from "react";
+import { useState, useEffect } from "react";
+import Link from 'next/link'
 import { FieldLogo } from './field--logo';
 
 // TODO: Add scrollTo code for long pages when using in page navigation.
 
 export function USAInPageNav({links, logo, logoAbove = true}) {
+  const [currentLink, setCurrentLink] = useState(links[0].href);
+  // const [scrollTarget, setScrollTarget] = useState(links[0].href);
+  // useEffect(() => {
+  //   if (currentLink !== scrollTarget) {
+  //     setScrollTarget(currentLink);
+  //     let id = currentLink;
+  //     if (id.charAt(0) === "#") {
+  //       id = id.substring(1);
+  //     }
+  //     document.getElementById(id).scrollIntoView({behavior: "smooth"})
+  //   }
+  // }, [currentLink, scrollTarget])
+
   return (
     <aside
       className="usa-in-page-nav"
@@ -24,12 +38,13 @@ export function USAInPageNav({links, logo, logoAbove = true}) {
         <ul className="usa-in-page-nav__list">
           {links.map((link) => (
             <li key={link.href} className={`usa-in-page-nav__item${link.primary ? " usa-in-page-nav__item--primary" : ""}`}>
-              <a
+              <Link
                 href={link.href}
-                className="usa-in-page-nav__link"
+                onClick={() => setCurrentLink(link.href)}
+                className={`usa-in-page-nav__link ${link.href === currentLink ? "usa-current" : ""}`}
               >
                 {link.label}
-              </a>
+              </Link>
             </li>
           ))}
         </ul>

src/frontend/styles/components/usa--in-page-nav.scss

@@ -0,0 +1,11 @@
+html {
+  scroll-behavior: smooth;
+}
+
+.usa-in-page-nav__item {
+  font-weight: 400 !important;
+}
+
+.usa-in-page-nav__item--primary {
+  font-weight: 700 !important;
+}

src/frontend/styles/project-styles.scss

@@ -1 +1,2 @@
-@import "./components/field--goal-type.scss";
+@import "./components/field--goal-type.scss";
+@import "./components/usa--in-page-nav.scss";