59e7eaf1a4
This commit focuses on refining UI/UX across various components and pages of the application. Changes include adjusting padding and spacing to enhance the overall readability and user interaction, amending hyperlink styling, modifying dropdown menus for optimized mobile experience, and adjusting key UI elements. Other modifications include revising imports for better maintainability, and adding enhancements to several UI components to improve their visual presentation.
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',
|
|
},
|
|
Pricing: {
|
|
label: 'marketing:pricing',
|
|
path: '/pricing',
|
|
},
|
|
FAQ: {
|
|
label: 'marketing:faq',
|
|
path: '/faq',
|
|
},
|
|
};
|
|
|
|
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 lg:flex'}>
|
|
<NavigationMenu>
|
|
<NavigationMenuList className={'space-x-6'}>
|
|
{NavItems}
|
|
</NavigationMenuList>
|
|
</NavigationMenu>
|
|
</div>
|
|
|
|
<div className={'flex items-center lg:hidden'}>
|
|
<MobileDropdown />
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function MobileDropdown() {
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger aria-label={'Open Menu'}>
|
|
<Menu className={'h-9'} />
|
|
</DropdownMenuTrigger>
|
|
|
|
<DropdownMenuContent className={'w-full'}>
|
|
{Object.values(links).map((item) => {
|
|
const className = 'flex w-full h-full items-center';
|
|
|
|
return (
|
|
<DropdownMenuItem key={item.path}>
|
|
<Link className={className} href={item.path}>
|
|
<Trans i18nKey={item.label} />
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
);
|
|
})}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|