плашка с переключателем с ветвления на вопросы на панели в мобилке

src/pages/Questions/BranchingPanel/index.tsx

@@ -1,4 +1,4 @@
-import {Box, Typography, Switch, useTheme, Button, useMediaQuery} from "@mui/material";
+import {Box, Typography, Switch, useTheme, Button, useMediaQuery, SxProps, Theme} from "@mui/material";
 
 import { QuestionsList } from "./QuestionsList";
 import { updateOpenBranchingPanel } from "@root/questions/actions";
@@ -6,7 +6,7 @@ import {useQuestionsStore} from "@root/questions/store";
 import {useRef} from "react";
 
 
-export const BranchingPanel = () => {
+export const BranchingPanel = (sx?: SxProps<Theme>) => {
   const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down(660));
     const {openBranchingPanel} = useQuestionsStore.getState()
@@ -22,12 +22,13 @@ export const BranchingPanel = () => {
           background: "#fff",
           borderRadius: "12px",
           boxShadow: "0px 10px 30px #e7e7e7",
+          ...sx
         }}
       >
         <Switch
           value={openBranchingPanel}
           onChange={(_, value) => {
-              updateOpenBranchingPanel(!value)
+              updateOpenBranchingPanel(value)
           }}
           sx={{
             width: 50,
@@ -81,21 +82,6 @@ export const BranchingPanel = () => {
             Настройте связи между вопросами
           </Typography>
         </Box>
-        <Button
-            onClick={() => {
-              ref.current?.scrollIntoView({
-                    behavior: 'smooth'
-                  }
-              )}}
-            sx={{
-              display: isMobile ? "flex" : "none",
-              position: "fixed",
-              right: isMobile ? "60px" : "400px",
-              top: "156px",
-            }}
-        >
-          вниз
-        </Button>
       </Box>
       { openBranchingPanel === true && <QuestionsList /> }
     </Box>

src/pages/startPage/StartPage.tsx

@@ -9,8 +9,8 @@ import {
     Button,
     Container,
     FormControl,
-    IconButton,
+    IconButton, Switch,
-    TextField,
+    TextField, Typography,
     useMediaQuery,
     useTheme,
 } from "@mui/material";
@@ -29,7 +29,9 @@ import { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import useSWR from "swr";
 import { SidebarMobile } from "./Sidebar/SidebarMobile";
-import { cleanQuestions } from "@root/questions/actions";
+import {cleanQuestions, updateOpenBranchingPanel} from "@root/questions/actions";
+import {BranchingPanel} from "../Questions/BranchingPanel";
+import {useQuestionsStore} from "@root/questions/store";
 
 
 export default function StartPage() {
@@ -50,7 +52,7 @@ export default function StartPage() {
     const isTablet = useMediaQuery(theme.breakpoints.down(1000));
     const isMobile = useMediaQuery(theme.breakpoints.down(660));
     const [mobileSidebar, setMobileSidebar] = useState<boolean>(false);
-
+    const {openBranchingPanel} = useQuestionsStore.getState()
     const quizConfig = quiz?.config;
 
     useEffect(() => {
@@ -228,9 +230,9 @@ export default function StartPage() {
                     <Box
                         sx={{
                             position: "absolute",
-                            left: isMobile ? 0 : "230px",
+                            left: 0,
                             bottom: 0,
-                            width: isMobile ? "100%" : "calc(100% - 230px)",
+                            width: "100%",
                             padding: "20px 40px",
                             display: "flex",
                             justifyContent: "flex-end",
@@ -238,6 +240,75 @@ export default function StartPage() {
                             background: "#FFF",
                         }}
                     >
+                        <Box
+                            sx={{
+                                display: openBranchingPanel ? "none" : "display",
+                                alignItems: "center",
+                                gap: "15px",
+                                padding: "18px",
+                                background: "#fff",
+                                borderRadius: "12px",
+                                boxShadow: "0px 10px 30px #e7e7e7",
+                            }}
+                        >
+                            <Switch
+                                value={openBranchingPanel}
+                                onChange={(_, value) => {
+                                    updateOpenBranchingPanel(value)
+                                }}
+                                sx={{
+                                    width: 50,
+                                    height: 30,
+                                    padding: 0,
+                                    "& .MuiSwitch-switchBase": {
+                                        padding: 0,
+                                        margin: "2px",
+                                        transitionDuration: "300ms",
+                                        "&.Mui-checked": {
+                                            transform: "translateX(20px)",
+                                            color: theme.palette.brightPurple.main,
+                                            "& + .MuiSwitch-track": {
+                                                backgroundColor: "#E8DCF9",
+                                                opacity: 1,
+                                                border: 0,
+                                            },
+                                            "&.Mui-disabled + .MuiSwitch-track": { opacity: 0.5 },
+                                        },
+                                        "&.Mui-disabled .MuiSwitch-thumb": {
+                                            color:
+                                                theme.palette.mode === "light"
+                                                    ? theme.palette.grey[100]
+                                                    : theme.palette.grey[600],
+                                        },
+                                        "&.Mui-disabled + .MuiSwitch-track": {
+                                            opacity: theme.palette.mode === "light" ? 0.7 : 0.3,
+                                        },
+                                    },
+                                    "& .MuiSwitch-thumb": {
+                                        boxSizing: "border-box",
+                                        width: 25,
+                                        height: 25,
+                                    },
+                                    "& .MuiSwitch-track": {
+                                        borderRadius: 13,
+                                        backgroundColor:
+                                            theme.palette.mode === "light" ? "#E9E9EA" : "#39393D",
+                                        opacity: 1,
+                                        transition: theme.transitions.create(["background-color"], {
+                                            duration: 500,
+                                        }),
+                                    },
+                                }}
+                            />
+                            <Box>
+                                <Typography sx={{ fontWeight: "bold", color: "#4D4D4D" }}>
+                                    Логика ветвления
+                                </Typography>
+                                <Typography sx={{ color: "#4D4D4D", fontSize: "12px" }}>
+                                    Настройте связи между вопросами
+                                </Typography>
+                            </Box>
+                        </Box>
                         <Button
                             variant="contained"
                             sx={{

src/ui_kit/Sidebar.tsx

@@ -46,6 +46,7 @@ export default function Sidebar() {
                 overflow: "hidden",
                 whiteSpace: "nowrap",
                 boxSizing: "border-box",
+                zIndex: 1
             }}
         >
             <Box