поправила шапки в разных состояниях(убрала комментарии в них), адаптация окон загрузки и редактирования изображения + мелкие правки по дизайну

src/pages/Questions/AnswerDraggableList/AnswerItem.tsx

@@ -108,38 +108,38 @@ export const AnswerItem = ({
                 ),
                 endAdornment: (
                   <InputAdornment position="end">
-                    <IconButton
+                    {/*<IconButton*/}
-                      sx={{ padding: "0" }}
+                    {/*  sx={{ padding: "0" }}*/}
-                      aria-describedby="my-popover-id"
+                    {/*  aria-describedby="my-popover-id"*/}
-                      onClick={handleClick}
+                    {/*  onClick={handleClick}*/}
-                    >
+                    {/*>*/}
-                      <MessageIcon
+                    {/*  <MessageIcon*/}
-                        style={{
+                    {/*    style={{*/}
-                          color: "#9A9AAF",
+                    {/*      color: "#9A9AAF",*/}
-                          fontSize: "30px",
+                    {/*      fontSize: "30px",*/}
-                          marginRight: "6.5px",
+                    {/*      marginRight: "6.5px",*/}
-                        }}
+                    {/*    }}*/}
-                      />
+                    {/*  />*/}
-                    </IconButton>
+                    {/*</IconButton>*/}
-                    <Popover
+                    {/*<Popover*/}
-                      id="my-popover-id"
+                    {/*  id="my-popover-id"*/}
-                      open={isOpen}
+                    {/*  open={isOpen}*/}
-                      anchorEl={anchorEl}
+                    {/*  anchorEl={anchorEl}*/}
-                      onClose={handleClose}
+                    {/*  onClose={handleClose}*/}
-                      anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+                    {/*  anchorOrigin={{ vertical: "bottom", horizontal: "left" }}*/}
-                    >
+                    {/*>*/}
-                      <TextareaAutosize
+                    {/*  <TextareaAutosize*/}
-                        style={{ margin: "10px" }}
+                    {/*    style={{ margin: "10px" }}*/}
-                        placeholder="Подсказка для этого ответа"
+                    {/*    placeholder="Подсказка для этого ответа"*/}
-                        value={variant.hints}
+                    {/*    value={variant.hints}*/}
-                        onChange={(e) =>
+                    {/*    onChange={(e) =>*/}
-                          setQuestionVariantAnswer(e.target.value || " ")
+                    {/*      setQuestionVariantAnswer(e.target.value || " ")*/}
-                        }
+                    {/*    }*/}
-                        onKeyDown={(
+                    {/*    onKeyDown={(*/}
-                          event: KeyboardEvent<HTMLTextAreaElement>,
+                    {/*      event: KeyboardEvent<HTMLTextAreaElement>,*/}
-                        ) => event.stopPropagation()}
+                    {/*    ) => event.stopPropagation()}*/}
-                      />
+                    {/*  />*/}
-                    </Popover>
+                    {/*</Popover>*/}
                     <IconButton
                       sx={{ padding: "0" }}
                       onClick={() =>

src/pages/Questions/DataOptions/settingData.tsx

@@ -75,7 +75,7 @@ export default function SettingsData({ question }: SettingsDataProps) {
             </Box> */}
       <Box
         sx={{
-          pt: isMobile ? "0px" : "20px",
+          pt: "20px",
           pb: "20px",
           pl: isFigmaTablte ? (isWrappColumn ? "20px" : "34px") : "20px",
           pr: isFigmaTablte ? "19px" : "20px",

src/pages/Questions/DropDown/settingDropDown.tsx

@@ -47,8 +47,8 @@ export default function SettingDropDown({ question }: SettingDropDownProps) {
       >
         <Box
           sx={{
-            pt: isMobile ? "25px" : "20px",
+            pt: isMobile ? "0" : "20px",
-            pb: isMobile ? "25px" : "20px",
+            pb: isMobile ? "0" : "20px",
             pl: "20px",
             display: "flex",
             flexDirection: "column",

src/pages/Questions/Emoji/settingEmoji.tsx

@@ -74,7 +74,7 @@ export default function SettingEmoji({ question }: SettingEmojiProps) {
             </Box> */}
       <Box
         sx={{
-          pt: isMobile ? "0px" : "20px",
+          pt: "20px",
           pb: "20px",
           pl: "20px",
           pr: isFigmaTablte ? "30px" : "20px",

src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx

@@ -92,8 +92,8 @@ export default function QuestionsPageCard({
           boxShadow: "none",
           paddingBottom: "20px",
           borderRadius: "0",
-          borderTopLeftRadius: "12px",
+          borderTopLeftRadius: questionIndex == 0 ? "12px" : 0,
-          borderTopRightRadius: "12px",
+          borderTopRightRadius: questionIndex == 0 ? "12px" : 0,
         }}
       >
         <Box

src/pages/Questions/OwnTextField/settingTextField.tsx

@@ -126,7 +126,7 @@ export default function SettingTextField({ question }: SettingTextFieldProps) {
             </Box> */}
       <Box
         sx={{
-          pt: isMobile ? "0px" : "20px",
+          pt: "20px",
           pb: "20px",
           pl: isFigmaTablte ? (isWrappColumn ? "20px" : "34px") : "20px",
           pr: "20px",

src/pages/Questions/PageOptions/PageOptions.tsx

@@ -1,5 +1,18 @@
-import { Box, useMediaQuery, useTheme } from "@mui/material";
+import {
-import { updateQuestion } from "@root/questions/actions";
+  Box,
+  Button,
+  IconButton,
+  Modal,
+  Typography,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
+import {
+  copyQuestion,
+  deleteQuestion,
+  deleteQuestionWithTimeout,
+  updateQuestion,
+} from "@root/questions/actions";
 import CustomTextField from "@ui_kit/CustomTextField";
 
 import { useState } from "react";
@@ -8,6 +21,12 @@ import type { QuizQuestionPage } from "../../../model/questionTypes/page";
 import ButtonsOptions from "../ButtonsOptions";
 import SwitchPageOptions from "./switchPageOptions";
 import { MediaSelectionAndDisplay } from "@ui_kit/MediaSelectionAndDisplay";
+import { CopyIcon } from "@icons/questionsPage/CopyIcon";
+import { DeleteFunction } from "@utils/deleteFunc";
+import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
+import { useCurrentQuiz } from "@root/quizes/hooks";
+import { useQuestionsStore } from "@root/questions/store";
+import { updateDesireToOpenABranchingModal } from "@root/uiTools/actions";
 
 type Props = {
   disableInput?: boolean;
@@ -29,6 +48,14 @@ export default function PageOptions({ disableInput, question }: Props) {
     });
   }, 200);
 
+  const quiz = useCurrentQuiz();
+  const { questions } = useQuestionsStore.getState();
+  const [openDelete, setOpenDelete] = useState<boolean>(false);
+
+  const openedModal = () => {
+    updateDesireToOpenABranchingModal(question.content.id);
+  };
+
   const SSHC = (data: string) => {
     setSwitchState(data);
   };
@@ -59,12 +86,105 @@ export default function PageOptions({ disableInput, question }: Props) {
 
         <MediaSelectionAndDisplay resultData={question} />
       </Box>
-      <ButtonsOptions
+      <Box
-        switchState={switchState}
+        sx={{
-        SSHC={SSHC}
+          display: "flex",
-        question={question}
+          alignItems: "center",
-      />
+          justifyContent: "end",
-      <SwitchPageOptions switchState={switchState} question={question} />
+          width: "100%",
+          background: "#f2f3f7",
+          height: isMobile ? "92px" : "70px",
+        }}
+      >
+        <Box
+          sx={{
+            padding: "20px",
+            display: "flex",
+            gap: "6px",
+          }}
+        >
+          {/* <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
+                    <HideIcon style={{ color: "#4D4D4D" }} />
+                </IconButton> */}
+          <IconButton
+            sx={{ borderRadius: "6px", padding: "2px" }}
+            onClick={() => copyQuestion(question.id, question.quizId)}
+          >
+            <CopyIcon color={"#4D4D4D"} />
+          </IconButton>
+          <IconButton
+            sx={{ borderRadius: "6px", padding: "2px" }}
+            onClick={() => {
+              if (question.type === null) {
+                deleteQuestion(question.id);
+              }
+              if (question.content.rule.parentId.length !== 0) {
+                setOpenDelete(true);
+              } else {
+                deleteQuestionWithTimeout(question.id, () =>
+                  DeleteFunction(questions, question, quiz),
+                );
+              }
+            }}
+            data-cy="delete-question"
+          >
+            <DeleteIcon color={"#4D4D4D"} />
+          </IconButton>
+          <Modal open={openDelete} onClose={() => setOpenDelete(false)}>
+            <Box
+              sx={{
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                padding: "30px",
+                borderRadius: "10px",
+                background: "#FFFFFF",
+              }}
+            >
+              <Typography variant="h6" sx={{ textAlign: "center" }}>
+                Вы удаляете вопрос, участвующий в ветвлении. Все его потомки
+                потеряют данные ветвления. Вы уверены, что хотите удалить
+                вопрос?
+              </Typography>
+              <Box
+                sx={{
+                  marginTop: "30px",
+                  display: "flex",
+                  justifyContent: "center",
+                  gap: "15px",
+                }}
+              >
+                <Button
+                  variant="contained"
+                  sx={{ minWidth: "150px" }}
+                  onClick={() => setOpenDelete(false)}
+                >
+                  Отмена
+                </Button>
+                <Button
+                  variant="contained"
+                  sx={{ minWidth: "150px" }}
+                  onClick={() => {
+                    deleteQuestionWithTimeout(question.id, () =>
+                      DeleteFunction(questions, question, quiz),
+                    );
+                  }}
+                >
+                  Подтвердить
+                </Button>
+              </Box>
+            </Box>
+          </Modal>
+        </Box>
+      </Box>
+
+      {/*<ButtonsOptions*/}
+      {/*  switchState={switchState}*/}
+      {/*  SSHC={SSHC}*/}
+      {/*  question={question}*/}
+      {/*/>*/}
+      {/*<SwitchPageOptions switchState={switchState} question={question} />*/}
     </>
   );
 }

src/pages/Questions/QuestionsPage.tsx

@@ -62,19 +62,21 @@ export default function QuestionsPage({
         <Typography variant={"h5"}>
           {quiz.name ? quiz.name : "Заголовок quiz"}
         </Typography>
-        <Button
+        {!openBranchingPage && (
-          sx={{
+          <Button
-            fontSize: "16px",
+            sx={{
-            lineHeight: "19px",
+              fontSize: "16px",
-            padding: 0,
+              lineHeight: "19px",
-            textDecoration: "underline",
+              padding: 0,
-            color: theme.palette.brightPurple.main,
+              textDecoration: "underline",
-            textDecorationColor: theme.palette.brightPurple.main,
+              color: theme.palette.brightPurple.main,
-          }}
+              textDecorationColor: theme.palette.brightPurple.main,
-          onClick={collapseAllQuestions}
+            }}
-        >
+            onClick={collapseAllQuestions}
-          Свернуть всё
+          >
-        </Button>
+            Свернуть всё
+          </Button>
+        )}
       </Box>
       <QuestionSwitchWindowTool
         openBranchingPage={openBranchingPage}

src/pages/Questions/UploadFile/settingUpload.tsx

@@ -38,7 +38,16 @@ export default function SettingsUpload({ question }: SettingsUploadProps) {
         width: isMobile ? "auto" : "100%",
       }}
     >
-      <Typography>Настройки вопроса</Typography>
+      <Typography
+        sx={{
+          height: isMobile ? "18px" : "auto",
+          fontWeight: "500",
+          fontSize: "18px",
+          color: " #4D4D4D",
+        }}
+      >
+        Настройки вопросов
+      </Typography>
       {/* <CustomCheckbox
                 sx={{
                     display: isMobile ? "flex" : "block",

src/pages/Questions/UploadImage/UploadImageModal.tsx

@@ -6,6 +6,7 @@ import {
   Modal,
   TextField,
   InputAdornment,
+  useMediaQuery,
 } from "@mui/material";
 import UploadIcon from "../../../assets/icons/UploadIcon";
 import SearchIcon from "../../../assets/icons/SearchIcon";
@@ -32,7 +33,7 @@ export const UploadImageModal: React.FC<ModalkaProps> = ({
   const theme = useTheme();
   const dropZone = useRef<HTMLDivElement>(null);
   const [ready, setReady] = useState(false);
-
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
   const handleDragEnter = (event: DragEvent<HTMLDivElement>) => {
     event.preventDefault();
     setReady(true);
@@ -65,7 +66,7 @@ export const UploadImageModal: React.FC<ModalkaProps> = ({
           top: "50%",
           left: "50%",
           transform: "translate(-50%, -50%)",
-          maxWidth: "690px",
+          maxWidth: isMobile ? "300px" : "690px",
           bgcolor: "background.paper",
           borderRadius: "12px",
           boxShadow: 24,
@@ -106,13 +107,14 @@ export const UploadImageModal: React.FC<ModalkaProps> = ({
               ref={dropZone}
               sx={{
                 width: "580px",
-                padding: "33px 10px 33px 55px",
+                padding: isMobile ? "33px" : "33px 10px 33px 55px",
                 display: "flex",
                 alignItems: "center",
                 backgroundColor: theme.palette.background.default,
                 border: `1px solid ${ready ? "red" : theme.palette.grey2.main}`,
                 borderRadius: "8px",
                 gap: "55px",
+                flexDirection: isMobile ? "column" : undefined,
               }}
               onDragEnter={handleDragEnter} // Применяем обработчик onDragEnter напрямую
             >

src/pages/Questions/answerOptions/responseSettings.tsx

@@ -98,7 +98,7 @@ export default function ResponseSettings({ question }: Props) {
       <Box
         sx={{
           boxSizing: "border-box",
-          pt: isMobile ? "0px" : "20px",
+          pt: "20px",
           pb: "20px",
           pl: isFigmaTablte ? (isTablet ? "20px" : "34px") : "28px",
           pr: isFigmaTablte ? "19px" : "20px",

src/pages/createQuize/MyQuizzesFull.tsx

@@ -37,7 +37,10 @@ export default function MyQuizzesFull({
       {quizes.length === 0 ? (
         <FirstQuiz />
       ) : (
-        <SectionWrapper maxWidth="lg">
+        <SectionWrapper
+          maxWidth="lg"
+          sx={{ padding: isMobile ? "0 16px" : "20px" }}
+        >
           <Box
             sx={{
               display: "flex",

src/pages/createQuize/QuizCard.tsx

@@ -67,6 +67,7 @@ export default function QuizCard({
           overflow: "hidden",
           whiteSpace: "nowrap",
           widows: "100%",
+          maxWidth: "280px",
         }}
         variant="h5"
       >

src/pages/main.tsx

@@ -63,7 +63,7 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
     getData();
   }, []);
 
-  const isMobile = useMediaQuery(theme.breakpoints.down(600));
+  const isMobile = useMediaQuery(theme.breakpoints.down(650));
   const isMobileSm = useMediaQuery(theme.breakpoints.down(370));
   const isBranchingLogic = useMediaQuery(theme.breakpoints.down(1100));
   const isLinkButton = useMediaQuery(theme.breakpoints.down(708));

src/ui_kit/Header/Header.tsx

@@ -35,7 +35,7 @@ export const Header = ({ setMobileSidebar }: HeaderProps) => {
   const theme = useTheme();
   const navigate = useNavigate();
   const isTablet = useMediaQuery(theme.breakpoints.down(1000));
-  const isMobile = useMediaQuery(theme.breakpoints.down(600));
+  const isMobile = useMediaQuery(theme.breakpoints.down(650));
 
   async function handleLogoutClick() {
     const [, logoutError] = await logout();
@@ -65,7 +65,11 @@ export const Header = ({ setMobileSidebar }: HeaderProps) => {
       }}
     >
       <Link to="/" style={{ display: "flex" }}>
-        {isMobile ? <Logotip width={100} /> : <Logotip width={124} />}
+        {isMobile ? (
+          <Logotip width={100} color={"white"} />
+        ) : (
+          <Logotip width={124} />
+        )}
       </Link>
       <Box
         sx={{
@@ -89,7 +93,7 @@ export const Header = ({ setMobileSidebar }: HeaderProps) => {
             }
             fullWidth
             id="project-name"
-            placeholder="Название проекта окно"
+            placeholder="Название проекта"
             sx={{
               width: "270px",
               "& .MuiInputBase-root": {
@@ -114,67 +118,32 @@ export const Header = ({ setMobileSidebar }: HeaderProps) => {
           />
         </FormControl>
       </Box>
-      {isTablet ? (
+      <Box
-        <Box
+        sx={{
-          sx={{
+          display: "flex",
-            display: "flex",
+          ml: "auto",
-            ml: "auto",
+        }}
-          }}
+      >
-        >
+        {isMobile ? (
-          {isMobile ? (
+          <Burger
-            <Burger
+            onClick={() => setMobileSidebar((visible: boolean) => !visible)}
-              onClick={() => setMobileSidebar((visible: boolean) => !visible)}
+            style={{ fontSize: "30px", color: "white", cursor: "pointer" }}
-              style={{ fontSize: "30px", color: "white", cursor: "pointer" }}
+          />
-            />
+        ) : (
-          ) : (
+          <>
-            <Box>
+            <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",
+                display: "flex",
-                backgroundColor: theme.palette.orange.main,
+                ml: "auto",
-                height: "36px",
+                gap: "15px",
-                width: "36px",
               }}
-            /> */}
+            >
-            <LogoutButton onClick={handleLogoutClick} />
+              <LogoutButton onClick={handleLogoutClick} />
-          </Box>
+            </Box>
-          <ToTariffsButton />
+            <ToTariffsButton />
-        </>
+          </>
-      )}
+        )}
+      </Box>
     </Container>
   );
 };

src/ui_kit/Header/HeaderFull.tsx

@@ -48,18 +48,12 @@ export default function HeaderFull() {
         height: "80px",
         alignItems: "center",
         gap: isTablet ? "20px" : "60px",
-        flexDirection: isMobile ? "row-reverse" : "row",
+        flexDirection: "row",
         justifyContent: isMobile ? "space-between" : "center",
         bgcolor: "white",
         borderBottom: "1px solid #E3E3E3",
       }}
     >
-      {isTablet && (
-        <Burger
-          // onClick={() => setMobileSidebar(!mobileSidebar)}
-          style={{ fontSize: "30px", color: "#000000", cursor: "pointer" }}
-        />
-      )}
       <Link to="/">
         <Logotip width={124} />
       </Link>
@@ -70,56 +64,15 @@ export default function HeaderFull() {
             gap: "30px",
             overflow: "hidden",
           }}
-        >
+        ></Box>
-          {/* <NavMenuItem text="Квизы" />
-          <NavMenuItem text="Меню 2" isActive />
-          <NavMenuItem text="Меню 3" />
-          <NavMenuItem text="Меню 4" />
-          <NavMenuItem text="Меню 5" />
-          <NavMenuItem text="Меню 1" />
-          <NavMenuItem text="Меню 2" /> */}
-        </Box>
       )}
-      <Box sx={{ display: isMobile ? "none" : "flex", ml: "auto" }}>
+      <Box sx={{ display: "flex", ml: "auto" }}>
-        {/* {!isTablet && (
+        <LogoutButton
-          <>
+          onClick={handleLogoutClick}
-            <IconButton sx={{ p: 0 }}>
+          sx={{
-              <WalletIcon color={theme.palette.grey2.main} bgcolor="#F2F3F7" />
+            ml: "20px",
-            </IconButton>
+          }}
-            <Box sx={{ ml: "8px", whiteSpace: "nowrap" }}>
+        />
-              <Typography
-                sx={{
-                  fontSize: "12px",
-                  lineHeight: "14px",
-                  color: theme.palette.grey3.main,
-                }}
-              >
-                Мой баланс
-              </Typography>
-              <Typography variant="body2" color={theme.palette.brightPurple.main}>
-                00.00 руб.
-              </Typography>
-            </Box>
-          </>
-        )} */}
-        {!isMobile && (
-          <>
-            {/* <CustomAvatar
-              sx={{
-                ml: "27px",
-                backgroundColor: theme.palette.orange.main,
-                height: "36px",
-                width: "36px",
-              }}
-            /> */}
-            <LogoutButton
-              onClick={handleLogoutClick}
-              sx={{
-                ml: "20px",
-              }}
-            />
-          </>
-        )}
       </Box>
       <ToTariffsButton />
     </Container>

src/ui_kit/Modal/CropModal.tsx

@@ -170,6 +170,10 @@ export const CropModal: FC<Props> = ({
           padding: "20px",
           borderRadius: "8px",
           width: isMobile ? "343px" : "620px",
+          height: isMobile ? "80vh" : undefined,
+          display: isMobile ? "flex" : undefined,
+          flexDirection: isMobile ? "column" : undefined,
+          justifyContent: isMobile ? "space-evenly" : undefined,
         }}
       >
         <Box
@@ -258,7 +262,7 @@ export const CropModal: FC<Props> = ({
               sx={[
                 styleSlider,
                 {
-                  width: isMobile ? "350px" : "250px",
+                  width: isMobile ? undefined : "250px",
                 },
               ]}
               value={scale * 100}
@@ -278,7 +282,7 @@ export const CropModal: FC<Props> = ({
               sx={[
                 styleSlider,
                 {
-                  width: isMobile ? "350px" : "250px",
+                  width: isMobile ? undefined : "250px",
                 },
               ]}
               value={darken}
@@ -295,6 +299,7 @@ export const CropModal: FC<Props> = ({
             width: "100%",
             display: "flex",
             gap: "10px",
+            flexWrap: isMobile ? "wrap" : undefined,
           }}
         >
           <Button

src/ui_kit/Sidebar.tsx

@@ -10,6 +10,7 @@ import { useState } from "react";
 import MenuItem from "./MenuItem";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import { useLocation, useNavigate } from "react-router-dom";
+import { setCurrentStep } from "@root/quizes/actions";
 
 const quizSettingsMenuItems = [
   [TagIcon, "Дополнения"],
@@ -147,7 +148,10 @@ export default function Sidebar({ changePage, disableCollapse }: SidebarProps) {
       )}
       <List disablePadding>
         <MenuItem
-          onClick={() => navigate("/design")}
+          onClick={() => {
+            navigate("/design");
+            setCurrentStep(15);
+          }}
           text={"Дизайн"}
           isCollapsed={isMenuCollapsed}
           isActive={currentStep === 6}

src/ui_kit/Sidebar/SidebarMobile.tsx

@@ -1,5 +1,12 @@
-import { FC, useState } from "react";
+import { FC, useEffect, useRef, useState } from "react";
-import { Box, Popper, Typography } from "@mui/material";
+import {
+  Box,
+  FormControl,
+  IconButton,
+  Popper,
+  TextField,
+  Typography,
+} from "@mui/material";
 import { People } from "@mui/icons-material";
 
 import { SidebarModal } from "./SidebarModal";
@@ -12,6 +19,9 @@ import { Settings } from "./icons/Settings";
 import { Pencil } from "./icons/Pencil";
 import { ArrowDown } from "./icons/ArrowDown";
 import Sidebar from "@ui_kit/Sidebar";
+import { Link, useNavigate } from "react-router-dom";
+import { updateQuiz } from "@root/quizes/actions";
+import { useCurrentQuiz } from "@root/quizes/hooks";
 
 interface Iprops {
   open: boolean;
@@ -32,14 +42,25 @@ const quizSetupSteps = [
 
 export const SidebarMobile: FC<Iprops> = ({ open, changePage }) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [inputOpen, setInputOpen] = useState<boolean>(false);
+  const quiz = useCurrentQuiz();
+  const ref = useRef(null);
 
   const handleClick = (event) => {
     setAnchorEl(anchorEl ? null : event.currentTarget);
   };
 
+  const clickInput = (event) => {
+    if (ref.current && !ref.current.contains(event.target)) setInputOpen(false);
+  };
+  useEffect(() => {
+    document.addEventListener("mousedown", clickInput);
+    return () => {
+      document.removeEventListener("mousedown", clickInput);
+    };
+  }, []);
   const openPopper = Boolean(anchorEl);
   const id = openPopper ? "simple-popper" : undefined;
-
   return (
     <Box
       sx={{
@@ -54,27 +75,75 @@ export const SidebarMobile: FC<Iprops> = ({ open, changePage }) => {
       }}
     >
       <Box sx={{ display: "flex", alignItems: "center", position: "relative" }}>
-        <BackArrowIcon color="white" />
+        <Link to="/list">
+          <IconButton sx={{ p: "6px" }}>
+            <BackArrowIcon color={"white"} />
+          </IconButton>
+        </Link>
 
-        <Box sx={{ ml: "15px", display: "flex", alignItems: "end" }}>
+        <Box
+          sx={{
+            ml: "15px",
+            display: "flex",
+            alignItems: "end",
+            width: "100%",
+            justifyContent: "space-between",
+          }}
+        >
           <Box>
             <Typography sx={{ fontSize: "12px", color: "#9A9AAF" }}>
               Название
             </Typography>
-            <Typography
+            {inputOpen ? (
-              sx={{ color: "#FFF", fontSize: "18px", fontWeight: "500" }}
+              <FormControl fullWidth variant="standard">
-            >
+                <TextField
-              Название проекта
+                  ref={ref}
-            </Typography>
+                  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: "white",
+                      "&::placeholder": {
+                        opacity: 1,
+                      },
+                    },
+                  }}
+                />
+              </FormControl>
+            ) : (
+              <Typography color={"white"}>{quiz.name}</Typography>
+            )}
           </Box>
-          <Pencil
+          <IconButton onClick={() => setInputOpen(true)}>
-            style={{
+            <Pencil
-              position: "absolute",
+              style={{
-              right: "0",
+                position: "absolute",
-              color: "white",
+                right: "0",
-              fontSize: "24px",
+                color: "white",
-            }}
+                fontSize: "24px",
-          />
+              }}
+            />
+          </IconButton>
         </Box>
       </Box>
       <Box