Merge pull request #1455 from processing/underline-2

Implement persistent underline for top-level site section in left sid…

Author: ksen0

src/components/Nav/MainNavLinks.tsx

@@ -15,6 +15,7 @@ type MainNavLinksProps = {
   hasJumpTo: boolean;
   handleToggle: () => void;
   isOpen: boolean;
+  currentPath: string;
 };
 
 export const MainNavLinks = ({
@@ -26,6 +27,7 @@ export const MainNavLinks = ({
   handleToggle,
   isOpen,
   hasJumpTo,
+  currentPath,
 }: MainNavLinksProps) => {
   if (!links || links?.length <= 0) return null;
 
@@ -75,8 +77,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,27 @@ const mainLinks = [
   { url: "/about/", label: t("About") },
 ] as { url: string; label: string }[];
 
+// Define which paths should trigger an underline for a parent section
+const unmatchedPathMappings: Record<string, string> = {
+  "/events/": "/community/",
+  "/sketches/": "/community/",
+  "/libraries/": "/community/",
+  "/people/": "/about/",
+  "/code-of-conduct/": "/about/",
+  "/education-resources/": "/tutorials/",
+  "/donate/": "/contribute/"
+};
+
+// Check if the current URL matches the extra triggers
+const extraPathTriggers = Object.keys(unmatchedPathMappings).find(trigger => 
+  pathMinusLocale.startsWith(trigger)
+);
+
+// Set the active path: use the mapping if found, otherwise fall back to the main links logic
+const currentPath = extraPathTriggers 
+  ? unmatchedPathMappings[extraPathTriggers] 
+  : (mainLinks.find((link) => pathMinusLocale.startsWith(link.url))?.url ?? "");
+
 const editorButtonLabel = t("Start Coding");
 const donateButtonLabel = t("Donate");
 const mobileMenuLabel = t("Menu");
@@ -37,6 +58,7 @@ const jumpToLabel = t("Jump To");
     mobileMenuLabel={mobileMenuLabel as string}
     jumpToLabel={jumpToLabel as string}
     jumpToState={jumpToState}
+    currentPath={currentPath} 
     client:load
   />
 </nav>