42 lines
1.0 KiB
TypeScript
42 lines
1.0 KiB
TypeScript
'use client';
|
|
|
|
import { cn } from '@/lib/utils';
|
|
import { usePathname } from 'next/navigation';
|
|
|
|
let links = [
|
|
{ href: '', label: 'Applications' },
|
|
{ href: 'databases', label: 'Databases' },
|
|
{ href: 'registry', label: 'Registry' },
|
|
{ href: 'settings', label: 'Settings' },
|
|
];
|
|
|
|
export default function Navigation() {
|
|
let pathname = usePathname();
|
|
|
|
return (
|
|
<nav>
|
|
<ul className="flex flex-row justify-start mt-4 mb-2 gap-8">
|
|
{links.map(({ href, label }) => (
|
|
<li key={label}>
|
|
<a className={cn('px-3 py-2 rounded-md text-black font-medium text-sm', checkPathname(pathname, href) && 'bg-[#3A7BFE] text-white')} href={setHref(pathname, href)}>
|
|
{label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
);
|
|
}
|
|
|
|
function checkPathname(pathname: string, href: string): boolean {
|
|
const route = pathname.split('/')[2] || '';
|
|
if (route === href) return true;
|
|
return false;
|
|
}
|
|
|
|
function setHref(pathname: string, href: string): string {
|
|
const route = pathname.split('/')[1];
|
|
if (!route) return '';
|
|
return `/${route}/${href}`;
|
|
}
|