diff --git a/src/renderer/components/TopBar.tsx b/src/renderer/components/TopBar.tsx index 630671e..6ade5c1 100644 --- a/src/renderer/components/TopBar.tsx +++ b/src/renderer/components/TopBar.tsx @@ -2,7 +2,7 @@ import { Box, Button, Tab, Tabs, Typography } from '@mui/material'; import CloseRoundedIcon from '@mui/icons-material/CloseRounded'; import { useLocation, useNavigate } from 'react-router-dom'; import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'; -import { useEffect, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { Tooltip } from '@mui/material'; import { fetchCoins } from '../api'; import CustomTooltip from './CustomTooltip'; @@ -35,6 +35,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) { const [coins, setCoins] = useState(0); const [value, setValue] = useState(0); const [activePage, setActivePage] = useState('versions'); + const tabsWrapperRef = useRef(null); const handleChange = (event: React.SyntheticEvent, newValue: number) => { setValue(newValue); @@ -53,6 +54,23 @@ export default function TopBar({ onRegister, username }: TopBarProps) { navigate('/'); }; + const handleTabsWheel = (event: React.WheelEvent) => { + // чтобы страница не скроллилась вертикально + event.preventDefault(); + + if (!tabsWrapperRef.current) return; + + // Находим внутренний скроллер MUI Tabs + const scroller = tabsWrapperRef.current.querySelector( + '.MuiTabs-scroller' + ) as HTMLDivElement | null; + + if (!scroller) return; + + // Прокручиваем горизонтально, используя вертикальный скролл мыши + scroller.scrollLeft += event.deltaY * 0.3; + }; + // const getPageTitle = () => { // if (isLoginPage) { // return 'Вход'; @@ -159,6 +177,8 @@ export default function TopBar({ onRegister, username }: TopBarProps) { )} {!isLaunchPage && !isRegistrationPage && !isLoginPage && (