Версия 1.2.8 Изменения в мобильном меню - закрытие меню при выборе.

This commit is contained in:
anibilag 2025-11-03 22:20:24 +03:00
parent 898fc159c9
commit 4497c5895e
4 changed files with 28 additions and 4 deletions

View File

@ -1,7 +1,7 @@
{ {
"name": "vite-react-typescript-starter", "name": "vite-react-typescript-starter",
"private": true, "private": true,
"version": "1.2.7", "version": "1.2.8",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",

View File

@ -1,4 +1,4 @@
import React from 'react'; import React, { useEffect } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { CityTitles, CategoryTitles } from '../../types'; import { CityTitles, CategoryTitles } from '../../types';
@ -9,6 +9,7 @@ interface MobileMenuProps {
currentCategory: string | null; currentCategory: string | null;
currentCity: string | null; currentCity: string | null;
onCityChange: (event: React.ChangeEvent<HTMLSelectElement>) => void; onCityChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
onClose: () => void;
} }
export function MobileMenu({ export function MobileMenu({
@ -17,8 +18,19 @@ export function MobileMenu({
cities, cities,
currentCategory, currentCategory,
currentCity, currentCity,
onCityChange onCityChange,
onClose
}: MobileMenuProps) { }: MobileMenuProps) {
// Блокируем прокрутку body при открытом меню
useEffect(() => {
if (isOpen) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = '';
}
}, [isOpen]);
if (!isOpen) return null; if (!isOpen) return null;
return ( return (
@ -47,6 +59,7 @@ export function MobileMenu({
<Link <Link
key={category} key={category}
to={`/?category=${category}${currentCity ? `&city=${currentCity}` : ''}`} to={`/?category=${category}${currentCity ? `&city=${currentCity}` : ''}`}
onClick={onClose} // закрываем меню при клике
className={`block px-3 py-2 rounded-md text-base font-medium ${ className={`block px-3 py-2 rounded-md text-base font-medium ${
Number(currentCategory) === category Number(currentCategory) === category
? 'bg-blue-50 text-blue-600' ? 'bg-blue-50 text-blue-600'

View File

@ -1,4 +1,4 @@
import React, { useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Menu, X, Bookmark } from 'lucide-react'; import { Menu, X, Bookmark } from 'lucide-react';
import { Link, useLocation } from 'react-router-dom'; import { Link, useLocation } from 'react-router-dom';
import { Logo } from './Logo'; import { Logo } from './Logo';
@ -18,6 +18,11 @@ export function Header() {
const currentCity = searchParams.get('city'); const currentCity = searchParams.get('city');
const { bookmarks } = useBookmarkStore(); const { bookmarks } = useBookmarkStore();
// Автоматическое закрытие меню при изменении маршрута
useEffect(() => {
setIsMobileMenuOpen(false);
}, [location]);
const handleCityChange = (event: React.ChangeEvent<HTMLSelectElement>) => { const handleCityChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
const city = event.target.value; const city = event.target.value;
const params = new URLSearchParams(location.search); const params = new URLSearchParams(location.search);
@ -116,6 +121,7 @@ export function Header() {
currentCategory={currentCategory} currentCategory={currentCategory}
currentCity={currentCity} currentCity={currentCity}
onCityChange={handleCityChange} onCityChange={handleCityChange}
onClose={() => setIsMobileMenuOpen(false)}
/> />
</header> </header>
); );

View File

@ -46,6 +46,11 @@ export function ArticlePage() {
try { try {
const response = await axios.get(`/api/articles/${id}`); const response = await axios.get(`/api/articles/${id}`);
setArticleData(response.data); setArticleData(response.data);
// Сообщаем react-snap, что страница готова
//if (window.snapSaveState) {
// window.snapSaveState();
//}
} catch (error) { } catch (error) {
setError('Не удалось загрузить статью'); setError('Не удалось загрузить статью');
console.error(error); console.error(error);