From b8eaa5208c8159fa5e6be19716b7446e386080e9 Mon Sep 17 00:00:00 2001
From: Tamara <tamara.zelenko555@yandex.ru>
Date: Sun, 14 Jan 2024 22:34:56 +0300
Subject: [PATCH] =?UTF-8?q?=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D0=B8=20=D0=BB?=
 =?UTF-8?q?=D0=BE=D0=B3=D0=B8=D0=BA=D0=B8=20=D0=B2=D0=B5=D1=82=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=B8=D1=81=D1=87=D0=B5=D0=B7=D0=B0?=
 =?UTF-8?q?=D1=8E=D1=82=20=D0=B8=20=D0=BF=D1=80=D0=BE=D0=BF=D0=B0=D0=B4?=
 =?UTF-8?q?=D0=B0=D1=8E=D1=82=20=D1=82=D0=B0=D0=BC=20=D0=B3=D0=B4=D0=B5=20?=
 =?UTF-8?q?=D0=BD=D1=83=D0=B6=D0=BD=D0=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Questions/QuestionSwitchWindowTool.tsx    |  3 ++
 src/pages/Questions/QuestionsPage.tsx         |  3 ++
 .../Questions/SwitchBranchingPanel/index.tsx  |  5 ++--
 src/pages/main.tsx                            | 28 ++++++++++++++++---
 src/pages/startPage/EditPage.tsx              |  3 ++
 src/ui_kit/switchStepPages.tsx                |  3 ++
 6 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/pages/Questions/QuestionSwitchWindowTool.tsx b/src/pages/Questions/QuestionSwitchWindowTool.tsx
