44fc04e3ea
The styling for various components including site navigation and the site header has been updated. Changes include amendments to layout options, color, spacing, and border adaptations to provide better visibility and user interaction. The shadow on the top loading bar indicator has also been relocated to enhance the bar's visibility.
37 lines
884 B
TypeScript
37 lines
884 B
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
|
|
import { NavigationMenuItem } from '@kit/ui/navigation-menu';
|
|
import { cn, isRouteActive } from '@kit/ui/utils';
|
|
|
|
const getClassName = (path: string, currentPathName: string) => {
|
|
const isActive = isRouteActive(path, currentPathName);
|
|
|
|
return cn(
|
|
`text-sm font-medium px-2.5 py-2 border rounded-lg border-transparent transition-colors`,
|
|
{
|
|
'hover:border-border': !isActive,
|
|
'dark:bg-secondary bg-gray-50': isActive,
|
|
},
|
|
);
|
|
};
|
|
|
|
export function SiteNavigationItem({
|
|
path,
|
|
children,
|
|
}: React.PropsWithChildren<{
|
|
path: string;
|
|
}>) {
|
|
const currentPathName = usePathname();
|
|
|
|
return (
|
|
<NavigationMenuItem key={path}>
|
|
<Link className={getClassName(path, currentPathName)} href={path}>
|
|
{children}
|
|
</Link>
|
|
</NavigationMenuItem>
|
|
);
|
|
}
|