работа над роутером(сломано)

src/App.tsx

@@ -1,11 +1,11 @@
 import { CssBaseline } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import CreateQuiz from "./components/CreateQuiz/CreateQuiz";
-import FirstQuiz from "./pages/startPage/FirstQuiz";
+import FirstQuiz from "./pages/createQuize/FirstQuiz";
-import MyQuizzes from "./components/MyQuizzes";
+import MyQuizzes from "./pages/createQuize/MyQuizzes";
-import Navbar from "./components/Navbar/Navbar";
+import Navbar from "@ui_kit/Header/Navbar";
-import NavbarCreateQuiz from "./components/Navbar/NavbarCreateQuiz";
+import NavbarCreateQuiz from "@ui_kit/Header/NavbarCreateQuiz";
-import QuizGallery from "./components/QuizGallery";
+import QuizGallery from "./pages/createQuize/QuizGallery";
 import lightTheme from "./utils/themes/light";
 import darkTheme from "./utils/themes/dark";
 

src/components/Button/BackButton.tsx

@@ -1,25 +0,0 @@
-import { Button } from "@mui/material";
-
-export default function BackButton() {
-  return (
-    <Button
-      sx={{
-        border: "1px solid #7E2AEA",
-        borderRadius: "8px",
-        width: "64px",
-        height: "44px",
-      }}
-    >
-      <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M17.25 8H0.75" stroke="#7E2AEA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-        <path
-          d="M7.5 1.25L0.75 8L7.5 14.75"
-          stroke="#7E2AEA"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-    </Button>
-  );
-}

src/index.tsx

@@ -6,22 +6,21 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import lightTheme from "./utils/themes/light";
 import { ThemeProvider } from '@mui/material';
 import CreateQuiz from './components/CreateQuiz/CreateQuiz';
-import NavbarCreateQuiz from './components/Navbar/NavbarCreateQuiz';
+import NavbarCreateQuiz from '@ui_kit/Header/NavbarCreateQuiz';
 import darkTheme from "./utils/themes/dark";
 
 import HorizontalLinearStepper from './ui_kit/Stepper';
-import Create from './pages/createQuize/Create';
+
-import Quizes from './pages/createQuize/Quizes';
-import Projects from './pages/createQuize/Projects';
-import Gallery from './pages/createQuize/Gallery';
 import StartPage from "./pages/startPage/StartPage";
 import Main from "./pages/main"
-import FirstQuiz from "./pages/startPage/FirstQuiz";
+import FirstQuiz from "./pages/createQuize/FirstQuiz";
 import QuestionsPage from "./pages/Questions/QuestionsPage";
 import ContactFormPage from "./pages/ContactFormPage/ContactFormPage";
 import InstallQuiz from "./pages/InstallQuiz/InstallQuiz";
 import {Result} from "./pages/Result/Result";
 import { Setting } from "./pages/Result/Setting";
