5ee7bacb2a
The navigation menu item styles were adjusted for better appearance. Also, the spacing in the NavigationMenuList was increased for better user experience. Moreover, a few unused imports in page.tsx were removed to clean up the code. Additionally, the button class formatting was adjusted for better readability and consistency.
92 lines
2.1 KiB
TypeScript
92 lines
2.1 KiB
TypeScript
import Link from 'next/link';
|
|
|
|
import { Menu } from 'lucide-react';
|
|
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from '@kit/ui/dropdown-menu';
|
|
import { NavigationMenu, NavigationMenuList } from '@kit/ui/navigation-menu';
|
|
import { Trans } from '@kit/ui/trans';
|
|
|
|
import { SiteNavigationItem } from './site-navigation-item';
|
|
|
|
const links = {
|
|
Blog: {
|
|
label: 'marketing:blog',
|
|
path: '/blog',
|
|
},
|
|
Docs: {
|
|
label: 'marketing:documentation',
|
|
path: '/docs',
|
|
},
|
|
Pricing: {
|
|
label: 'marketing:pricing',
|
|
path: '/pricing',
|
|
},
|
|
FAQ: {
|
|
label: 'marketing:faq',
|
|
path: '/faq',
|
|
},
|
|
Contact: {
|
|
label: 'marketing:contact',
|
|
path: '/contact',
|
|
},
|
|
};
|
|
|
|
export function SiteNavigation() {
|
|
const NavItems = Object.values(links).map((item) => {
|
|
return (
|
|
<SiteNavigationItem key={item.path} path={item.path}>
|
|
<Trans i18nKey={item.label} />
|
|
</SiteNavigationItem>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<div className={'hidden items-center justify-center md:flex'}>
|
|
<NavigationMenu
|
|
className={
|
|
'rounded-full border border-gray-100 px-4 py-2 dark:border-primary/10'
|
|
}
|
|
>
|
|
<NavigationMenuList className={'space-x-4'}>
|
|
{NavItems}
|
|
</NavigationMenuList>
|
|
</NavigationMenu>
|
|
</div>
|
|
|
|
<div className={'flex justify-start sm:items-center md:hidden'}>
|
|
<MobileDropdown />
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function MobileDropdown() {
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger aria-label={'Open Menu'}>
|
|
<Menu className={'h-8 w-8'} />
|
|
</DropdownMenuTrigger>
|
|
|
|
<DropdownMenuContent className={'w-full'}>
|
|
{Object.values(links).map((item) => {
|
|
const className = 'flex w-full h-full items-center';
|
|
|
|
return (
|
|
<DropdownMenuItem key={item.path} asChild>
|
|
<Link className={className} href={item.path}>
|
|
<Trans i18nKey={item.label} />
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
);
|
|
})}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|