Версия 1.2.8 Изменения в мобильном меню - закрытие меню при выборе.
This commit is contained in:
parent
898fc159c9
commit
4497c5895e
@ -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",
|
||||||
|
|||||||
@ -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'
|
||||||
|
|||||||
@ -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>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -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);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user