processed the opening and closing of the topics and chat components for different sizes of screen

Author: KostiantynU

src/common/Sidebar/Sidebar.jsx

@@ -32,8 +32,9 @@ import { useMediaQuery } from 'react-responsive';
 import { useLogoutMutation } from '../../redux/auth-operations';
 import { useTopicsContext } from '../Topics/TopicsContext';
 import { useDispatch, useSelector } from 'react-redux';
-import { setIsLoggedIn } from '../../redux/authOperatonsToolkit/authOperationsThunkSlice';
+
 import { selectChatOpened, setChatOpened } from '../../redux/chatSlice';
+import localLogOutUtil from '../../utils/localLogOutUtil';
 
 const menuRoutes = [
   {
@@ -102,7 +103,7 @@ const Sidebar = () => {
     if (!isMobile) {
       setShowMenu(true);
     } else {
-      setShowMenu(false);
+      setShowMenu(true); // Mobile menu always true?
     }
   }, [isMobile, setShowMenu]);
 
@@ -112,13 +113,15 @@ const Sidebar = () => {
 
       if (error) {
         alert(error.data.message);
-        dispatch(setIsLoggedIn(false));
+        // dispatch(setIsLoggedIn(false));
+        localLogOutUtil();
         return;
       }
 
       // localLogOut();
       // navigate(PATH.MAIN);
-      dispatch(setIsLoggedIn(false));
+      // dispatch(setIsLoggedIn(false));
+      localLogOutUtil();
     } catch (error) {
       console.error('Виникла помилка:', error);
       return;
@@ -131,6 +134,7 @@ const Sidebar = () => {
       setShowMenu(false);
       dispatch(setChatOpened(true));
     }
+
     setShowTopics(true);
     navigate(path);
   };

src/common/Topics/ChatsBlock/ChatsBlock.jsx

@@ -30,7 +30,7 @@ import { selectAccessToken } from '../../../redux/authOperatonsToolkit/authOpera
 import localLogOutUtil from '../../../utils/localLogOutUtil';
 
 const ChatsBlock = ({ filter }) => {
-  const { isTopics } = useTopicsContext();
+  const { isTopics, showTopics } = useTopicsContext();
   const ChatItems = ChatBlockDataHelper(isTopics); //?!
   const { pathname } = useLocation();
   const path = pathname.includes('topics') ? 'topics' : 'notification';

src/components/Layouts/Header/Header.jsx

@@ -9,31 +9,50 @@ import { useSidebarContext } from '../../../common/Sidebar/SidebarContext';
 import Wrapper from '../Wrapper';
 // import { useUser } from '../../../hooks/useUser';
 import { PATH } from '../../../constans/routes';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
 import HeaderUserInfo from './HeaderUserInfo';
 import { useTopicsContext } from '../../../common/Topics/TopicsContext';
 import { useDispatch, useSelector } from 'react-redux';
 import { selectIsLoggedIn } from '../../../redux/authOperatonsToolkit/authOperationsThunkSelectors';
 import { setChatOpened } from '../../../redux/chatSlice';
+import { useMediaQuery } from 'react-responsive';
 
 const Header = () => {
   const { showMenu, setShowMenu } = useSidebarContext();
   // const { isAuthenticated } = useUser();
   const { setShowTopics } = useTopicsContext();
+  const { pathname } = useLocation();
+  const path = pathname.includes('chat') ? 'chat' : 'notifications';
+
+  const isMobile = useMediaQuery({ query: '(max-width: 767px)' });
 
   const isLoggedIn = useSelector(selectIsLoggedIn);
 
   const dispatch = useDispatch();
 
   const onIconMenuClick = () => {
-    if (!showMenu) {
+    if (!showMenu && path === 'chat') {
       dispatch(setChatOpened(false));
     } else {
       dispatch(setChatOpened(true));
     }
 
+    if (
+      !showMenu &&
+      isMobile &&
+      (pathname.includes('topics') || pathname.includes('notification'))
+    ) {
+      setShowTopics(false);
+    } else {
+      setShowTopics(true);
+    }
+
+    if (showMenu && isMobile && pathname.includes('chat')) {
+      setShowTopics(false);
+    }
+
     setShowMenu(!showMenu);
-    setShowTopics(false);
+    // setShowTopics(false);
   };
 
   return (

src/pages/NotificationPage/NotificationPage.jsx

@@ -3,18 +3,30 @@ import { Outlet } from 'react-router';
 import { NotificationPageWrap } from './NotificationPage.styled';
 import Topics from '../../common/Topics';
 import { useTopicsContext } from '../../common/Topics/TopicsContext';
+import { useMediaQuery } from 'react-responsive';
+import { useLocation } from 'react-router-dom';
 
 const NotificationPage = () => {
-  const { setІsTopics } = useTopicsContext();
+  const { showTopics, setShowTopics, setІsTopics } = useTopicsContext();
+  const isTablet = useMediaQuery({ query: '(max-width: 1199px)' });
+  const { pathname } = useLocation();
 
   useEffect(() => {
     setІsTopics(false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    if (isTablet && pathname.includes('notification/chat')) {
+      setShowTopics(false);
+    } else {
+      setShowTopics(true);
+    }
+  });
+
   return (
     <NotificationPageWrap>
-      <Topics isTopics={false} />
+      {showTopics ? <Topics isTopics={false} /> : null}
       <Outlet />
     </NotificationPageWrap>
   );

src/pages/NotificationPage/NotificationPage.styled.js

@@ -3,9 +3,10 @@ import { Box } from '@mui/material';
 
 export const NotificationPageWrap = styled(Box)`
   display: flex;
-  flex-grow: 2;
+  /* flex-grow: 2; */
 
   @media screen and (min-width: calc(1200px - 0.02px)) {
+    flex-grow: 2;
     gap: 40px;
   }
 `;

src/pages/TopicsPage/TopicsPage.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import { useState, useEffect } from 'react';
 import { useMediaQuery } from 'react-responsive';
 import { Outlet, useLocation, useParams } from 'react-router-dom';
@@ -11,7 +12,7 @@ import { useTopicsContext } from '../../common/Topics/TopicsContext';
 
 const useTabletAndBelowMediaQuery = () =>
   // useMediaQuery({ query: '(max-width: 770px)' });
-  useMediaQuery({ query: '(max-width: 768px)' });
+  useMediaQuery({ query: '(max-width: 1199px)' });
 
 const useMobileMediaQuery = () =>
   // useMediaQuery({ query: '(max-width: 769px)' });
@@ -35,8 +36,9 @@ function TopicsPage() {
   }, []);
 
   useEffect(() => {
-    if (isTabletAndBelow && pathname.includes('chat')) setShowTopics(false);
-    else setShowTopics(true);
+    if (isTabletAndBelow && pathname.includes('chat')) {
+      setShowTopics(false);
+    } else setShowTopics(true);
   }, [setShowTopics, isTabletAndBelow, pathname, isMobile]);
 
   const handleModal = () => {