+import MyQuizzes from "./pages/createQuize/MyQuizzes";
+import MyQuizzesFull from "./pages/createQuize/MyQuizzesFull";
 
 const root = ReactDOM.createRoot(
     document.getElementById('root') as HTMLElement
@@ -31,15 +30,18 @@ root.render(
         <ThemeProvider theme={lightTheme}>
     <BrowserRouter>
         <Routes>
-          <Route path="/" element={ <Main /> }>
+          <Route path="/" element={ <Main /> }/>
-              <Route path="/start" element={<FirstQuiz/>} />
+          <Route path="/list" element={<FirstQuiz/>} />
-              <Route path="/create" element={<StartPage/>} />
+          <Route path="/list-empty" element={<FirstQuiz/>} />
-              <Route path="/questions" element={<QuestionsPage/>} />
+          <Route path="/list-full" element={<MyQuizzesFull/>} />
-              <Route path='/contacts' element={<ContactFormPage/>} />
+          <Route path="/list-short" element={<MyQuizzes/>} />
-              <Route path='/result' element={<Result/>} />
+
-              <Route path="/settings" element={<Setting />} />
+          <Route path="/create" element={<StartPage/>} />
-              <Route path='/install' element={<InstallQuiz/>} />
+          <Route path="/questions" element={<QuestionsPage/>} />
-          </Route>
+          <Route path='/contacts' element={<ContactFormPage/>} />
+          <Route path='/result' element={<Result/>} />
+          <Route path="/settings" element={<Setting />} />
+          <Route path='/install' element={<InstallQuiz/>} />
 
         </Routes>
     </BrowserRouter>

src/pages/InstallQuiz/InstallQzOnSiteParent.tsx

@@ -7,7 +7,6 @@ import NumberThree from "@icons/NumberThree";
 interface Props {
     outerContainerSx?: SxProps<Theme>;
     children?: React.ReactNode;
-    sx?: SxProps<Theme>;
 }
 
 export default function InstallQzOnSiteParent ({outerContainerSx: sx, children}: Props) {

src/pages/createQuize/Create.tsx

@@ -1,11 +0,0 @@
-import FirstQuiz from "../startPage/FirstQuiz";
-import Navbar from "../../components/Navbar/Navbar";
-
-export default function Create(){
-    return (
-        <>
-            <Navbar isLoggedIn={true} /><FirstQuiz/>
-            <></>
-        </>
-    )
-}

src/pages/createQuize/FirstQuiz.tsx

@@ -1,7 +1,7 @@
 import { Typography, useTheme } from "@mui/material";
 import ComplexNavText from "../../components/ComplexNavText";
 import CustomButton from "../../components/CustomButton";
-import SectionWrapper from "../../components/SectionWrapper";
+import SectionWrapper from "@ui_kit/SectionWrapper";
 
 export default function FirstQuiz() {
   const theme = useTheme();

src/pages/createQuize/Gallery.tsx

@@ -1,9 +0,0 @@
-
-import Navbar from "../../components/Navbar/Navbar";
-import QuizGallery from "../../components/QuizGallery";
-
-export default function Gallery(){
-    return (
-<><Navbar isLoggedIn={true} /><QuizGallery /></>
-    )
-}

src/pages/createQuize/MyQuizzes.tsx

@@ -0,0 +1,23 @@
+import {useTheme, Box,} from "@mui/material";
+import ExpandableQuizBlock from "../../components/ExpandableQuizBlock";
+import MyQuizzesFull from "./MyQuizzesFull";
+
+
+export default function MyQuizzes() {
+    const theme = useTheme();
+
+    return (
+        <MyQuizzesFull>
+            <Box
+                sx={{
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "40px",
+                }}
+            >
+                <ExpandableQuizBlock name="Название" />
+                <ExpandableQuizBlock name="Название" />
+            </Box>
+        </MyQuizzesFull>
+    );
+}

src/pages/createQuize/MyQuizzesFull.tsx

@@ -1,11 +1,15 @@
-import {Typography, useTheme, Box, Button} from "@mui/material";
+import {Typography, useTheme, Box, Button, SxProps, Theme} from "@mui/material";
-import ComplexNavText from "./ComplexNavText";
+import ComplexNavText from "../../components/ComplexNavText";
-import ExpandableQuizBlock from "./ExpandableQuizBlock";
+import QuizCard from "../../components/QuizCard";
-import QuizCard from "./QuizCard";
+import SectionWrapper from "@ui_kit/SectionWrapper";
-import SectionWrapper from "./SectionWrapper";
+import React from "react";
 
+interface Props {
+    outerContainerSx?: SxProps<Theme>;
+    children?: React.ReactNode;
+}
 
-export default function MyQuizzes() {
+export default function MyQuizzesFull({outerContainerSx: sx, children}: Props) {
     const theme = useTheme();
 
     return (
@@ -16,7 +20,7 @@ export default function MyQuizzes() {
                 mb: "70px",
             }}
         >
-            <ComplexNavText text1="Кабинет квизов" />
+            <ComplexNavText text1="Кабинет квизов"/>
             <Box
                 sx={{
                     display: "flex",
@@ -40,19 +44,10 @@ export default function MyQuizzes() {
                     mb: "60px",
                 }}
             >
-                <QuizCard name="Название" openCount={0} applicationCount={0} conversionPercent={0} />
+                <QuizCard name="Название" openCount={0} applicationCount={0} conversionPercent={0}/>
-                <QuizCard name="Название" openCount={0} applicationCount={0} conversionPercent={0} />
+                <QuizCard name="Название" openCount={0} applicationCount={0} conversionPercent={0}/>
-            </Box>
-            <Box
-                sx={{
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: "40px",
-                }}
-            >
-                <ExpandableQuizBlock name="Название" />
-                <ExpandableQuizBlock name="Название" />
             </Box>
+            {children}
         </SectionWrapper>
-    );
+    )
 }

src/pages/createQuize/Projects.tsx

@@ -1,10 +0,0 @@
-import MyQuizzes from "../../components/MyQuizzes";
-import Navbar from "../../components/Navbar/Navbar";
-
-export default function Projects() {
-  return (
-    <>
-      <Navbar isLoggedIn={true} /> <MyQuizzes />
-    </>
-  );
-}

src/pages/createQuize/QuizGallery.tsx

@@ -1,19 +1,19 @@
 import { Box, FormControl, InputAdornment, InputLabel, MenuItem, Select, Tabs, TextField, Typography, useTheme } from "@mui/material";
-import ComplexNavText from "./ComplexNavText";
+import ComplexNavText from "../../components/ComplexNavText";
-import CustomButton from "./CustomButton";
+import CustomButton from "../../components/CustomButton";
-import LayoutIconOld from "../assets/icons/LayoutIcon";
+import LayoutIconOld from "@icons/LayoutIcon";
-import SearchIcon from "../assets/icons/SearchIcon";
+import SearchIcon from "@icons/SearchIcon";
-import SectionWrapper from "./SectionWrapper";
+import SectionWrapper from "@ui_kit/SectionWrapper";
-import ArrowDown from "../assets/icons/ArrowDownIcon";
+import ArrowDown from "@icons/ArrowDownIcon";
 import { useState } from "react";
-import { CustomTab } from "./CustomTab";
+import { CustomTab } from "../../components/CustomTab";
-import QuizTemplateCard from "./QuizTemplateCard";
+import QuizTemplateCard from "../../components/QuizTemplateCard";
-import quizTemplateImage1 from "../assets/quiz-template-1.png";
+import quizTemplateImage1 from "../../assets/quiz-template-1.png";
-import quizTemplateImage2 from "../assets/quiz-template-2.png";
+import quizTemplateImage2 from "../../assets/quiz-template-2.png";
-import quizTemplateImage3 from "../assets/quiz-template-3.png";
+import quizTemplateImage3 from "../../assets/quiz-template-3.png";
-import quizTemplateImage4 from "../assets/quiz-template-4.png";
+import quizTemplateImage4 from "../../assets/quiz-template-4.png";
-import quizTemplateImage5 from "../assets/quiz-template-5.png";
+import quizTemplateImage5 from "../../assets/quiz-template-5.png";
-import quizTemplateImage6 from "../assets/quiz-template-6.png";
+import quizTemplateImage6 from "../../assets/quiz-template-6.png";
 
 
 const categories = ["Категория 1", "Категория 2", "Категория 3", "Категория 4"] as const;

src/pages/createQuize/Quizes.tsx

@@ -1,8 +0,0 @@
-
-import Navbar from "../../components/Navbar/Navbar";
-
-export default function Quizes(){
-    return (
-<><Navbar isLoggedIn={true} /></>
-    )
-}

src/pages/main.tsx

@@ -1,4 +1,4 @@
-import Header from '@ui_kit/Header';
+import Header from '@ui_kit/Header/Header';
 import Sidebar from '@ui_kit/Sidebar';
 import Box from '@mui/material/Box';
 import {Outlet} from "react-router-dom";

src/ui_kit/Header/Header.tsx

@@ -1,10 +1,10 @@
 import { Box, Container, FormControl, IconButton, TextField, useTheme } from "@mui/material";
-import CustomButton from "../components/CustomButton";
+import CustomButton from "../../components/CustomButton";
-import BackArrowIcon from "../assets/icons/BackArrowIcon";
+import BackArrowIcon from "@icons/BackArrowIcon";
-import EyeIcon from "../assets/icons/EyeIcon";
+import EyeIcon from "@icons/EyeIcon";
-import CustomAvatar from "../components/Navbar/Avatar";
+import CustomAvatar from "./Avatar";
-import NavMenuItem from "../components/NavMenuItem";
+import NavMenuItem from "./NavMenuItem";
-import PenaLogo from "./PenaLogo";
+import PenaLogo from "../PenaLogo";
 
 interface Props {
     isLoggedIn: boolean;

src/ui_kit/Header/HeaderFull.tsx

@@ -0,0 +1,71 @@
+import { Box, Container, IconButton, Typography, useTheme } from "@mui/material";
+import LogoutIcon from "@icons/LogoutIcon";
+import NavMenuItem from "./NavMenuItem";
+import PenaLogo from "../PenaLogo";
+import WalletIcon from "@icons/WalletIcon";
+import CustomAvatar from "./Avatar";
+
+
+export default function HeaderFull() {
+    const theme = useTheme();
+
+    return (
+        <Container
+            component="nav"
+            disableGutters
+            maxWidth={false}
+            sx={{
+                px: "16px",
+                display: "flex",
+                height: "80px",
+                alignItems: "center",
+                gap: "60px",
+                bgcolor: "white",
+                borderBottom: "1px solid #E3E3E3",
+            }}
+        >
+            <PenaLogo width={124} />
+            <Box
+                sx={{
+                    display: "flex",
+                    gap: "30px",
+                    overflow: "hidden",
+                }}
+            >
+                <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: "flex",
+                    ml: "auto",
+                }}
+            >
+                <IconButton sx={{ p: 0 }}>
+                    <WalletIcon color={theme.palette.grey2.main} bgcolor="#F2F3F7" />
+                </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>
+                <CustomAvatar sx={{ ml: "27px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }} />
+                <IconButton
+                    sx={{ ml: "20px", bgcolor: "#F2F3F7", borderRadius: "6px", height: "36px", width: "36px" }}
+                >
+                    <LogoutIcon />
+                </IconButton>
+            </Box>
+        </Container>
+    );
+}

src/ui_kit/Header/Navbar.tsx

@@ -1,6 +1,6 @@
 import NavbarCollapsed from "./NavbarCollapsed";
 import NavbarCreateQuiz from "./NavbarCreateQuiz";
-import Header from "@ui_kit/Header";
+import Header from "@ui_kit/Header/Header";
 
 
 interface Props {

src/ui_kit/Header/NavbarCreateQuiz.tsx

@@ -1,8 +1,8 @@
 import { Box, Container, FormControl, IconButton, TextField, useTheme } from "@mui/material";
-import CustomButton from "../CustomButton";
+import CustomButton from "../../components/CustomButton";
-import BackArrowIcon from "../../assets/icons/BackArrowIcon";
+import BackArrowIcon from "@icons/BackArrowIcon";
-import EyeIcon from "../../assets/icons/EyeIcon";
+import EyeIcon from "@icons/EyeIcon";
-import NavMenuItem from "../NavMenuItem";
+import NavMenuItem from "./NavMenuItem";
 import PenaLogo from "@ui_kit/PenaLogo";
 import CustomAvatar from "./Avatar";