Conditional class is wrong when built, but correct in dev

[west dragon]

<ul id="title-bar">
                    <li><a id="nav-item" class={Astro.url.pathname == "/projects" ? "disabled" : undefined} href="/projects">Projects</a></li>
                    <li><a id="nav-item" class={Astro.url.pathname == "/gallery" ? "disabled" : undefined} href="/gallery">Gallery</a></li>
                    <li><a id="nav-item" class={Astro.url.pathname == "/" ? "disabled" : undefined} href="/">Home</a></li>
                    <li><a id="nav-item" class={Astro.url.pathname == "/bio" ? "disabled" : undefined} href="/bio">Biography</a></li>
                    <li><a id="nav-item" class={Astro.url.pathname == "/contacts" ? "disabled" : undefined} href="/contacts">Contacts</a></li>
                </ul>

whenever running npm run dev, the class is set correctly, but when running npm run build && npm run preview, the class is only added on the index page

[west dragon]

<li><a id="nav-item" class={Astro.url.pathname == "/projects/" ? "disabled" : undefined} href="/projects">Projects</a></li>
                    <li><a id="nav-item" class={Astro.url.pathname == "/gallery/" ? "disabled" : undefined} href="/gallery">Gallery</a></li>
                    <li><a id="nav-item" class={Astro.url.pathname == "/" ? "disabled" : undefined} href="/">Home</a></li>
                    <li><a id="nav-item" class={Astro.url.pathname == "/bio/" ? "disabled" : undefined} href="/bio">Biography</a></li>
                    <li><a id="nav-item" class={Astro.url.pathname == "/contacts/" ? "disabled" : undefined} href="/contacts">Contacts</a></li>

fixed it

[slender crest]

it's a trailing slash issue. There are several solutions to this, one of them being this:

const rmTrailingSlash = (path: string): string => {
  return path.endsWith("/") && path.length > 1 
    ? path.slice(0, path.length - 1) 
    : path;
}

const pathname = rmTrailingSlash(Astro.url.pathname);

An alternative is to set trailingSlash to never in your Astro config.