к кнопке назад добавлена возможность делать это, и вохранять шаг степера в стор

src/index.tsx

@@ -26,7 +26,6 @@ const routeslink: {path: string; page: JSX.Element; header: boolean; sidebar: bo
     {path: "/list-empty", page: <FirstQuiz/>, header: false, sidebar: false},
     {path: "/list-full", page: <MyQuizzesFull/>, header: false, sidebar: false},
     {path: "/list-short", page: <MyQuizzes/>, header: false, sidebar: false},
-    {path: "/create-quize/:quizId", page: <StartPage/>, header: true, sidebar: true},
     {path: "/questions", page: <QuestionsPage/>, header: true, sidebar: true},
     {path: "/contacts", page: <ContactFormPage/>, header: true, sidebar: true},
     {path: "/result", page: <Result/>, header: true, sidebar: true},
@@ -42,6 +41,7 @@ root.render(
             {routeslink.map((e,i) =>(
                 <Route  key={i} path={e.path} element={<Main page={e.page} header={e.header} sidebar={e.sidebar}/>} />
             ))}
+            <Route path="/create-quize/:quizId" element={<StartPage/>} />
         </Routes>
     </BrowserRouter>
     </ThemeProvider>

src/pages/main.tsx

@@ -6,7 +6,7 @@ import HeaderFull from "@ui_kit/Header/HeaderFull";
 
 interface Props{
     sidebar: boolean,
-    header: boolean,
+    header?: boolean,
     page: JSX.Element
 }
 

src/pages/startPage/StartPage.tsx

@@ -1,24 +1,159 @@
 import Stepper from '@ui_kit/Stepper';
 import SwitchStepPages from "./switchStepPages";
 import React from "react";
+import PenaLogo from "@ui_kit/PenaLogo";
+import {Box, Button, Container, FormControl, IconButton, TextField, useTheme} from "@mui/material";
+import BackArrowIcon from "@icons/BackArrowIcon";
+import NavMenuItem from "@ui_kit/Header/NavMenuItem";
+import EyeIcon from "@icons/EyeIcon";
+import CustomAvatar from "@ui_kit/Header/Avatar";
+import Sidebar from "@ui_kit/Sidebar";
+import {quizStore} from "@root/quizes";
+import {useParams} from "react-router-dom";
 
 
 export default function StartPage() {
-
+    const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore();
-    const [activeStep, setActiveStep] = React.useState(1);
+    const params = Number(useParams().quizId);
+    const activeStep = listQuizes[params].step
+    const theme = useTheme();
 
     const handleNext = () => {
-        setActiveStep((prevActiveStep) => prevActiveStep + 1);
+        updateQuizesList(params, {step: listQuizes[params].step + 1})
-    };
+    }
 
     const handleBack = () => {
-        setActiveStep((prevActiveStep) => prevActiveStep - 1);
+        let result = listQuizes[params].step - 1
+        updateQuizesList(params, {step: result ? result : 1})
     };
 
     return (
         <>
-            <Stepper activeStep={activeStep} desc={"Настройка стартовой страницы"}/>
+            {/*хедер*/}
-          <SwitchStepPages activeStep={activeStep} handleNext={handleNext}/>
+            <Container
+                component="nav"
+                maxWidth={false}
+                disableGutters
+                sx={{
+                    px: "16px",
+                    display: "flex",
+                    height: "80px",
+                    alignItems: "center",
+                    bgcolor: "white",
+                    borderBottom: "1px solid #E3E3E3",
+                    zIndex: theme.zIndex.drawer + 1,
+                }}
+            >
+                <PenaLogo width={124} />
+                <Box
+                    sx={{
+                        display: "flex",
+                        alignItems: "center",
+                        ml: "37px",
+                    }}
+                >
+                    <IconButton sx={{ p: "6px" }}
+                                onClick={() => handleBack()}
+                    >
+                        <BackArrowIcon />
+                    </IconButton>
+                    <FormControl
+                        fullWidth
+                        variant="standard"
+                    >
+                        <TextField
+                            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>
+                <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",
+                    }}
+                >
+                    <Button
+                        variant="outlined"
+                        startIcon={<EyeIcon />}
+                        sx={{
+                            color: theme.palette.brightPurple.main,
+                            fontSize: "14px",
+                            lineHeight: "18px",
+                            height: "34px",
+                            "& .MuiButton-startIcon": {
+                                mr: "3px",
+                            }
+                        }}
+                    >Предпросмотр</Button>
+                    <Button
+                        variant="contained"
+                        sx={{
+                            fontSize: "14px",
+                            lineHeight: "18px",
+                            height: "34px",
+                        }}
+                    >Опубликовать</Button>
+                    <CustomAvatar sx={{ ml: "11px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }} />
+                </Box>
+            </Container>
+
+            <Box sx={{
+                display: 'flex'
+            }}
+            >
+                <Sidebar/>
+                <Box
+                    sx={{
+                        background: theme.palette.background.default,
+                        width: '100%',
+                        padding: '25px',
+                        height: 'calc(100vh - 80px)',
+                        overflow: 'auto',
+                        boxSizing: "border-box"
+                    }}
+                >
+                    <Stepper activeStep={activeStep} desc={"Настройка стартовой страницы"}/>
+                    <SwitchStepPages activeStep={activeStep} handleNext={handleNext}/>
+                </Box>
+            </Box>
         </>
     )
 }

src/pages/startPage/stepOne.tsx

@@ -11,9 +11,11 @@ interface HandleNext {
 
 export default function StepOne({ handleNext }: HandleNext) {
   const theme = useTheme();
+
   const params = Number(useParams().quizId);
   console.log(params)
-  const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore()
+
+  const {listQuizes, updateQuizesList,} = quizStore()
     console.log(listQuizes)
   return (
     <>

src/pages/startPage/steptwo.tsx

@@ -3,12 +3,16 @@ import CardWithImage from "./CardWithImage";
 import cardImage1 from "../../assets/card-1.png";
 import cardImage2 from "../../assets/card-2.png";
 import cardImage3 from "../../assets/card-3.png";
+import {quizStore} from "@root/quizes";
+import {useParams} from "react-router-dom";
 
 interface HandleNext {
     handleNext: () => void
 }
 
 export default function Steptwo ({handleNext}:HandleNext) {
+    const params = Number(useParams().quizId);
+    const {listQuizes, updateQuizesList} = quizStore()
     return (
         <Box sx={{
             mt: "60px",
@@ -21,17 +25,23 @@ export default function Steptwo ({handleNext}:HandleNext) {
                 mt: "40px",
             }}>
                 <Button variant='text'
-                        onClick={() => handleNext()}
+                        onClick={() => {
+                            handleNext()
+                        }}
                 >
                     <CardWithImage image={cardImage1} text="Standart" />
                 </Button>
                 <Button variant='text'
-                            onClick={() => handleNext()}
+                            onClick={() => {
+                                handleNext()
+                            }}
                 >
                     <CardWithImage image={cardImage2} text="Expanded" />
                 </Button>
                 <Button variant='text'
-                            onClick={() => handleNext()}
+                            onClick={() => {
+                                handleNext()
+                            }}
                 >
                     <CardWithImage image={cardImage3} text="Centered" />
                 </Button>

src/stores/quizes.ts

@@ -1,10 +1,10 @@
-import { create } from "zustand";
+import {create} from "zustand";
-import { persist } from "zustand/middleware";
+import {persist} from "zustand/middleware";
 
 interface QuizStore {
-    listQuizes: {[key: number]: Quizes};
+    listQuizes: { [key: number]: Quizes };
     updateQuizesList: (id: number, values: unknown) => void;
-    removeQuiz:(id: number) => void;
+    removeQuiz: (id: number) => void;
     createBlank: () => void;
 }
 
@@ -34,13 +34,14 @@ interface Quizes {
     passed_count: number,
     average_time: number,
     super: true,
-    group_id: number
+    group_id: number,
+    step: number
 }
 
 export const quizStore = create<QuizStore>()(
     persist(
         (set, get) => ({
-                listQuizes: {
+            listQuizes: {
                 //     1: {
                 //     "id": 0,
                 //     "qid": "string",
@@ -69,14 +70,14 @@ export const quizStore = create<QuizStore>()(
                 //     "super": true,
                 //     "group_id": 0
                 // }
-                },
+            },
             updateQuizesList: (id: number, values: any) => {
                 const state = get()["listQuizes"] || {};
                 state[id] = {
                     ...state[id],
                     ...values
                 };
-                set({listQuizes:state});
+                set({listQuizes: state});
             },
             removeQuiz: (id) => {
                 const state = get()["listQuizes"] || {};
@@ -87,40 +88,41 @@ export const quizStore = create<QuizStore>()(
                     }
                     return accumulator;
                 }, {});
-                set({listQuizes:newState});
+                set({listQuizes: newState});
             },
             createBlank: () => {
                 const id = getRandom(1000000, 10000000)
                 const newListQuizes = get()["listQuizes"] || {};
                 newListQuizes[id] = {
-                        "id": id,
+                    "id": id,
-                        "qid": "",
+                    "qid": "",
-                        "deleted": false,
+                    "deleted": false,
-                        "archived": true,
+                    "archived": true,
-                        "fingerprinting": true,
+                    "fingerprinting": true,
-                        "repeatable": true,
+                    "repeatable": true,
-                        "note_prevented": true,
+                    "note_prevented": true,
-                        "mail_notifications": true,
+                    "mail_notifications": true,
-                        "unique_answers": true,
+                    "unique_answers": true,
-                        "name": "",
+                    "name": "",
-                        "description": "",
+                    "description": "",
-                        "config": "",
+                    "config": "",
-                        "status": "",
+                    "status": "",
-                        "limit": 0,
+                    "limit": 0,
-                        "due_to": 0,
+                    "due_to": 0,
-                        "time_of_passing": 0,
+                    "time_of_passing": 0,
-                        "pausable": true,
+                    "pausable": true,
-                        "version": 0,
+                    "version": 0,
-                        "version_comment": "",
+                    "version_comment": "",
-                        "created_at": "",
+                    "created_at": "",
-                        "updated_at": "",
+                    "updated_at": "",
-                        "question_cnt": 0,
+                    "question_cnt": 0,
-                        "passed_count": 0,
+                    "passed_count": 0,
-                        "average_time": 0,
+                    "average_time": 0,
-                        "super": true,
+                    "super": true,
-                        "group_id": 0
+                    "group_id": 0,
+                    "step": 1
                 };
-                set({listQuizes:newListQuizes});
+                set({listQuizes: newListQuizes});
                 return id;
             },
         }),
@@ -130,7 +132,7 @@ export const quizStore = create<QuizStore>()(
     )
 );
 
-function getRandom(min: number, max:number) {
+function getRandom(min: number, max: number) {
     min = Math.ceil(min);
     max = Math.floor(max);
     return Math.floor(Math.random() * (max - min)) + min;