add news page

src/renderer/components/TopBar.tsx

@@ -33,23 +33,44 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
   const isRegistrationPage = location.pathname === '/registration';
   const navigate = useNavigate();
   const [coins, setCoins] = useState<number>(0);
-  const [value, setValue] = useState(0);
+  const [value, setValue] = useState(1);
   const [activePage, setActivePage] = useState('versions');
   const tabsWrapperRef = useRef<HTMLDivElement | null>(null);
 
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);
     if (newValue === 0) {
-      navigate('/');
+      navigate('/news');
     } else if (newValue === 1) {
-      navigate('/profile');
+      navigate('/');
     } else if (newValue === 2) {
-      navigate('/shop');
+      navigate('/profile');
     } else if (newValue === 3) {
+      navigate('/shop');
+    } else if (newValue === 4) {
       navigate('/marketplace');
     }
   };
 
+  useEffect(() => {
+    if (location.pathname === '/news') {
+      setValue(0);
+      setActivePage('news');
+    } else if (location.pathname === '/') {
+      setValue(1);
+      setActivePage('versions');
+    } else if (location.pathname.startsWith('/profile')) {
+      setValue(2);
+      setActivePage('profile');
+    } else if (location.pathname.startsWith('/shop')) {
+      setValue(3);
+      setActivePage('shop');
+    } else if (location.pathname.startsWith('/marketplace')) {
+      setValue(4);
+      setActivePage('marketplace');
+    }
+  }, [location.pathname]);
+
   const handleLaunchPage = () => {
     navigate('/');
   };
@@ -62,7 +83,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
 
     // Находим внутренний скроллер MUI Tabs
     const scroller = tabsWrapperRef.current.querySelector(
-      '.MuiTabs-scroller'
+      '.MuiTabs-scroller',
     ) as HTMLDivElement | null;
 
     if (!scroller) return;
@@ -194,8 +215,27 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
               variant="scrollable"
               scrollButtons={false}
               disableRipple={true}
-              sx={{ maxWidth: "42vw"}}
+              sx={{ maxWidth: '42vw' }}
             >
+              <Tab
+                label="Новости"
+                disableRipple={true}
+                onClick={() => {
+                  setActivePage('news');
+                }}
+                sx={{
+                  color: 'white',
+                  fontFamily: 'Benzin-Bold',
+                  fontSize: '0.7em',
+                  '&.Mui-selected': {
+                    color: 'rgba(255, 77, 77, 1)',
+                  },
+                  '&:hover': {
+                    color: 'rgb(177, 52, 52)',
+                  },
+                  transition: 'all 0.3s ease',
+                }}
+              />
               <Tab
                 label="Версии"
                 disableRipple={true}