114 lines
4.0 KiB
TypeScript
114 lines
4.0 KiB
TypeScript
'use client';
|
||
|
||
import { ChevronDown, ChevronRight, Menu } from 'lucide-react';
|
||
import Link from 'next/link';
|
||
import { useState } from 'react';
|
||
|
||
import { Button } from '@/shared/shadcn-ui/button';
|
||
import {
|
||
Collapsible,
|
||
CollapsibleContent,
|
||
CollapsibleTrigger,
|
||
} from '@/shared/shadcn-ui/collapsible';
|
||
import { Sheet, SheetContent, SheetTrigger } from '@/shared/shadcn-ui/sheet';
|
||
import { useLanguage } from '@/shared/language';
|
||
|
||
export function MobileNav() {
|
||
const [open, setOpen] = useState(false);
|
||
const [clientsOpen, setClientsOpen] = useState(false);
|
||
|
||
const {t} = useLanguage();
|
||
|
||
return (
|
||
<Sheet open={open} onOpenChange={setOpen}>
|
||
<SheetTrigger asChild>
|
||
<Button variant='ghost' className='lg:hidden' size='icon'>
|
||
<Menu className='h-6 w-6' />
|
||
<span className='sr-only'>Открыть меню</span>
|
||
</Button>
|
||
</SheetTrigger>
|
||
<SheetContent side='left' className='w-[300px] sm:w-[400px]'>
|
||
<nav className='mt-8 flex flex-col gap-4'>
|
||
<Link
|
||
href='/'
|
||
onClick={() => setOpen(false)}
|
||
className='text-lg font-medium transition-colors hover:text-red-600'
|
||
>
|
||
{t("common.navigation.home")}
|
||
</Link>
|
||
<Link
|
||
href='/about'
|
||
onClick={() => setOpen(false)}
|
||
className='text-lg font-medium transition-colors hover:text-red-600'
|
||
>
|
||
{t("common.navigation.about")}
|
||
</Link>
|
||
|
||
<Collapsible open={clientsOpen} onOpenChange={setClientsOpen}>
|
||
<CollapsibleTrigger className='data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up flex w-full items-center justify-between text-lg font-medium transition-all hover:text-red-600'>
|
||
<span>{t("common.navigation.clients")}</span>
|
||
{clientsOpen ? (
|
||
<ChevronDown className='h-5 w-5' />
|
||
) : (
|
||
<ChevronRight className='h-5 w-5' />
|
||
)}
|
||
</CollapsibleTrigger>
|
||
<CollapsibleContent className='mt-2 space-y-2 border-l-2 border-gray-200 pl-4'>
|
||
<Link
|
||
href='/clients/loyalty'
|
||
onClick={() => setOpen(false)}
|
||
className='block py-1 text-base transition-colors hover:text-red-600'
|
||
>
|
||
{t("common.navigation.loyatly")}
|
||
</Link>
|
||
<Link
|
||
href='/clients/certificates'
|
||
onClick={() => setOpen(false)}
|
||
className='block py-1 text-base transition-colors hover:text-red-600'
|
||
>
|
||
{t("common.navigation.certificates")}
|
||
</Link>
|
||
</CollapsibleContent>
|
||
</Collapsible>
|
||
|
||
<Link
|
||
href='/#stations'
|
||
onClick={() => setOpen(false)}
|
||
className='text-lg font-medium transition-colors hover:text-red-600'
|
||
>
|
||
{t("common.navigation.stations")}
|
||
</Link>
|
||
<Link
|
||
href='/#vacancies'
|
||
onClick={() => setOpen(false)}
|
||
className='text-lg font-medium transition-colors hover:text-red-600'
|
||
>
|
||
{t("common.navigation.vacancies")}
|
||
</Link>
|
||
<Link
|
||
href='/#promotions'
|
||
onClick={() => setOpen(false)}
|
||
className='text-lg font-medium transition-colors hover:text-red-600'
|
||
>
|
||
{t("common.navigation.promotions")}
|
||
</Link>
|
||
<Link
|
||
href='/#partners'
|
||
onClick={() => setOpen(false)}
|
||
className='text-lg font-medium transition-colors hover:text-red-600'
|
||
>
|
||
{t("common.navigation.partners")}
|
||
</Link>
|
||
<Link
|
||
href='/#charity'
|
||
onClick={() => setOpen(false)}
|
||
className='text-lg font-medium transition-colors hover:text-red-600'
|
||
>
|
||
{t("common.navigation.charity")}
|
||
</Link>
|
||
</nav>
|
||
</SheetContent>
|
||
</Sheet>
|
||
);
|
||
}
|