// /components/Side.tsx
const isActive = (path: string, route: string) => {
	// all routes other than auth routes include "/dashboard"
	// so handle that first
  if (route === '/dashboard') {
    return path === '/dashboard'
  } else {
    return path.includes(route)
  }
}

const Side = () => {
  const path = usePathname()
  const activeClass = 'bg-primary hover:bg-primary'
  
  return (
		//...
		{links.map((link) => (
      <div className="w-full" key={link.route}>
        <Link href={link.route}>
          <div
            className={`w-full h-full py-2 px-2 hover:bg-content1 rounded-lg ${
              isActive(path, link.route) ? activeClass : '' 
            }`}
          >
            {link.name}
          </div>
        </Link>
      </div>
    ))}
  )
}