84 lines
1.9 KiB
TypeScript
84 lines
1.9 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',
|
|
},
|
|
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>
|
|
<NavigationMenuList className={'gap-x-2.5'}>
|
|
{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>
|
|
);
|
|
}
|