#How to wrap <Link /> in a styled component and sync the active state? And get typesafety

1 messages · Page 1 of 1 (latest)

native spruce
#

@upbeat shoal saw somone asked you this here as well #router message

I tried this implementation below. Not sure if this is the best way of doing this but not sure how to get type safety of the routes and apply active/inactive styling with the button wrapping the Link

any suggestions?

import { Link } from '@tanstack/react-router'

import { Button } from '../ui'

export type NavElementProps = {
    name: string
    icon: React.ReactNode
    route: string
}

export const NavElement: React.FC<NavElementProps> = ({
    name,
    route,
    icon,
}) => {
    return (
        <Button variant={'outline'}>
            {icon}
            <Link
                params={{}}
                search={{}}
                to={route}
                activeProps={{}}
                inactiveProps={{}}
            >
                {name}
            </Link>
        </Button>
    )
}
image.png
# 
interface NavBarProps {
    onMenuClick: () => void
    avatarUrl: string
    settingsOnClick: () => void
    navElement: NavElementProps[]
}
const navigation: NavElementProps[] = [
    {
        name: 'Contacts',
        icon: <Contact2 className='mr-2' />,
        route: '/contacts',
    },
    {
        name: 'Companies',
        icon: <Castle className='mr-2' />,
        route: '/companies',
    },
]

export const NavBar = ({ onMenuClick, settingsOnClick }: NavBarProps) => {
    const handleSelect = (value: string, label: string) => {
        console.log('Selected Value:', value)
        console.log('Selected Label:', label)
    }

    return (
...
        
          <div className='flex flex-row justify-end gap-2 bg-red-200 '>
          {/* Links */}
          <div className='hidden sm:ml-6 sm:block'>
              <div
                  data-testid='!!navbar-element-link'
                  className='flex space-x-4'
              >
                  {navigation.map(item => (
                      <NavElement
                          key={item.name}
                          name={item.name}
                          icon={item.icon}
                          route={item.route}
                      />
                  ))}
              </div>
          </div>
#

This is the navbar

manic thorn
#

@native spruce ^

native spruce
manic thorn