index 10f89bae..b0b4ab3c 100644
--- a/src/pages/Questions/QuestionSwitchWindowTool.tsx
+++ b/src/pages/Questions/QuestionSwitchWindowTool.tsx
@@ -13,11 +13,13 @@ import { deleteTimeoutedQuestions } from "@utils/deleteTimeoutedQuestions";
 interface Props {
   openBranchingPage: boolean;
   setOpenBranchingPage: (a: boolean) => void;
+  widthMain: number;
 }
 
 export const QuestionSwitchWindowTool = ({
   openBranchingPage,
   setOpenBranchingPage,
+  widthMain,
 }: Props) => {
   const { questions } = useQuestionsStore.getState();
   const theme = useTheme();
@@ -54,6 +56,7 @@ export const QuestionSwitchWindowTool = ({
         <SwitchBranchingPanel
           openBranchingPage={openBranchingPage}
           setOpenBranchingPage={openBranchingPageHC}
+          widthMain={widthMain}
         />
       )}
     </Box>
diff --git a/src/pages/Questions/QuestionsPage.tsx b/src/pages/Questions/QuestionsPage.tsx
index 5e16966b..115523de 100755
--- a/src/pages/Questions/QuestionsPage.tsx
+++ b/src/pages/Questions/QuestionsPage.tsx
@@ -32,11 +32,13 @@ import { useNavigate } from "react-router-dom";
 interface Props {
   openBranchingPage: boolean;
   setOpenBranchingPage: (a: boolean) => void;
+  widthMain: number;
 }
 
 export default function QuestionsPage({
   openBranchingPage,
   setOpenBranchingPage,
+  widthMain,
 }: Props) {
   const theme = useTheme();
   const { openedModalSettingsId } = useUiTools();
@@ -86,6 +88,7 @@ export default function QuestionsPage({
       <QuestionSwitchWindowTool
         openBranchingPage={openBranchingPage}
         setOpenBranchingPage={setOpenBranchingPage}
+        widthMain={widthMain}
       />
       <Box
         sx={{
diff --git a/src/pages/Questions/SwitchBranchingPanel/index.tsx b/src/pages/Questions/SwitchBranchingPanel/index.tsx
index da777fc4..c0493dc6 100644
--- a/src/pages/Questions/SwitchBranchingPanel/index.tsx
+++ b/src/pages/Questions/SwitchBranchingPanel/index.tsx
@@ -12,19 +12,20 @@ import { PanelSwitchQuestionListGraph } from "@ui_kit/Toolbars/PanelSwitchQuesti
 interface Props {
   openBranchingPage: boolean;
   setOpenBranchingPage: () => void;
+  widthMain: number;
 }
 
 export const SwitchBranchingPanel = ({
   openBranchingPage,
   setOpenBranchingPage,
+  widthMain,
 }: Props) => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(660));
   const isTablet = useMediaQuery(theme.breakpoints.down(1446));
-
   return openBranchingPage ? (
     <Box sx={{ userSelect: "none", maxWidth: "350px", width: "100%" }}>
-      {isTablet || (
+      {widthMain > 1216 && (
         <PanelSwitchQuestionListGraph
           openBranchingPage={openBranchingPage}
           setOpenBranchingPage={setOpenBranchingPage}
diff --git a/src/pages/main.tsx b/src/pages/main.tsx
index c5b5d169..298f07fb 100755
--- a/src/pages/main.tsx
+++ b/src/pages/main.tsx
@@ -3,7 +3,7 @@ import Sidebar from "@ui_kit/Sidebar/Sidebar";
 import Box from "@mui/material/Box";
 import { useTheme, useMediaQuery, IconButton } from "@mui/material";
 import HeaderFull from "@ui_kit/Header/HeaderFull";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { SidebarMobile } from "../ui_kit/Sidebar/SidebarMobile";
 import { setShowConfirmLeaveModal } from "@root/uiTools/actions";
 import { setCurrentStep, setQuizes } from "@root/quizes/actions";
@@ -65,7 +65,8 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
 
   const isMobile = useMediaQuery(theme.breakpoints.down(650));
   const isMobileSm = useMediaQuery(theme.breakpoints.down(370));
-  const isBranchingLogic = useMediaQuery(theme.breakpoints.down(1100));
+  const isBranchingLogicSmall = useMediaQuery(theme.breakpoints.down(1100));
+  const isBranchingLogicBig = useMediaQuery(theme.breakpoints.down(1446));
   const isLinkButton = useMediaQuery(theme.breakpoints.down(708));
   const [mobileSidebar, setMobileSidebar] = useState<boolean>(false);
   const [nextStep, setNextStep] = useState<number>(0);
@@ -94,6 +95,21 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
     setCurrentStep(index);
   };
 
+  const [widthMain, setWidthMain] = useState(null);
+  const mainBlock = useRef(0);
+
+  const observer = useRef(
+    new ResizeObserver((entries) => {
+      const { width } = entries[0].contentRect;
+      setWidthMain(width);
+    }),
+  );
+
+  useEffect(() => {
+    observer.current.observe(mainBlock.current);
+  }, [mainBlock, observer]);
+  console.log(widthMain);
+
   return (
     <>
       <Header setMobileSidebar={setMobileSidebar} />
@@ -125,6 +141,7 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
           }}
         >
           <Box
+            ref={mainBlock}
             sx={{
               background: theme.palette.background.default,
               width: "100%",
@@ -135,6 +152,7 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
             <Page
               openBranchingPage={openBranchingPage}
               setOpenBranchingPage={openBranchingPageHC}
+              widthMain={widthMain}
             />
           </Box>
 
@@ -157,17 +175,19 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
               }}
             >
               {isConditionMet &&
-                (isBranchingLogic ? (
+                (isBranchingLogicSmall ? (
                   <SmallSwitchQuestionListGraph
                     openBranchingPage={openBranchingPage}
                     setOpenBranchingPage={openBranchingPageHC}
                   />
-                ) : (
+                ) : widthMain < 1216 || !openBranchingPage ? (
                   <PanelSwitchQuestionListGraph
                     openBranchingPage={openBranchingPage}
                     setOpenBranchingPage={openBranchingPageHC}
                     hideText
                   />
+                ) : (
+                  <></>
                 ))}
               {/* Кнопка тестового просмотра  */}
               <ButtonTestPublication />
diff --git a/src/pages/startPage/EditPage.tsx b/src/pages/startPage/EditPage.tsx
index b733aad7..39778e3f 100755
--- a/src/pages/startPage/EditPage.tsx
+++ b/src/pages/startPage/EditPage.tsx
@@ -45,10 +45,12 @@ import { checkQuestionHint } from "@utils/checkQuestionHint";
 interface Props {
   openBranchingPage: boolean;
   setOpenBranchingPage: (a: boolean) => void;
+  widthMain: number;
 }
 export default function EditPage({
   openBranchingPage,
   setOpenBranchingPage,
+  widthMain,
 }: Props) {
   const quiz = useCurrentQuiz();
   const { editQuizId } = useQuizStore();
@@ -148,6 +150,7 @@ export default function EditPage({
                   quizStartPageType={quizConfig.startpageType}
                   openBranchingPage={openBranchingPage}
                   setOpenBranchingPage={setOpenBranchingPage}
+                  widthMain={widthMain}
                 />
               </>
             )}
diff --git a/src/ui_kit/switchStepPages.tsx b/src/ui_kit/switchStepPages.tsx
index 5ab7229c..b2e87051 100755
--- a/src/ui_kit/switchStepPages.tsx
+++ b/src/ui_kit/switchStepPages.tsx
@@ -21,6 +21,7 @@ interface Props {
   quizResults: QuizResultsType;
   openBranchingPage: boolean;
   setOpenBranchingPage: (a: boolean) => void;
+  widthMain: number;
 }
 
 export default function SwitchStepPages({
@@ -30,6 +31,7 @@ export default function SwitchStepPages({
   quizResults,
   openBranchingPage,
   setOpenBranchingPage,
+  widthMain,
 }: Props) {
   switch (activeStep) {
     case 0: {
@@ -44,6 +46,7 @@ export default function SwitchStepPages({
         <QuestionsPage
           openBranchingPage={openBranchingPage}
           setOpenBranchingPage={setOpenBranchingPage}
+          widthMain={widthMain}
         />
       );
     case 2: