Merge pull request #101 from py-psychological-help/feature/main-page-…

…burger

feat: add burger menu, fix accordion height

src/components/App/App.module.scss

@@ -2,3 +2,7 @@
 	font-family: var(--font-family-main);
 	background-color: #f2f2f2;
 }
+
+.main {
+	position: relative;
+}

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 (
+		<nav className={clsx(cls.burger, { [cls.active]: burger.menuIsOpen })}>
+			<ul className={cls.navLinks}>
+				<li>
+					<NavLink
+						to="/#aboutSection"
+						onClick={() => dispatch(burgerActions.setToggleMenu())}
+						className={cls.navLink}
+					>
+						О проекте
+					</NavLink>
+				</li>
+				<li>
+					<NavLink
+						to="/#howItWorksSection"
+						className={cls.navLink}
+						onClick={() => dispatch(burgerActions.setToggleMenu())}
+					>
+						Как это работает
+					</NavLink>
+				</li>
+				<li>
+					<NavLink
+						to={isLoggedIn ? '/account-chat' : '/welcome'}
+						className={cls.navLink}
+						onClick={() => dispatch(burgerActions.setToggleMenu())}
+					>
+						Психологам
+					</NavLink>
+				</li>
+				{!isLoggedIn && (
+					<li>
+						<NavLink
+							to="/#faqSection"
+							className={cls.navLink}
+							onClick={() =>
+								dispatch(burgerActions.setToggleMenu())
+							}
+						>
+							Вопросы
+						</NavLink>
+					</li>
+				)}
+			</ul>
+		</nav>
+	);
+};
+
+export default BurgerMenu;

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);
+	}
+}

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 (
 			<header id="headerSection" className={styles.header}>
-				<Menu className={styles.menu} />
+				<Menu onClick={openBurgerMenu} className={styles.menu} />
 				<Link to="/">
 					<LogoIcon
 						className={styles.logo}
 						src={LogoIcon}
 						alt="логотип"
+						onClick={() => dispatch(burgerActions.setToggleMenu())}
 					/>
 				</Link>
 			</header>

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%;

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;

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 <Main />;
+	return (
+		<>
+			<Main />
+			<BurgerMenu />
+		</>
+	);
 };
 
 export default MainPage;

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;

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,
 	},
 });