не открывается логика ветвления

src/App.tsx

@@ -101,13 +101,6 @@ export function useUserAccountFetcher({
 dayjs.locale("ru");
 
 const routeslink = [
-  {
-    path: "/tariffs",
-    page: <Tariffs />,
-    header: true,
-    sidebar: false,
-    footer: false,
-  },
   {
     path: "/edit",
     page: <EditPage />,
@@ -199,6 +192,7 @@ export default function App() {
         />
         <Route path="/list" element={<MyQuizzesFull />} />
         <Route path={"/view"} element={<ViewPage />} />
+        <Route path={"/tariffs"} element={<Tariffs />} />
         <Route element={<PrivateRoute />}>
           {routeslink.map((e, i) => (
             <Route

src/pages/DesignPage/DesignFilling.tsx

@@ -138,20 +138,6 @@ export const DesignFilling = () => {
           ))}
         </Box>
       </Paper>
-      <Box sx={{ textAlign: "end" }}>
-        <IconButton
-          onClick={toggleQuizPreview}
-          sx={{
-            pointerEvents: "auto",
-            marginLeft: "auto",
-            position: "relative",
-            zIndex: "999999",
-            alignItems: "end",
-          }}
-        >
-          <VisibilityIcon sx={{ height: "30px", width: "30px" }} />
-        </IconButton>
-      </Box>
     </Box>
   );
 };

src/pages/DesignPage/DesignPage.tsx

@@ -6,7 +6,7 @@ import { useQuizStore } from "@root/quizes/store";
 import Sidebar from "@ui_kit/Sidebar";
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { SidebarMobile } from "../startPage/Sidebar/SidebarMobile";
+import { SidebarMobile } from "../../ui_kit/Sidebar/SidebarMobile";
 import { cleanQuestions, setQuestions } from "@root/questions/actions";
 import {
   updateModalInfoWhyCantCreate,
@@ -17,7 +17,7 @@ import { questionApi } from "@api/question";
 import { useUiTools } from "@root/uiTools/store";
 
 import { ConfirmLeaveModal } from "../startPage/ConfirmLeaveModal";
-import { Header } from "../startPage/Header";
+import { Header } from "@ui_kit/Header/Header";
 import { DesignFilling } from "./DesignFilling";
 import { createPortal } from "react-dom";
 import QuizPreview from "@ui_kit/QuizPreview/QuizPreview";
@@ -69,13 +69,7 @@ export const DesignPage = () => {
     );
   return (
     <>
-      {/*<Header setMobileSidebar={setMobileSidebar} />*/}
       <Box sx={{ display: "flex", flexDirection: isMobile ? "column" : "row" }}>
-        {/*{isMobile ? (*/}
-        {/*  <SidebarMobile open={mobileSidebar} changePage={changePage} />*/}
-        {/*) : (*/}
-        {/*  <Sidebar changePage={changePage} />*/}
-        {/*)}*/}
         <DesignFilling />
         {createPortal(<QuizPreview />, document.body)}
       </Box>

src/pages/Questions/QuestionsPage.tsx

@@ -85,6 +85,7 @@ export default function QuestionsPage({
           display: "flex",
           justifyContent: "space-between",
           maxWidth: "796px",
+          position: "relative",
         }}
       >
         <IconButton
@@ -93,7 +94,6 @@ export default function QuestionsPage({
           }}
           sx={{
             position: "fixed",
-            left: isMobile ? "20px" : "250px",
             bottom: "140px",
           }}
           data-cy="create-question"

src/pages/Questions/SwitchBranchingPanel/QuestionsList.tsx

@@ -7,7 +7,7 @@ import {
   AnyTypedQuizQuestion,
   UntypedQuizQuestion,
 } from "@model/questionTypes/shared";
-import { Pencil } from "../../startPage/Sidebar/icons/Pencil";
+import { Pencil } from "../../../ui_kit/Sidebar/icons/Pencil";
 import {
   updateEditSomeQuestion,
   updateDragQuestionContentId,

src/pages/Tariffs/Tariffs.tsx

@@ -16,6 +16,7 @@ import { enqueueSnackbar } from "notistack";
 import { Tariff, getMessageFromFetchError } from "@frontend/kitui";
 import { withErrorBoundary } from "react-error-boundary";
 import { createTariffElements } from "./tariffsUtils/createTariffElements";
+import HeaderFull from "@ui_kit/Header/HeaderFull";
 
 function TariffPage() {
   const theme = useTheme();
@@ -93,6 +94,7 @@ function TariffPage() {
 
   return (
     <>
+      <HeaderFull />
       <Box
         sx={{
           justifyContent: "left",

src/pages/main.tsx

@@ -1,10 +1,10 @@
-import { Header } from "../../src/pages/startPage/Header";
+import { Header } from "@ui_kit/Header/Header";
 import Sidebar from "@ui_kit/Sidebar";
 import Box from "@mui/material/Box";
-import { useTheme, useMediaQuery } from "@mui/material";
+import { useTheme, useMediaQuery, IconButton } from "@mui/material";
 import HeaderFull from "@ui_kit/Header/HeaderFull";
 import { useEffect, useState } from "react";
-import { SidebarMobile } from "./startPage/Sidebar/SidebarMobile";
+import { SidebarMobile } from "../ui_kit/Sidebar/SidebarMobile";
 import { setShowConfirmLeaveModal } from "@root/uiTools/actions";
 import { setCurrentStep, setQuizes } from "@root/quizes/actions";
 import { useQuizStore } from "@root/quizes/store";
@@ -20,15 +20,17 @@ import { useQuestionsStore } from "@root/questions/store";
 import { quizApi } from "@api/quiz";
 import { questionApi } from "@api/question";
 import { createResult, setQuestions } from "@root/questions/actions";
+import { toggleQuizPreview } from "@root/quizPreview";
+import VisibilityIcon from "@mui/icons-material/Visibility";
 
 interface Props {
   sidebar: boolean;
   header?: boolean;
   footer?: boolean;
-  page: JSX.Element;
+  Page: JSX.Element;
 }
 
-export default function Main({ sidebar, header, footer, page }: Props) {
+export default function Main({ sidebar, header, footer, Page }: Props) {
   const theme = useTheme();
   const quiz = useCurrentQuiz();
   const quizConfig = quiz?.config;
@@ -115,22 +117,22 @@ export default function Main({ sidebar, header, footer, page }: Props) {
         <Box
           sx={{
             width: "100%",
-            height: "calc(100vh - 80px)",
+            height: isMobile ? "calc(100vh - 51px)" : "calc(100vh - 80px)",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-between",
             overflow: "hidden",
-            // padding: isMobile ? "15px" : "25px",
           }}
         >
           <Box
             sx={{
               background: theme.palette.background.default,
               width: "100%",
-              // padding: isMobile ? "15px" : "25px",
-              // height: "calc(100vh - 80px)",
               overflow: "auto",
               boxSizing: "border-box",
             }}
           >
-            {page}
+            <Page state={openBranchingPage} HC={openBranchingPageHC} />
           </Box>
 
           {footer && (
@@ -229,6 +231,20 @@ export default function Main({ sidebar, header, footer, page }: Props) {
                   <LinkSimple />
                 </Box>
               )}
+              <Box sx={{ textAlign: "end", width: "100%" }}>
+                <IconButton
+                  onClick={toggleQuizPreview}
+                  sx={{
+                    pointerEvents: "auto",
+                    marginLeft: "auto",
+                    position: "relative",
+                    zIndex: "999999",
+                    alignItems: "end",
+                  }}
+                >
+                  <VisibilityIcon sx={{ height: "30px", width: "30px" }} />
+                </IconButton>
+              </Box>
             </Box>
           )}
         </Box>

src/pages/startPage/EditPage.tsx

@@ -20,7 +20,7 @@ import SwitchStepPages from "@ui_kit/switchStepPages";
 import { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { useDebouncedCallback } from "use-debounce";
-import { SidebarMobile } from "./Sidebar/SidebarMobile";
+import { SidebarMobile } from "../../ui_kit/Sidebar/SidebarMobile";
 import {
   cleanQuestions,
   createResult,
@@ -32,7 +32,7 @@ import {
   setShowConfirmLeaveModal,
   updateSomeWorkBackend,
 } from "@root/uiTools/actions";
-import { Header } from "./Header";
+import { Header } from "@ui_kit/Header/Header";
 import { useQuestionsStore } from "@root/questions/store";
 import { questionApi } from "@api/question";
 import { useUiTools } from "@root/uiTools/store";

src/pages/startPage/Header.tsx

@@ -1,178 +0,0 @@
-import { LogoutButton } from "@ui_kit/LogoutButton";
-import BackArrowIcon from "@icons/BackArrowIcon";
-import { Burger } from "@icons/Burger";
-
-import {
-  Box,
-  Container,
-  FormControl,
-  IconButton,
-  TextField,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
-import { updateQuiz } from "@root/quizes/actions";
-import { useCurrentQuiz } from "@root/quizes/hooks";
-import CustomAvatar from "@ui_kit/Header/Avatar";
-import NavMenuItem from "@ui_kit/Header/NavMenuItem";
-
-import { enqueueSnackbar } from "notistack";
-import { useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-
-import Logotip from "../Landing/images/icons/QuizLogo";
-import { clearUserData } from "@root/user";
-import { clearAuthToken } from "@frontend/kitui";
-import { logout } from "@api/auth";
-
-type HeaderProps = {
-  setMobileSidebar: (callback: (visible: boolean) => boolean) => void;
-};
-
-export const Header = ({ setMobileSidebar }: HeaderProps) => {
-  const quiz = useCurrentQuiz();
-  const theme = useTheme();
-  const navigate = useNavigate();
-  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
-  const isMobile = useMediaQuery(theme.breakpoints.down(660));
-
-  async function handleLogoutClick() {
-    const [, logoutError] = await logout();
-
-    if (logoutError) {
-      return enqueueSnackbar(logoutError);
-    }
-
-    clearAuthToken();
-    clearUserData();
-    navigate("/");
-  }
-
-  return (
-    <Container
-      component="nav"
-      maxWidth={false}
-      disableGutters
-      sx={{
-        px: "16px",
-        display: "flex",
-        height: isMobile ? "51px" : "80px",
-        alignItems: "center",
-        bgcolor: isMobile ? "#333647" : "white",
-        borderBottom: "1px solid #E3E3E3",
-        zIndex: theme.zIndex.drawer + 1,
-      }}
-    >
-      <Link to="/" style={{ display: "flex" }}>
-        {isMobile ? <Logotip width={100} /> : <Logotip width={124} />}
-      </Link>
-      <Box
-        sx={{
-          display: isMobile ? "none" : "flex",
-          alignItems: "center",
-          ml: "37px",
-        }}
-      >
-        <Link to="/list">
-          <IconButton sx={{ p: "6px" }}>
-            <BackArrowIcon />
-          </IconButton>
-        </Link>
-        <FormControl fullWidth variant="standard">
-          <TextField
-            // value={quiz.name}
-            // onChange={(e) =>
-            //   updateQuiz(quiz.id, (quiz) => {
-            //     quiz.name = e.target.value;
-            //   })
-            // }
-            fullWidth
-            id="project-name"
-            placeholder="Название проекта окно"
-            sx={{
-              width: "270px",
-              "& .MuiInputBase-root": {
-                height: "34px",
-                borderRadius: "8px",
-                p: 0,
-              },
-            }}
-            inputProps={{
-              sx: {
-                height: "20px",
-                borderRadius: "8px",
-                fontSize: "16px",
-                lineHeight: "20px",
-                p: "7px",
-                color: "black",
-                "&::placeholder": {
-                  opacity: 1,
-                },
-              },
-            }}
-          />
-        </FormControl>
-      </Box>
-      {isTablet ? (
-        <Box
-          sx={{
-            display: "flex",
-            ml: "auto",
-          }}
-        >
-          {isMobile ? (
-            <Burger
-              onClick={() => setMobileSidebar((visible: boolean) => !visible)}
-              style={{ fontSize: "30px", color: "white", cursor: "pointer" }}
-            />
-          ) : (
-            <Box>
-              {/* <CustomAvatar
-                sx={{
-                  ml: "11px",
-                  backgroundColor: theme.palette.orange.main,
-                  height: "36px",
-                  width: "36px",
-                }}
-              /> */}
-            </Box>
-          )}
-        </Box>
-      ) : (
-        <>
-          <Box
-            sx={{
-              display: "flex",
-              gap: "30px",
-              overflow: "hidden",
-              ml: "20px",
-            }}
-          >
-            {/* <NavMenuItem text="Редактировать" isActive /> */}
-            {/* <NavMenuItem text="Заявки" />
-            <NavMenuItem text="Аналитика" />
-            <NavMenuItem text="История" />
-            <NavMenuItem text="Помощь" /> */}
-          </Box>
-          <Box
-            sx={{
-              display: "flex",
-              ml: "auto",
-              gap: "15px",
-            }}
-          >
-            {/* <CustomAvatar
-              sx={{
-                ml: "11px",
-                backgroundColor: theme.palette.orange.main,
-                height: "36px",
-                width: "36px",
-              }}
-            /> */}
-            <LogoutButton onClick={handleLogoutClick} />
-          </Box>
-        </>
-      )}
-    </Container>
-  );
-};

src/ui_kit/Header/Header.tsx

@@ -1,8 +1,9 @@
+import { LogoutButton } from "@ui_kit/LogoutButton";
 import BackArrowIcon from "@icons/BackArrowIcon";
-import EyeIcon from "@icons/EyeIcon";
+import { Burger } from "@icons/Burger";
+
 import {
   Box,
-  Button,
   Container,
   FormControl,
   IconButton,
@@ -10,15 +11,43 @@ import {
   useMediaQuery,
   useTheme,
 } from "@mui/material";
-import { decrementCurrentStep } from "@root/quizes/actions";
-import PenaLogo from "../PenaLogo";
-import CustomAvatar from "./Avatar";
-import NavMenuItem from "./NavMenuItem";
-import { Link } from "react-router-dom";
+import { updateQuiz } from "@root/quizes/actions";
+import { useCurrentQuiz } from "@root/quizes/hooks";
+import CustomAvatar from "@ui_kit/Header/Avatar";
+import NavMenuItem from "@ui_kit/Header/NavMenuItem";
 
-export default function Header() {
+import { enqueueSnackbar } from "notistack";
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+
+import Logotip from "../../pages/Landing/images/icons/QuizLogo";
+import { clearUserData } from "@root/user";
+import { clearAuthToken } from "@frontend/kitui";
+import { logout } from "@api/auth";
+import { ToTariffsButton } from "@ui_kit/Toolbars/ToTariffsButton";
+
+type HeaderProps = {
+  setMobileSidebar: (callback: (visible: boolean) => boolean) => void;
+};
+
+export const Header = ({ setMobileSidebar }: HeaderProps) => {
+  const quiz = useCurrentQuiz();
   const theme = useTheme();
+  const navigate = useNavigate();
   const isTablet = useMediaQuery(theme.breakpoints.down(1000));
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
+
+  async function handleLogoutClick() {
+    const [, logoutError] = await logout();
+
+    if (logoutError) {
+      return enqueueSnackbar(logoutError);
+    }
+
+    clearAuthToken();
+    clearUserData();
+    navigate("/");
+  }
 
   return (
     <Container
@@ -28,28 +57,36 @@ export default function Header() {
       sx={{
         px: "16px",
         display: "flex",
-        height: "80px",
+        height: isMobile ? "51px" : "80px",
         alignItems: "center",
-        bgcolor: "white",
+        bgcolor: isMobile ? "#333647" : "white",
         borderBottom: "1px solid #E3E3E3",
         zIndex: theme.zIndex.drawer + 1,
       }}
     >
-      <Link to="/">
-        <PenaLogo width={124} />
+      <Link to="/" style={{ display: "flex" }}>
+        {isMobile ? <Logotip width={100} /> : <Logotip width={124} />}
       </Link>
       <Box
         sx={{
-          display: "flex",
+          display: isMobile ? "none" : "flex",
           alignItems: "center",
           ml: "37px",
         }}
       >
-        <IconButton sx={{ p: "6px" }} onClick={decrementCurrentStep}>
+        <Link to="/list">
+          <IconButton sx={{ p: "6px" }}>
             <BackArrowIcon />
           </IconButton>
+        </Link>
         <FormControl fullWidth variant="standard">
           <TextField
+            value={quiz.name}
+            onChange={(e) =>
+              updateQuiz(quiz.id, (quiz) => {
+                quiz.name = e.target.value;
+              })
+            }
             fullWidth
             id="project-name"
             placeholder="Название проекта окно"
@@ -77,13 +114,37 @@ export default function Header() {
           />
         </FormControl>
       </Box>
-
-      {isTablet ? null : (
+      {isTablet ? (
+        <Box
+          sx={{
+            display: "flex",
+            ml: "auto",
+          }}
+        >
+          {isMobile ? (
+            <Burger
+              onClick={() => setMobileSidebar((visible: boolean) => !visible)}
+              style={{ fontSize: "30px", color: "white", cursor: "pointer" }}
+            />
+          ) : (
+            <Box>
+              {/* <CustomAvatar
+                sx={{
+                  ml: "11px",
+                  backgroundColor: theme.palette.orange.main,
+                  height: "36px",
+                  width: "36px",
+                }}
+              /> */}
+            </Box>
+          )}
+        </Box>
+      ) : (
         <>
           <Box
             sx={{
               display: "flex",
-              gap: "31px",
+              gap: "30px",
               overflow: "hidden",
               ml: "20px",
             }}
@@ -94,7 +155,6 @@ export default function Header() {
             <NavMenuItem text="История" />
             <NavMenuItem text="Помощь" /> */}
           </Box>
-          а я типа обычный хедер
           <Box
             sx={{
               display: "flex",
@@ -103,11 +163,18 @@ export default function Header() {
             }}
           >
             {/* <CustomAvatar
-              sx={{ ml: "11px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }}
+              sx={{
+                ml: "11px",
+                backgroundColor: theme.palette.orange.main,
+                height: "36px",
+                width: "36px",
+              }}
             /> */}
+            <LogoutButton onClick={handleLogoutClick} />
           </Box>
+          <ToTariffsButton />
         </>
       )}
     </Container>
   );
-}
+};