Implement persistent underline for top-level site section in left side navigation

src/components/Nav/MainNavLinks.tsx

@@ -14,6 +14,7 @@ type MainNavLinksProps = {
   hasJumpTo: boolean;
   handleToggle: () => void;
   isOpen: boolean;
+  currentPath: string;
 };
 
 export const MainNavLinks = ({
@@ -25,6 +26,7 @@ export const MainNavLinks = ({
   handleToggle,
   isOpen,
   hasJumpTo,
+  currentPath,
 }: MainNavLinksProps) => {
   if (!links || links?.length <= 0) return null;
 
@@ -74,8 +76,10 @@ export const MainNavLinks = ({
       {renderLogo()}
       <ul>
         {links.map((link) => (
-          <li key={link.label}>
-            <a href={link.url}>{link.label}</a>
+          <li key={link.label} class={styles.linklabel}>
+            <a href={link.url} class={currentPath === link.url ? "current" : ""}>
+              {link.label}
+            </a>
           </li>
         ))}
       </ul>

src/components/Nav/NavPanels.tsx

@@ -14,6 +14,7 @@ interface NavPanelsProps {
   jumpToLabel: string;
   isHomepage: boolean;
   jumpToState: JumpToState | null;
+  currentPath: string;
 }
 
 /**
@@ -30,6 +31,7 @@ export const NavPanels = (props: NavPanelsProps) => {
     mobileMenuLabel,
     jumpToLabel,
     jumpToState,
+    currentPath,
   } = props;
 
   const [isOpen, setIsOpen] = useState({ main: false, jump: false });
@@ -90,6 +92,7 @@ export const NavPanels = (props: NavPanelsProps) => {
         hasJumpTo={jumpToState !== null}
         isOpen={isOpen.main}
         handleToggle={handleMainNavToggle}
+        currentPath={currentPath}
       />
       <JumpToLinks
         heading={jumpToState?.heading || jumpToLabel}

src/components/Nav/index.astro

@@ -19,6 +19,8 @@ const mainLinks = [
   { url: "/about/", label: t("About") },
 ] as { url: string; label: string }[];
 
+const currentPath = mainLinks.find((link) => pathMinusLocale.startsWith(link.url))?.url ?? "";
+
 const editorButtonLabel = t("Start Coding");
 const donateButtonLabel = t("Donate");
 const mobileMenuLabel = t("Menu");
@@ -37,6 +39,7 @@ const jumpToLabel = t("Jump To");
     mobileMenuLabel={mobileMenuLabel as string}
     jumpToLabel={jumpToLabel as string}
     jumpToState={jumpToState}
+    currentPath={currentPath} 
     client:load
   />
 </nav>