Skip to main content
← All notes
Building

The sidebar card stops being a link when you are already looking at it

software

Every service page has a product sidebar listing every package for that service. The ProductSidebar component renders each package as a SidebarCard. The interesting part is the wrapper. When a card is not the active product, it wraps in a Next.js Link pointing to that product's checkout page. When a card is the active product — the one the client is currently viewing — it wraps in a plain div. No link, no pointer cursor, no navigation. You cannot click the thing you are already looking at. The implementation avoids duplicating the card markup by building the inner JSX first as a variable called inner, then conditionally wrapping it. If isActive is true, return a div containing inner. If false, return a Link containing inner. The Link uses scroll set to false so clicking a different package in the sidebar swaps the content without jumping the page back to the top. The scroll position stays put. The client can browse all four software packages without the viewport lurching with every click. The active card gets a visual treatment through inline styles. The border colour switches to the service accent CSS custom property. The background uses color-mix in sRGB to blend ten percent of the accent into transparent, creating a subtle tinted glass effect that signals which package is selected. The border width increases from one pixel to two. Inactive cards use the default glass border and glass background tokens so they recede visually. The hover state on inactive cards uses Tailwind's arbitrary variant syntax — hover colon ampersand greater-than div colon border-accent at fifty percent opacity. That nested selector targets the inner div from the outer Link's hover state, so the border tint appears on mouseover without any JavaScript event handlers or state updates. The whole sidebar is sixty-six lines. One component renders every product for a service, adapts its wrapper element based on selection state, and staggers its entrance with BlurReveal delays of one hundred milliseconds between cards.

Comments coming soon

Sign in with TikTok to leave a comment. Coming soon.