diff --git a/src/components/App/App.module.scss b/src/components/App/App.module.scss index 688ce51..8c004c7 100644 --- a/src/components/App/App.module.scss +++ b/src/components/App/App.module.scss @@ -2,3 +2,7 @@ font-family: var(--font-family-main); background-color: #f2f2f2; } + +.main { + position: relative; +} diff --git a/src/components/BurgerMenu/BurgerMenu.jsx b/src/components/BurgerMenu/BurgerMenu.jsx new file mode 100644 index 0000000..0bd48c4 --- /dev/null +++ b/src/components/BurgerMenu/BurgerMenu.jsx @@ -0,0 +1,60 @@ +import { NavLink } from 'react-router-dom'; +import { useDispatch, useSelector } from 'react-redux'; +import clsx from 'clsx'; +import cls from './BurgerMenu.module.scss'; +import { burgerActions } from '../../slices/burgerSlice/burgerSlice'; + +const BurgerMenu = () => { + const isLoggedIn = useSelector((state) => state.user.userData); + const burger = useSelector((state) => state.burger); + const dispatch = useDispatch(); + + return ( + + ); +}; + +export default BurgerMenu; diff --git a/src/components/BurgerMenu/BurgerMenu.module.scss b/src/components/BurgerMenu/BurgerMenu.module.scss new file mode 100644 index 0000000..9f5edd9 --- /dev/null +++ b/src/components/BurgerMenu/BurgerMenu.module.scss @@ -0,0 +1,36 @@ +.burger { + position: absolute; + z-index: 5; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #fff; + transform: translateX(-100%); + transition: transform 0.2s ease; +} +.active { + transform: translateX(0); +} + +.navLinks { + margin-top: 50px; + list-style: none; + padding: 0; + display: flex; + flex-direction: column; + align-items: center; + gap: 24px; + font-weight: 500; + font-size: 20px; + line-height: 28px; +} + +.navLink { + text-decoration: none; + color: #000; + transition: color 0.2s ease; + &:hover { + color: var(--color-text-hover); + } +} diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 42b57af..29b1b15 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -9,6 +9,7 @@ import { userActions } from '../../slices/userSlice/userSlice'; import Logo from '../Logo/Logo'; import Button from '../buttonHeader/Button'; import styles from './Header.module.scss'; +import { burgerActions } from '../../slices/burgerSlice/burgerSlice'; const Header = memo(() => { const isLoggedIn = useSelector((state) => state.user.userData); @@ -20,6 +21,10 @@ const Header = memo(() => { query: '(max-width: 375px)', }); + const openBurgerMenu = () => { + dispatch(burgerActions.setToggleMenu()); + }; + const handleNav = () => { if (location.pathname !== '/signin') { navigate('/signin'); @@ -37,12 +42,13 @@ const Header = memo(() => { if (isMobile) { return (
- + dispatch(burgerActions.setToggleMenu())} />
diff --git a/src/components/Main/FaqSection/FaqSection.module.scss b/src/components/Main/FaqSection/FaqSection.module.scss index 0775299..9c89d8b 100644 --- a/src/components/Main/FaqSection/FaqSection.module.scss +++ b/src/components/Main/FaqSection/FaqSection.module.scss @@ -100,7 +100,7 @@ .expandedAnswer { grid-template-rows: 1fr; - max-height: 100px; + // max-height: 100px; border-bottom: none; } @@ -120,6 +120,7 @@ padding: 0; height: 60px; align-items: center; + gap: 5px; } .faqElement { width: 100%; diff --git a/src/components/SentDocuments/SentDocuments.module.scss b/src/components/SentDocuments/SentDocuments.module.scss index c96d508..e177be4 100644 --- a/src/components/SentDocuments/SentDocuments.module.scss +++ b/src/components/SentDocuments/SentDocuments.module.scss @@ -57,7 +57,7 @@ @media screen and (max-width: 375px) { .body { - max-width: 100vw;; + max-width: 100vw; margin-bottom: 32px; display: flex; flex-direction: column; diff --git a/src/pages/MainPage/MainPage.jsx b/src/pages/MainPage/MainPage.jsx index e318f25..9e7f5eb 100644 --- a/src/pages/MainPage/MainPage.jsx +++ b/src/pages/MainPage/MainPage.jsx @@ -1,10 +1,13 @@ import Main from '../../components/Main/Main'; +import BurgerMenu from '../../components/BurgerMenu/BurgerMenu'; const MainPage = () => { - // Проверка стора - // const user = useSelector((state) => state.user); - - return
; + return ( + <> +
+ + + ); }; export default MainPage; diff --git a/src/slices/burgerSlice/burgerSlice.js b/src/slices/burgerSlice/burgerSlice.js new file mode 100644 index 0000000..96e6c7c --- /dev/null +++ b/src/slices/burgerSlice/burgerSlice.js @@ -0,0 +1,18 @@ +import { createSlice } from '@reduxjs/toolkit'; + +const initialState = { + menuIsOpen: false, +}; + +export const burgerSlice = createSlice({ + name: 'burger', + initialState, + reducers: { + setToggleMenu: (state) => { + state.menuIsOpen = !state.menuIsOpen; + }, + }, +}); + +export const { actions: burgerActions } = burgerSlice; +export const { reducer: burgerReducer } = burgerSlice; diff --git a/src/slices/store.js b/src/slices/store.js index 1d0da7b..6d45a50 100644 --- a/src/slices/store.js +++ b/src/slices/store.js @@ -6,6 +6,7 @@ import { chatsReducer } from './chatsSlice/chatsSlice'; import { helpReqReducer } from './clientSlice/helpReqSlice'; import { sendChatLinkReducer } from './chatsSlice/chatLinksSlice'; import { selectedChatReducer } from './chatsSlice/selectedChatSlice'; +import { burgerReducer } from './burgerSlice/burgerSlice'; export default configureStore({ reducer: { @@ -16,5 +17,6 @@ export default configureStore({ chats: chatsReducer, sendChatLink: sendChatLinkReducer, selectedChat: selectedChatReducer, + burger: burgerReducer, }, });