Active nav link state not showing #20

New Issue

Octech6711 · 2025-09-09T19:41:44-05:00

Octech6711 commented

2025-09-09 19:41:44 -05:00

Originally created by @DilsonsPickles on GitHub.

Run locally the active nav link renders blue:

This doesn't appear to be happening in our staging environment.

function getUrlPath(url) { const parts = url.split("/"); return "/" + parts[parts.length - 1]; }

function renderNavLink(navLink, index) {
    return (
      <a
        href={navLink.href}
        target={navLink.target}
        key={index}
        className={
          getUrlPath(currentURL) === navLink.href
            ? "font-regular text-blue-700"
            : "font-regular text-gray-800 hover:text-blue-700"
        }
      >
        {navLink.linkText}
      </a>
    );
  }

Add console.log to above code to check what getUrlPath is returning on staging

Originally created by @DilsonsPickles on GitHub. Run locally the active nav link renders blue: <img width="591" alt="image" src="https://github.com/audacity/audacity.github.io/assets/111350316/d1cfe9ce-bc10-4196-b9d5-e04dd8cda6bd"> This doesn't appear to be happening in our staging environment. ` function getUrlPath(url) { const parts = url.split("/"); return "/" + parts[parts.length - 1]; }` ``` function renderNavLink(navLink, index) { return ( <a href={navLink.href} target={navLink.target} key={index} className={ getUrlPath(currentURL) === navLink.href ? "font-regular text-blue-700" : "font-regular text-gray-800 hover:text-blue-700" } > {navLink.linkText} </a> ); } ``` Add console.log to above code to check what getUrlPath is returning on staging

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: audacity/audacity.github.io#20