menu

src/views/home/auth/Login.tsx

@@ -5,6 +5,8 @@ import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
 import { useNavigate } from "react-router-dom";
 import { loginUser } from "../../../redux/slices/auth";
 import { cn } from "../../../lib/cn";
+import { setMenuActivePage } from "../../../redux/slices/store";
+import { Balloon } from "../../../assets/icons/auth";
 
 const Login = () => {
   const dispatch = useAppDispatch();
@@ -18,6 +20,7 @@ const Login = () => {
 
   // После успешного логина
   useEffect(() => {
+    dispatch(setMenuActivePage("account"))
     if (jwt) {
       navigate("/home/offices"); // или другая страница после входа
     }
@@ -36,63 +39,69 @@ const Login = () => {
   };
 
   return (
-    <div className="h-full w-full bg-default-100 flex items-center justify-center">
-      <div className="bg-layout-background w-[25rem] rounded-[15px] box-border p-[25px] relative">
-        <div className="text-content-1 w-full text-[28px] font-bold text-center">
-          Вход в аккаунт
+    <div className="h-full w-full flex items-center justify-center">
+      <div className="bg-layout-background grid gap-[80px] grid-cols-[400px,400px]  box-border relative ">
+        <div className="flex items-center justify-center">
+          <img src={Balloon} />
         </div>
-        <div className="text-content-1 w-full text-[12px] text-center mt-[15px]">
-          Для начала работы войдите в аккаунт. Заполните поля ниже и нажмите "Войти".
-        </div>
-
-        <div className="mt-[15px] flex flex-col gap-4">
-          <div className={cn(
-            "text-[14px] text-danger font-medium  transition-all overflow-hidden",
-            submitClicked && !username && "h-[21px]"
-          )}>
-            Поле не может быть пустым
+        <div >
+          <div className="text-content-1 w-full text-[28px] font-bold text-center">
+            Вход в аккаунт
           </div>
-          <Input
-            label="Логин"
-            radius="sm"
-            className="w-[22rem]"
-            required
-            onChange={(val) => setUsername(val)}
-          />
-
-          <div className={cn(
-            "text-[14px] text-danger font-medium transition-all overflow-hidden",
-            submitClicked && !password && "h-[21px]"
-          )}>
-            Поле не может быть пустым
+          <div className="text-content-1 w-full text-[12px] text-center mt-[15px]">
+            Для начала работы войдите в аккаунт. Заполните поля ниже и нажмите "Войти".
           </div>
-          <Input
-            label="Пароль"
-            type="password"
-            radius="sm"
-            className="w-[22rem]"
-            required
-            onChange={(val) => setPassword(val)}
-          />
 
-          {status === "failed" && error && (
-            <div className="text-[14px] text-danger font-medium">{error}</div>
-          )}
+          <div className="mt-[15px] flex flex-col gap-4">
+            <div className={cn(
+              "text-[14px] text-danger font-medium  transition-all overflow-hidden",
+              submitClicked && !username && "h-[21px]"
+            )}>
+              Поле не может быть пустым
+            </div>
+            <Input
+              label="Логин"
+              radius="sm"
+              className="w-[22rem]"
+              required
+              onChange={(val) => setUsername(val)}
+            />
+
+            <div className={cn(
+              "text-[14px] text-danger font-medium transition-all overflow-hidden",
+              submitClicked && !password && "h-[21px]"
+            )}>
+              Поле не может быть пустым
+            </div>
+            <Input
+              label="Пароль"
+              type="password"
+              radius="sm"
+              className="w-[22rem]"
+              required
+              onChange={(val) => setPassword(val)}
+            />
+
+            {status === "failed" && error && (
+              <div className="text-[14px] text-danger font-medium">{error}</div>
+            )}
+          </div>
+
+          <div className="w-[calc(100%-50px)]">
+            <PrimaryButton
+              className="w-full mb-[8px]"
+              onClick={handleLogin}
+              text={status === "loading" ? "Вход..." : "Войти"}
+              disabled={status === "loading"}
+            />
+            <PrimaryButton
+              className="w-full mb-[25px]"
+              onClick={navigateToRegister}
+              text="Зарегистрироваться"
+            />
+          </div>
         </div>
 
-        <div className="w-[calc(100%-50px)]">
-          <PrimaryButton
-            className="w-full mb-[8px]"
-            onClick={handleLogin}
-            text={status === "loading" ? "Вход..." : "Войти"}
-            disabled={status === "loading"}
-          />
-          <PrimaryButton
-            className="w-full mb-[25px]"
-            onClick={navigateToRegister}
-            text="Зарегистрироваться"
-          />
-        </div>
       </div>
     </div>
   );

src/views/home/menu/Menu.tsx

@@ -1,108 +1,26 @@
-// import React from "react";
-// import { Button } from "../../components/button/Button";
-// import { Input } from "../../components/input/Input";
-// import { useDispatch, useSelector } from "react-redux";
-// import { useNavigate } from "react-router-dom";
-// import { loginUser } from "../../redux/slices/user";
-// import { setUsername, setPassword } from "../../redux/slices/user";
-// import { cn } from "../../lib/cn";
+import { Logo } from "../../../assets/logos";
+import {Account, Clipboard, Cup, Home, Openbook, Users} from "../../../assets/icons/menu";
+import MenuItem from "./MenuItem";
+import { useAppSelector } from "../../../redux/hooks";
 
 const Menu = () => {
-  // const dispatch = useDispatch();
-  // const navigate = useNavigate();
+  const menuItems = [
+    {text: "Главная", href: "/home", icon: Home, page: "home" },
+    {text: "Задачи", href: "/home", icon: Clipboard, page: "clipboard" },
+    {text: "Статьи", href: "/home", icon: Openbook, page: "openbool" },
+    {text: "Группы", href: "/home", icon: Users, page: "users" },
+    {text: "Контесты", href: "/home", icon: Cup, page: "cup" },
+    {text: "Аккаунт", href: "/home/account", icon: Account, page: "account" },
+  ];
+  const activePage = useAppSelector((state) => state.store.menu.activePage);
 
-  // const [inputUsername, setInputUsername] = React.useState<string>("");
-  // const [inputPassword, setInputPassword] = React.useState<string>("");
-  // const [inputClickLogin, setInputClickLogin] = React.useState<boolean>(false);
-
-  // const changeUsername = (s: string) => {
-  //   dispatch(setUsername(s));
-  //   setInputUsername(s);
-  // };
-  // const changePassword = (s: string) => {
-  //   dispatch(setPassword(s));
-  //   setInputPassword(s);
-  // };
-
-  // const isAuthorised = useSelector((state: any) => state.user.isAuthorized);
-
-  // React.useEffect(() => {
-  //   if (isAuthorised) navigate("/home/offices");
-  // }, [isAuthorised]);
-
-  // const clickLogin = () => {
-  //   setInputClickLogin(true);
-  //   if (inputUsername == "" || inputPassword == "") return;
-  //   setInputClickLogin(false);
-  //   dispatch(loginUser());
-
-  //   if (isAuthorised) navigate("/home/offices");
-  // };
-  // const clickNavigateRegister = () => {
-  //   navigate("/auth/register");
-  // };
   return (
-    <div className="h-full w-full bg-default-100 flex items-center justify-center">
-      <div className=" bg-layout-background w-[25rem] h-[34.375rem] rounded-[15px] box-border p-[25px] relative">
-        <div className="text-content-1 w-full h-[3.125rem] text-[28px] font-bold text-center">
-          Вход в аккаунт
-        </div>
-        <div className="text-content-1  w-full h-[3.4375rem] text-[12px] text-center mt-[15px]">
-          Для начала работы вам необходимо войти в аккаунт. Заполните поля ниже
-          и нажмите кнопку войти
-        </div>
-
-        {/* <div className="mt-[15px]">
-          <div
-            className={cn(
-              "text-[14px] text-danger font-medium h-0 transition-all mt-[20px] overflow-hidden",
-              inputClickLogin && inputUsername == "" && "h-[21px]"
-            )}
-          >
-            Поле не может быть пустым
-          </div>
-          <Input
-            color="danger"
-            required
-            label="Логин"
-            radius="sm"
-            className="w-[22rem]"
-            onChange={changeUsername}
-          />
-          <div
-            className={cn(
-              "text-[14px] text-danger font-medium h-0 transition-all mt-[15px] overflow-hidden",
-              inputClickLogin && inputPassword == "" && "h-[21px]"
-            )}
-          >
-            Поле не может быть пустым
-          </div>
-          <Input
-            required
-            label="Пароль"
-            type="password"
-            radius="sm"
-            className="w-[22rem]"
-            onChange={changePassword}
-          />
-        </div>
-
-        <div className="w-[calc(100%-50px)] absolute bottom-0">
-          <Button
-            className="w-full mb-[8px]"
-            size="lg"
-            onClick={clickLogin}
-            text="Войти"
-          />
-          <Button
-            variant="bordered"
-            color="default"
-            className="w-full  mb-[25px]"
-            size="lg"
-            onClick={clickNavigateRegister}
-            text="Зарегистрироваться"
-          />
-        </div> */}
+    <div className="h-full w-full  items-center box-border p-[20px] pt-[35px]">
+      <img src={Logo} className="w-full" />
+      <div className="">
+        {menuItems.map((v, i) => (
+          <MenuItem key={i} icon={v.icon} text={v.text} href={v.href} active={v.page == activePage} page={v.page}/>
+        ))}
       </div>
     </div>
   );

src/views/home/menu/MenuItem.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { useAppDispatch } from "../../../redux/hooks";
+import { setMenuActivePage } from "../../../redux/slices/store";
+
+interface MenuItemProps {
+  icon: string; // SVG или любой JSX
+  text: string;
+  href: string;
+  page: string;
+  active?: boolean; // необязательный, по умолчанию false
+}
+
+const MenuItem: React.FC<MenuItemProps> = ({ icon, text = "", href = "", active = false, page = "" }) => {
+  const dispatch = useAppDispatch();
+
+  return (
+    <Link
+      to={href}
+      className={`
+        flex items-center gap-3 p-[16px] rounded-[10px\] h-[40px] text-[18px] font-bold 
+        transition-colors duration-300 text-liquid-white mt-[20px]
+        ${active ? "bg-liquid-darkmain hover:bg-liquid-lighter hover:ring-[1px] hover:ring-liquid-darkmain hover:ring-inset"
+             : " hover:bg-liquid-lighter"}
+      `}
+      onClick={
+        () => dispatch(setMenuActivePage(page))
+      }
+    >
+      <img src={icon} />
+      <span>{text}</span>
+    </Link>
+  );
+};
+
+export default MenuItem;