From e3ce191b44a416e504d069b316802f99b0089d86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=92=D0=B8=D1=82=D0=B0=D0=BB=D0=B8=D0=B9=20=D0=9B=D0=B0?= =?UTF-8?q?=D0=B2=D1=88=D0=BE=D0=BD=D0=BE=D0=BA?= <114582703+valavshonok@users.noreply.github.com> Date: Thu, 23 Oct 2025 16:34:13 +0300 Subject: [PATCH] menu --- .gitignore | 1 + src/App.tsx | 5 +- src/assets/icons/auth/balloon.svg | 19 +++++ src/assets/icons/auth/index.ts | 3 + src/assets/icons/menu/account.svg | 3 + src/assets/icons/menu/clipboard.svg | 3 + src/assets/icons/menu/cup.svg | 3 + src/assets/icons/menu/home.svg | 3 + src/assets/icons/menu/index.ts | 8 ++ src/assets/icons/menu/openbook.svg | 3 + src/assets/icons/menu/users.svg | 3 + src/assets/logos/Logo.svg | 15 ++++ src/assets/logos/index.ts | 3 + src/axios.ts | 4 +- src/main.tsx | 8 +- src/pages/Home.tsx | 16 ++-- src/redux/slices/store.ts | 30 +++++++ src/redux/store.ts | 2 + src/styles/index.css | 2 +- src/views/home/auth/Login.tsx | 111 +++++++++++++------------ src/views/home/menu/Menu.tsx | 120 +++++----------------------- src/views/home/menu/MenuItem.tsx | 36 +++++++++ vite.config.ts | 5 +- 23 files changed, 236 insertions(+), 170 deletions(-) create mode 100644 src/assets/icons/auth/balloon.svg create mode 100644 src/assets/icons/auth/index.ts create mode 100644 src/assets/icons/menu/account.svg create mode 100644 src/assets/icons/menu/clipboard.svg create mode 100644 src/assets/icons/menu/cup.svg create mode 100644 src/assets/icons/menu/home.svg create mode 100644 src/assets/icons/menu/index.ts create mode 100644 src/assets/icons/menu/openbook.svg create mode 100644 src/assets/icons/menu/users.svg create mode 100644 src/assets/logos/Logo.svg create mode 100644 src/assets/logos/index.ts create mode 100644 src/redux/slices/store.ts create mode 100644 src/views/home/menu/MenuItem.tsx diff --git a/.gitignore b/.gitignore index a547bf3..e21add3 100644 --- a/.gitignore +++ b/.gitignore @@ -16,6 +16,7 @@ dist-ssr .vscode/* !.vscode/extensions.json .idea +.vite .DS_Store *.suo *.ntvs* diff --git a/src/App.tsx b/src/App.tsx index 5129d38..65240b0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,12 +8,9 @@ import Home from "./pages/Home"; function App() { return ( -
+
}/> - - - }/> diff --git a/src/assets/icons/auth/balloon.svg b/src/assets/icons/auth/balloon.svg new file mode 100644 index 0000000..4e709ad --- /dev/null +++ b/src/assets/icons/auth/balloon.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/auth/index.ts b/src/assets/icons/auth/index.ts new file mode 100644 index 0000000..e308253 --- /dev/null +++ b/src/assets/icons/auth/index.ts @@ -0,0 +1,3 @@ +import Balloon from "./balloon.svg"; + +export {Balloon}; \ No newline at end of file diff --git a/src/assets/icons/menu/account.svg b/src/assets/icons/menu/account.svg new file mode 100644 index 0000000..9666a5d --- /dev/null +++ b/src/assets/icons/menu/account.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/menu/clipboard.svg b/src/assets/icons/menu/clipboard.svg new file mode 100644 index 0000000..7404147 --- /dev/null +++ b/src/assets/icons/menu/clipboard.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/menu/cup.svg b/src/assets/icons/menu/cup.svg new file mode 100644 index 0000000..65b15e5 --- /dev/null +++ b/src/assets/icons/menu/cup.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/menu/home.svg b/src/assets/icons/menu/home.svg new file mode 100644 index 0000000..76e7b28 --- /dev/null +++ b/src/assets/icons/menu/home.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/menu/index.ts b/src/assets/icons/menu/index.ts new file mode 100644 index 0000000..cbeba0a --- /dev/null +++ b/src/assets/icons/menu/index.ts @@ -0,0 +1,8 @@ +import Account from "./account.svg"; +import Clipboard from "./clipboard.svg"; +import Cup from "./cup.svg"; +import Home from "./home.svg"; +import Openbook from "./openbook.svg"; +import Users from "./users.svg"; + +export {Account, Clipboard, Cup, Home, Openbook, Users}; \ No newline at end of file diff --git a/src/assets/icons/menu/openbook.svg b/src/assets/icons/menu/openbook.svg new file mode 100644 index 0000000..3bd3e00 --- /dev/null +++ b/src/assets/icons/menu/openbook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/menu/users.svg b/src/assets/icons/menu/users.svg new file mode 100644 index 0000000..966c759 --- /dev/null +++ b/src/assets/icons/menu/users.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/logos/Logo.svg b/src/assets/logos/Logo.svg new file mode 100644 index 0000000..2d6a475 --- /dev/null +++ b/src/assets/logos/Logo.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/assets/logos/index.ts b/src/assets/logos/index.ts new file mode 100644 index 0000000..42f784e --- /dev/null +++ b/src/assets/logos/index.ts @@ -0,0 +1,3 @@ +import Logo from "./Logo.svg" + +export {Logo} \ No newline at end of file diff --git a/src/axios.ts b/src/axios.ts index 3953643..1dc691d 100644 --- a/src/axios.ts +++ b/src/axios.ts @@ -2,7 +2,9 @@ import axios from "axios"; const instance = axios.create({ baseURL: import.meta.env.VITE_API_URL, - withCredentials: true, + headers: { + 'Content-Type': 'application/json' + }, }); export default instance; diff --git a/src/main.tsx b/src/main.tsx index dafd342..abace85 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,4 +1,3 @@ -import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import App from "./App.tsx"; import "./styles/index.css"; @@ -9,12 +8,9 @@ import { Provider } from "react-redux"; import { store } from "./redux/store"; createRoot(document.getElementById("root")!).render( - - + - - - + ); diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 2ea413d..53a4d8d 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -2,16 +2,22 @@ import { Route, Routes } from "react-router-dom"; import Login from "../views/home/auth/Login"; import Register from "../views/home/auth/Register"; +import Menu from "../views/home/menu/Menu"; const Home = () => { return ( -
-
+
+
+ +
+
- }/> - }/> - + } /> + } /> + } /> + +
); diff --git a/src/redux/slices/store.ts b/src/redux/slices/store.ts new file mode 100644 index 0000000..d36e857 --- /dev/null +++ b/src/redux/slices/store.ts @@ -0,0 +1,30 @@ +import { createSlice, PayloadAction} from "@reduxjs/toolkit"; + +// Типы данных +interface StorState { + menu: { + activePage: string; + } +} + +// Инициализация состояния +const initialState: StorState = { + menu: { + activePage: "", + } +}; + + +// Slice +const storeSlice = createSlice({ + name: "store", + initialState, + reducers: { + setMenuActivePage: (state, activePage: PayloadAction) => { + state.menu.activePage = activePage.payload; + }, + }, +}); + +export const { setMenuActivePage } = storeSlice.actions; +export const storeReducer = storeSlice.reducer; diff --git a/src/redux/store.ts b/src/redux/store.ts index b13acc1..509071b 100644 --- a/src/redux/store.ts +++ b/src/redux/store.ts @@ -1,5 +1,6 @@ import { configureStore } from "@reduxjs/toolkit"; import { authReducer } from "./slices/auth"; +import { storeReducer } from "./slices/store"; // использование @@ -15,6 +16,7 @@ export const store = configureStore({ reducer: { //user: userReducer, auth: authReducer, + store: storeReducer, }, }); diff --git a/src/styles/index.css b/src/styles/index.css index 6bd8997..445e046 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -12,7 +12,7 @@ width: 100%; height: 100svh; /* @apply bg-layout-background; */ - transition: all linear 200ms; + /* transition: all linear 200ms; */ font-family: 'Source Code Pro', monospace; diff --git a/src/views/home/auth/Login.tsx b/src/views/home/auth/Login.tsx index 19c39a3..84deb39 100644 --- a/src/views/home/auth/Login.tsx +++ b/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 ( -
-
-
- Вход в аккаунт +
+
+
+
-
- Для начала работы войдите в аккаунт. Заполните поля ниже и нажмите "Войти". -
- -
-
- Поле не может быть пустым +
+
+ Вход в аккаунт
- setUsername(val)} - /> - -
- Поле не может быть пустым +
+ Для начала работы войдите в аккаунт. Заполните поля ниже и нажмите "Войти".
- setPassword(val)} - /> - {status === "failed" && error && ( -
{error}
- )} +
+
+ Поле не может быть пустым +
+ setUsername(val)} + /> + +
+ Поле не может быть пустым +
+ setPassword(val)} + /> + + {status === "failed" && error && ( +
{error}
+ )} +
+ +
+ + +
-
- - -
); diff --git a/src/views/home/menu/Menu.tsx b/src/views/home/menu/Menu.tsx index 8f929da..0e505a1 100644 --- a/src/views/home/menu/Menu.tsx +++ b/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(""); - // const [inputPassword, setInputPassword] = React.useState(""); - // const [inputClickLogin, setInputClickLogin] = React.useState(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 ( -
-
-
- Вход в аккаунт -
-
- Для начала работы вам необходимо войти в аккаунт. Заполните поля ниже - и нажмите кнопку войти -
- - {/*
-
- Поле не может быть пустым -
- -
- Поле не может быть пустым -
- -
- -
-
*/} +
+ +
+ {menuItems.map((v, i) => ( + + ))}
); diff --git a/src/views/home/menu/MenuItem.tsx b/src/views/home/menu/MenuItem.tsx new file mode 100644 index 0000000..ff25d43 --- /dev/null +++ b/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 = ({ icon, text = "", href = "", active = false, page = "" }) => { + const dispatch = useAppDispatch(); + + return ( + dispatch(setMenuActivePage(page)) + } + > + + {text} + + ); +}; + +export default MenuItem; diff --git a/vite.config.ts b/vite.config.ts index 5a33944..c9209db 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -3,5 +3,8 @@ import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ - plugins: [react()], + plugins: [ + react() + ], + })