Function Header

app/components/Header.tsx:28–175

()

import ThemeSwitcher from './ThemeSwitcher'

const Header = () => {
  const pathname = usePathname()
  const [active, setActive] = useState(false)

  useEffect(() => {
    setActive(false)
  }, [pathname])

  const IsActive = (str: string) => {
    const lastPart = pathname.toLowerCase().split('/').pop()
    const strPart = str.toLowerCase().split('/').pop()
    return strPart === lastPart
  }
  return (
    <header
      className={`fixed top-0 z-50 w-full border-b bg-white dark:border-metal-800 ${pathname === '/' ? 'border-b-metal-100 dark:border-b-metal-900 dark:bg-[#0D1015]' : 'border-b-transparent dark:border-b-transparent dark:bg-metal-900'}`}>
      <div className="relative mx-auto max-w-7xl px-6 2xl:px-0">
        <nav className="flex items-center justify-between py-4">
          <div className="flex items-center space-x-28">
            <Link href="/" className="flex">
              <Image src={KeepLogo} alt="Keep React" width="130" height="53" className="block dark:hidden" />
              <Image src={KeepDarkLogo} alt="Keep React" width="130" height="53" className="hidden dark:block" />
            </Link>
            <div className="hidden laptop:ml-auto laptop:flex laptop:items-center laptop:space-x-10">
              {navbarRoutes.map((nav) => (
                <Link
                  key={nav.id}
                  href={nav.href}
                  target={nav.redirect ? '_blank' : '_self'}
                  className={`text-body-4 font-medium text-metal-600 hover:text-primary-500 active:text-primary-500 dark:text-metal-300 dark:active:text-white ${nav.name === 'Documentation' && pathname.includes('/docs/') ? 'text-primary-500 dark:text-white' : ''} ${nav.name === 'Blog' && pathname === '/blog' ? 'text-primary-500 dark:text-white' : ''}`}>
                  {nav.name}
                </Link>
              ))}
            </div>
          </div>
          <div className="flex items-center gap-3">
            <SearchBar />
            <Link
              href="https://github.com/StaticMania/keep-react"
              target="_blank"
              className="rounded-lg border border-metal-100 bg-white p-2.5 transition-all duration-300 hover:bg-metal-25 dark:border-metal-800 dark:bg-metal-900 dark:hover:border-metal-600 dark:hover:bg-metal-900">
              <Image src="/images/icon/github.svg" height={22} width={22} alt="github" className="block dark:hidden" />
              <Image
                src="/images/icon/github-dark.svg"
                height={22}
                width={22}
                alt="github"
                className="hidden dark:block"
              />
            </Link>
            <Link
              href="https://discord.gg/fSxDJyvJmr"
              target="_blank"
              className="rounded-lg border border-metal-100 bg-white p-2.5 transition-all duration-300 hover:bg-metal-25 dark:border-metal-800 dark:bg-metal-900 dark:hover:border-metal-600 dark:hover:bg-metal-900">
              <Image src="/images/icon/discord.svg" height={22} width={22} alt="discord" />
            </Link>
            <ThemeSwitcher />
            <button