oriyo_next/src/widgets/header/ui/desktop-nav.tsx

import Link from 'next/link';
import React from 'react';

import { cn } from '@/shared/lib/utils';
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from '@/shared/shadcn-ui/navigation-menu';

export function DesktopNav() {
  return (
    <NavigationMenu className='hidden lg:flex'>
      <NavigationMenuList>
        <NavigationMenuItem>
          <Link href='/' scroll>
            <NavigationMenuLink
              asChild
              className={navigationMenuTriggerStyle()}
            >
              <span>Главная</span>
            </NavigationMenuLink>
          </Link>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <Link href='/#stations' scroll>
            <NavigationMenuLink
              asChild
              className={navigationMenuTriggerStyle()}
            >
              <span>Наши заправки</span>
            </NavigationMenuLink>
          </Link>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Клиентам</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className='grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]'>
              <li className='row-span-4'>
                <NavigationMenuLink asChild>
                  <a
                    className='flex h-full w-full flex-col justify-end rounded-md bg-gradient-to-b from-red-500 to-red-700 p-6 no-underline outline-none select-none focus:shadow-md'
                    href='/clients'
                  >
                    <div className='mt-4 mb-2 text-lg font-medium text-white'>
                      Для наших клиентов
                    </div>
                    <p className='text-sm leading-tight text-white/90'>
                      Специальные предложения, программы лояльности и удобные
                      способы оплаты для наших клиентов
                    </p>
                  </a>
                </NavigationMenuLink>
              </li>
              <ListItem href='/clients/loyalty' title='Программа лояльности'>
                Накапливайте баллы и получайте скидки на топливо и услуги
              </ListItem>
              <ListItem href='/clients/fuel-card' title='Топливная карта'>
                Удобный способ оплаты топлива для физических и юридических лиц
              </ListItem>
              <ListItem href='/clients/certificates' title='Сертификаты'>
                Подарочные сертификаты на топливо и услуги нашей сети
              </ListItem>
              <ListItem href='/clients/payment' title='Способы оплаты'>
                Различные способы оплаты на наших заправочных станциях
              </ListItem>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <Link href='/#vacancies' scroll={true}>
            <NavigationMenuLink
              asChild
              className={navigationMenuTriggerStyle()}
            >
              <span>Вакансии</span>
            </NavigationMenuLink>
          </Link>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <Link href='/#promotions' scroll>
            <NavigationMenuLink
              asChild
              className={navigationMenuTriggerStyle()}
            >
              <span>Акции</span>
            </NavigationMenuLink>
          </Link>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <Link href='/about' scroll>
            <NavigationMenuLink
              asChild
              className={navigationMenuTriggerStyle()}
            >
              <span>О нас</span>
            </NavigationMenuLink>
          </Link>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

interface ListItemProps extends React.ComponentPropsWithoutRef<'a'> {
  title: string;
  href: string;
}

const ListItem = React.forwardRef<React.ComponentRef<'a'>, ListItemProps>(
  ({ className, title, children, href, ...props }, ref) => {
    return (
      <li>
        <NavigationMenuLink asChild>
          <a
            ref={ref}
            href={href}
            className={cn(
              'hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground block space-y-1 rounded-md p-3 leading-none no-underline transition-colors outline-none select-none',
              className,
            )}
            {...props}
          >
            <div className='text-sm leading-none font-medium'>{title}</div>
            <p className='text-muted-foreground line-clamp-2 text-sm leading-snug'>
              {children}
            </p>
          </a>
        </NavigationMenuLink>
      </li>
    );
  },
);
ListItem.displayName = 'ListItem';