93 lines
2.3 KiB
TypeScript
93 lines
2.3 KiB
TypeScript
import { Openbook, Cup, Clipboard } from '../../../assets/icons/menu';
|
|
|
|
import React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
|
|
import {
|
|
setMenuActivePage,
|
|
setMenuActiveProfilePage,
|
|
} from '../../../redux/slices/store';
|
|
|
|
interface MenuItemProps {
|
|
icon: string;
|
|
text: string;
|
|
href: string;
|
|
page: string;
|
|
profilePage: string;
|
|
active?: boolean;
|
|
}
|
|
|
|
const MenuItem: React.FC<MenuItemProps> = ({
|
|
icon,
|
|
text = '',
|
|
href = '',
|
|
active = false,
|
|
page = '',
|
|
profilePage = '',
|
|
}) => {
|
|
const dispatch = useAppDispatch();
|
|
|
|
return (
|
|
<Link
|
|
to={href}
|
|
className={`
|
|
flex items-center gap-3 p-[16px] rounded-[10px] h-[40px] text-[18px] font-bold
|
|
transition-all duration-300 text-liquid-white
|
|
active:scale-95 hover:bg-liquid-lighter hover:ring-[1px] hover:ring-liquid-light hover:ring-inset
|
|
${active && 'bg-liquid-lighter '}
|
|
`}
|
|
onClick={() => {
|
|
dispatch(setMenuActivePage(page));
|
|
dispatch(setMenuActiveProfilePage(profilePage));
|
|
}}
|
|
>
|
|
<img src={icon} />
|
|
<span>{text}</span>
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
const AccountMenu = () => {
|
|
const menuItems = [
|
|
{
|
|
text: 'Задачи',
|
|
href: '/home/account/missions',
|
|
icon: Clipboard,
|
|
page: 'account',
|
|
profilePage: 'missions',
|
|
},
|
|
{
|
|
text: 'Статьи',
|
|
href: '/home/account/articles',
|
|
icon: Openbook,
|
|
page: 'account',
|
|
profilePage: 'articles',
|
|
},
|
|
{
|
|
text: 'Контесты',
|
|
href: '/home/account/contests',
|
|
icon: Cup,
|
|
page: 'account',
|
|
profilePage: 'contests',
|
|
},
|
|
];
|
|
|
|
const activeProfilePage = useAppSelector(
|
|
(state) => state.store.menu.activeProfilePage,
|
|
);
|
|
|
|
return (
|
|
<div className="h-full w-full relative flex p-[20px] gap-[10px]">
|
|
{menuItems.map((v, i) => (
|
|
<MenuItem
|
|
{...v}
|
|
key={i}
|
|
active={activeProfilePage == v.profilePage}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AccountMenu;
|