wehub-resource-sync
70 lines
1.9 KiB
TypeScript
70 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import { usePathname } from 'next/navigation';
|
|
|
|
const navItems = [
|
|
{ href: '/docs', label: 'Docs' },
|
|
{ href: '/examples', label: 'Examples' },
|
|
{ href: '/docs/api', label: 'API' },
|
|
];
|
|
|
|
export function TopNav() {
|
|
const pathname = usePathname();
|
|
|
|
const isActive = (href: string) => {
|
|
if (href === '/docs') {
|
|
return pathname === '/docs' ||
|
|
(pathname.startsWith('/docs') &&
|
|
!pathname.startsWith('/docs/api'));
|
|
}
|
|
return pathname.startsWith(href);
|
|
};
|
|
|
|
return (
|
|
<header className="sticky top-0 z-50 border-b border-fd-border bg-fd-background">
|
|
<div className="flex h-14 items-center px-6 gap-6">
|
|
{/* Logo */}
|
|
<Link href="/" className="flex items-center">
|
|
<Image
|
|
src="/Composio Logo.svg"
|
|
alt="Composio"
|
|
width={110}
|
|
height={20}
|
|
className="dark:hidden"
|
|
priority
|
|
/>
|
|
<Image
|
|
src="/Composio Logo Dark.svg"
|
|
alt="Composio"
|
|
width={110}
|
|
height={20}
|
|
className="hidden dark:block"
|
|
priority
|
|
/>
|
|
</Link>
|
|
|
|
{/* Nav Items */}
|
|
<nav className="flex items-center gap-1">
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 ${
|
|
isActive(item.href)
|
|
? 'text-[var(--composio-orange)]'
|
|
: 'text-fd-muted-foreground hover:text-fd-foreground'
|
|
}`}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|