S
SolidJS•3mo ago
Mr Void

How to have active Anchor for "sibling" URL?

<A href="/abc/def/1" activeClass="activeLink">[1]</A>
<A href="/abc/def/1" activeClass="activeLink">[1]</A>
when url is /abc/def/1, the anchor has active link class, but not on /abc/def/<N> how can this be achieved? Using FileRoutes: /abc/[def]/[N].tsx
5 Replies
Madaxen86
Madaxen86•3mo ago
What about 
<A
//…
activeClass={id===1 ? "activeLink" ? ""
<A
//…
activeClass={id===1 ? "activeLink" ? ""
}
Mr Void
Mr VoidOP•3mo ago
Good morning, That didn't work either I also attempted to apply your suggestion in the class property, but still no luck: 
const params = useParams()

// ...

<A
  href="/abc/def/1"
  activeClass="activeLink"
  inactiveClass="border-transparent"
  class={`${params.chapter && "activeLink"}`}
>
   // ...
</A>
const params = useParams()

// ...

<A
  href="/abc/def/1"
  activeClass="activeLink"
  inactiveClass="border-transparent"
  class={`${params.chapter && "activeLink"}`}
>
   // ...
</A>
I've confirmed that params.chapter is not undefined
Madaxen86
Madaxen86•3mo ago
Are you using tailwindcss? Then you have to take a different approach. Am afk. But there are helper functions you need to wrap the class attribute in. Tailwind does not work with class list or active class.
Madaxen86
Madaxen86•3mo ago
Can you provide a reproduction on stackblitz? https://start.solidjs.com
SolidStart
SolidStart: Fine-Grained Reactivity goes fullstack
SolidStart is a JavaScript Framework designed to build SolidJS apps and deploy them to a variety of providers.
Mr Void
Mr VoidOP•3mo ago
I apologize for late reply After looking at the stackblitz example, I decided to test regex against pathname: 
const active = (r: RegExp) => r.test(location.pathname)

// ...

<A
    href="/bible/genesis/1"
    class={navButtonStyle + ` ${
      active(/\/bible\/[a-z]+\/\d{0,3}/gi) &&
      "border-base-300 dark:border-neutral"}`
    }
>
    <IoBookOutline size={20} />
</A>
const active = (r: RegExp) => r.test(location.pathname)

// ...

<A
    href="/bible/genesis/1"
    class={navButtonStyle + ` ${
      active(/\/bible\/[a-z]+\/\d{0,3}/gi) &&
      "border-base-300 dark:border-neutral"}`
    }
>
    <IoBookOutline size={20} />
</A>
which seems to be working now 😄 thank you :prayge:

Did you find this page helpful?