77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
import React, { useEffect } from 'react';
|
||
import { Link } from 'react-router-dom';
|
||
import { CityTitles, CategoryTitles } from '../../types';
|
||
|
||
interface MobileMenuProps {
|
||
isOpen: boolean;
|
||
categories: number[];
|
||
cities: number[];
|
||
currentCategory: string | null;
|
||
currentCity: string | null;
|
||
onCityChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
|
||
onClose: () => void;
|
||
}
|
||
|
||
export function MobileMenu({
|
||
isOpen,
|
||
categories,
|
||
cities,
|
||
currentCategory,
|
||
currentCity,
|
||
onCityChange,
|
||
onClose
|
||
}: MobileMenuProps) {
|
||
|
||
// Блокируем прокрутку body при открытом меню
|
||
useEffect(() => {
|
||
if (isOpen) {
|
||
document.body.style.overflow = 'hidden';
|
||
} else {
|
||
document.body.style.overflow = '';
|
||
}
|
||
}, [isOpen]);
|
||
|
||
if (!isOpen) return null;
|
||
|
||
return (
|
||
<div className="lg:hidden border-b border-gray-200">
|
||
<div className="px-2 pt-2 pb-3 space-y-1">
|
||
<div className="px-3 py-2">
|
||
<h3 className="text-sm font-medium text-gray-500 mb-2">Столицы</h3>
|
||
<select
|
||
value={currentCity || ''}
|
||
onChange={onCityChange}
|
||
className="w-full bg-white px-3 py-2 text-base font-medium rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
>
|
||
<option value="">Все столицы</option>
|
||
{cities.map((city) => (
|
||
<option key={city} value={city}>
|
||
{CityTitles[city]}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
<div className="px-3 py-2">
|
||
<h3 className="text-sm font-medium text-gray-500 mb-2">Разделы</h3>
|
||
<div className="space-y-0">
|
||
{categories.map((category) => (
|
||
<Link
|
||
key={category}
|
||
to={`/?category=${category}${currentCity ? `&city=${currentCity}` : ''}`}
|
||
onClick={onClose} // закрываем меню при клике
|
||
className={`block px-3 py-2 rounded-md text-base font-medium ${
|
||
Number(currentCategory) === category
|
||
? 'bg-blue-50 text-blue-600'
|
||
: 'text-gray-600 hover:bg-gray-50'
|
||
}`}
|
||
>
|
||
{CategoryTitles[category]}
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
} |