Skip to content

Audit and fix <Button asChild> semantics wrapping disabled navigation links #459

Description

@Austinaminu2

File: components/layout/navbar.tsx:63-74, also components/landing/hero.tsx:117-125, components/streams/empty-state.tsx:24-29
Problem: navbar.tsx sets disabled={networkMismatch} on a Button asChild wrapping a <Link> (line 63). Base UI's disabled prop on an asChild/render-based button doesn't reliably propagate to the rendered <a> — so the "New stream" link may stay clickable/navigable during a network mismatch even though it looks disabled. Also, navbar.tsx duplicates ~20 lines of active-link logic between its desktop (63-74) and mobile (134-155) nav blocks.
Task: Verify (with a real network mismatch) whether the link is actually still navigable when it looks disabled; if so, replace the disabled prop with an onClick guard (preventDefault when networkMismatch) or conditional rendering. While in the file, extract the duplicated NAV_LINKS.map(...) active-link block into a shared helper used by both the desktop and mobile nav. Audit the other two Button asChild + Link usages listed above for the same issue.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Stellar WaveIssues in the Stellar wave programbugSomething isn't workingfrontendNext.js frontendhelp wantedExtra attention is needed

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions