fix TopBar
This commit is contained in:
@ -1,4 +1,13 @@
|
|||||||
import { Box, Button, Tab, Tabs, Typography, Menu, MenuItem, Divider } from '@mui/material';
|
import {
|
||||||
|
Box,
|
||||||
|
Button,
|
||||||
|
Tab,
|
||||||
|
Tabs,
|
||||||
|
Typography,
|
||||||
|
Menu,
|
||||||
|
MenuItem,
|
||||||
|
Divider,
|
||||||
|
} from '@mui/material';
|
||||||
import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
|
import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
|
||||||
import { useLocation, useNavigate } from 'react-router-dom';
|
import { useLocation, useNavigate } from 'react-router-dom';
|
||||||
import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
|
import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
|
||||||
@ -8,7 +17,7 @@ import { fetchCoins } from '../api';
|
|||||||
import CustomTooltip from './Notifications/CustomTooltip';
|
import CustomTooltip from './Notifications/CustomTooltip';
|
||||||
import CoinsDisplay from './CoinsDisplay';
|
import CoinsDisplay from './CoinsDisplay';
|
||||||
import { HeadAvatar } from './HeadAvatar';
|
import { HeadAvatar } from './HeadAvatar';
|
||||||
import { fetchPlayer } from './../api'
|
import { fetchPlayer } from './../api';
|
||||||
import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
|
import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
|
||||||
import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
|
import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
|
||||||
import PersonIcon from '@mui/icons-material/Person';
|
import PersonIcon from '@mui/icons-material/Person';
|
||||||
@ -39,12 +48,13 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
|
|||||||
const isVersionsExplorerPage = location.pathname.startsWith('/');
|
const isVersionsExplorerPage = location.pathname.startsWith('/');
|
||||||
const isRegistrationPage = location.pathname === '/registration';
|
const isRegistrationPage = location.pathname === '/registration';
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [value, setValue] = useState(1);
|
const [value, setValue] = useState<number | false>(false);
|
||||||
const [activePage, setActivePage] = useState('versions');
|
const [activePage, setActivePage] = useState('versions');
|
||||||
const tabsWrapperRef = useRef<HTMLDivElement | null>(null);
|
const tabsWrapperRef = useRef<HTMLDivElement | null>(null);
|
||||||
const [skinUrl, setSkinUrl] = useState<string>('');
|
const [skinUrl, setSkinUrl] = useState<string>('');
|
||||||
const [avatarAnchorEl, setAvatarAnchorEl] =
|
const [avatarAnchorEl, setAvatarAnchorEl] = useState<null | HTMLElement>(
|
||||||
useState<null | HTMLElement>(null);
|
null,
|
||||||
|
);
|
||||||
const [menuOpen, setMenuOpen] = useState<boolean>(false);
|
const [menuOpen, setMenuOpen] = useState<boolean>(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -89,15 +99,16 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
|
|||||||
} else if (location.pathname === '/') {
|
} else if (location.pathname === '/') {
|
||||||
setValue(1);
|
setValue(1);
|
||||||
setActivePage('versions');
|
setActivePage('versions');
|
||||||
} else if (location.pathname.startsWith('/profile')) {
|
|
||||||
setValue(2);
|
|
||||||
setActivePage('profile');
|
|
||||||
} else if (location.pathname.startsWith('/shop')) {
|
} else if (location.pathname.startsWith('/shop')) {
|
||||||
setValue(3);
|
setValue(3);
|
||||||
setActivePage('shop');
|
setActivePage('shop');
|
||||||
} else if (location.pathname.startsWith('/marketplace')) {
|
} else if (location.pathname.startsWith('/marketplace')) {
|
||||||
setValue(4);
|
setValue(4);
|
||||||
setActivePage('marketplace');
|
setActivePage('marketplace');
|
||||||
|
} else {
|
||||||
|
// любые страницы не из TopBar: /profile, /daily, /dailyquests, и т.д.
|
||||||
|
setValue(false);
|
||||||
|
setActivePage('');
|
||||||
}
|
}
|
||||||
}, [location.pathname]);
|
}, [location.pathname]);
|
||||||
|
|
||||||
@ -380,17 +391,17 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{!isLoginPage && !isRegistrationPage && username && (
|
{!isLoginPage && !isRegistrationPage && username && (
|
||||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: '1vw' }}>
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: '1vw' }}>
|
||||||
<HeadAvatar
|
<HeadAvatar
|
||||||
skinUrl={skinUrl}
|
skinUrl={skinUrl}
|
||||||
size={44}
|
size={44}
|
||||||
style={{
|
style={{
|
||||||
borderRadius: '3vw',
|
borderRadius: '3vw',
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
}}
|
}}
|
||||||
onClick={handleAvatarClick}
|
onClick={handleAvatarClick}
|
||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
)}
|
)}
|
||||||
{/* Кнопка регистрации, если на странице логина */}
|
{/* Кнопка регистрации, если на странице логина */}
|
||||||
{!isLoginPage && !isRegistrationPage && username && (
|
{!isLoginPage && !isRegistrationPage && username && (
|
||||||
@ -524,7 +535,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
|
|||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<PersonIcon sx={{ fontSize: '2vw' }}/> Профиль
|
<PersonIcon sx={{ fontSize: '2vw' }} /> Профиль
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
|
|
||||||
{/* ===== 2 строка: ежедневные задания ===== */}
|
{/* ===== 2 строка: ежедневные задания ===== */}
|
||||||
@ -592,7 +603,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
|
|||||||
boxShadow: '0 4px 15px rgba(242, 113, 33, 0.4)',
|
boxShadow: '0 4px 15px rgba(242, 113, 33, 0.4)',
|
||||||
},
|
},
|
||||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
|
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
|
||||||
m: '0 0 0 18vw'
|
m: '0 0 0 18vw',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Выйти
|
Выйти
|
||||||
|
|||||||
Reference in New Issue
Block a user