Add account and articles updater

src/views/home/account/AccoutMenu.tsx

@@ -1,5 +1,94 @@
+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 = () => {
-    return <div className="h-full w-full relative "></div>;
+    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,
+    );
+
+    console.log('active', [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;