работа с отображением сайдбара и хедера (сломано)
This commit is contained in:
parent
cdb8c76c85
commit
455429d74b
@ -25,23 +25,41 @@ import MyQuizzesFull from "./pages/createQuize/MyQuizzesFull";
|
||||
const root = ReactDOM.createRoot(
|
||||
document.getElementById('root') as HTMLElement
|
||||
);
|
||||
|
||||
const routeslink: {path: string; page: JSX.Element; header: boolean; sidebar: boolean} [] = [
|
||||
{path: "/", page: <Main/>, header: false, sidebar: false},
|
||||
{path: "/list", page: <FirstQuiz/>, header: false, sidebar: false},
|
||||
{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", 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},
|
||||
{path: "/settings", page: <Setting />, header: true, sidebar: true},
|
||||
{path: "/install", page: <InstallQuiz/>, header: true, sidebar: true},
|
||||
]
|
||||
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={ <Main /> }/>
|
||||
<Route path="/list" element={<FirstQuiz/>} />
|
||||
<Route path="/list-empty" element={<FirstQuiz/>} />
|
||||
<Route path="/list-full" element={<MyQuizzesFull/>} />
|
||||
<Route path="/list-short" element={<MyQuizzes/>} />
|
||||
{routeslink.map((e,i) =>(
|
||||
<Route key={i} path={e.path} element={e.page} header={e.header} sidebar={e.sidebar} />
|
||||
))}
|
||||
{/*<Route path="/" element={ <Main /> }/>*/}
|
||||
{/*<Route path="/list" element={<FirstQuiz/>} />*/}
|
||||
{/*<Route path="/list-empty" element={<FirstQuiz/>} />*/}
|
||||
{/*<Route path="/list-full" element={<MyQuizzesFull/>} />*/}
|
||||
{/*<Route path="/list-short" element={<MyQuizzes/>} />*/}
|
||||
|
||||
<Route path="/create" element={<StartPage/>} />
|
||||
<Route path="/questions" element={<QuestionsPage/>} />
|
||||
<Route path='/contacts' element={<ContactFormPage/>} />
|
||||
<Route path='/result' element={<Result/>} />
|
||||
<Route path="/settings" element={<Setting />} />
|
||||
<Route path='/install' element={<InstallQuiz/>} />
|
||||
{/*<Route path="/create" element={<StartPage/>} />*/}
|
||||
{/*<Route path="/questions" element={<QuestionsPage/>} />*/}
|
||||
{/*<Route path='/contacts' element={<ContactFormPage/>} />*/}
|
||||
{/*<Route path='/result' element={<Result/>} />*/}
|
||||
{/*<Route path="/settings" element={<Setting />} />*/}
|
||||
{/*<Route path='/install' element={<InstallQuiz/>} />*/}
|
||||
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
|
||||
@ -5,7 +5,7 @@ import {Outlet} from "react-router-dom";
|
||||
import {useTheme} from "@mui/material";
|
||||
|
||||
|
||||
export default function Main () {
|
||||
export default function Main (sidebar: boolean) {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<>
|
||||
@ -14,7 +14,7 @@ export default function Main () {
|
||||
display: 'flex'
|
||||
}}
|
||||
>
|
||||
<Sidebar />
|
||||
<Sidebar sidebar={sidebar} />
|
||||
<Box
|
||||
sx={{
|
||||
background: theme.palette.background.default,
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import NavbarCollapsed from "./NavbarCollapsed";
|
||||
import NavbarCreateQuiz from "./NavbarCreateQuiz";
|
||||
import Header from "@ui_kit/Header/Header";
|
||||
import HeaderFull from "@ui_kit/Header/HeaderFull";
|
||||
|
||||
|
||||
interface Props {
|
||||
@ -11,11 +12,9 @@ interface Props {
|
||||
|
||||
export default function Navbar({ isLoggedIn, isCollapsed = false, mode = "default" }: Props) {
|
||||
|
||||
return isCollapsed ?
|
||||
<NavbarCollapsed isLoggedIn={isLoggedIn} />
|
||||
:
|
||||
mode === "createQuiz" ?
|
||||
<NavbarCreateQuiz />
|
||||
:
|
||||
<Header isLoggedIn={true} />;
|
||||
return isLoggedIn ? (
|
||||
<Header isLoggedIn={true}/>
|
||||
):(
|
||||
<HeaderFull/>
|
||||
)
|
||||
}
|
||||
@ -30,7 +30,8 @@ const quizSettingsMenuItems = [
|
||||
[GearIcon, "Настройки"],
|
||||
] as const;
|
||||
|
||||
export default function Sidebar() {
|
||||
|
||||
export default function Sidebar(sidebar: boolean) {
|
||||
const theme = useTheme();
|
||||
const [isMenuCollapsed, setIsMenuCollapsed] = useState(false);
|
||||
const [activeMenuItemIndex, setActiveMenuItemIndex] = useState<number>(0);
|
||||
@ -45,7 +46,7 @@ export default function Sidebar() {
|
||||
minWidth: isMenuCollapsed ? "80px" : "230px",
|
||||
width: isMenuCollapsed ? "80px" : "230px",
|
||||
height: 'calc(100vh - 80px)',
|
||||
display: "flex",
|
||||
display: sidebar ? "flex" : "none",
|
||||
flexDirection: "column",
|
||||
py: "19px",
|
||||
transitionProperty: "width, min-width",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user