SQuiz/frontPanel
3
0
Fork 0
Code Issues 18 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

работа с отображением сайдбара и хедера (сломано)

Browse Source
This commit is contained in:
Tamara 2023-05-10 15:46:11 +03:00
parent cdb8c76c85
commit 455429d74b
4 changed files with 40 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/index.tsx
View File

@ -25,23 +25,41 @@ import MyQuizzesFull from "./pages/createQuize/MyQuizzesFull";
const root = ReactDOM.createRoot( const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement 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( root.render(
<React.StrictMode> <React.StrictMode>
<ThemeProvider theme={lightTheme}> <ThemeProvider theme={lightTheme}>
<BrowserRouter> <BrowserRouter>
<Routes> <Routes>
<Route path="/" element={ <Main /> }/> {routeslink.map((e,i) =>(
<Route path="/list" element={<FirstQuiz/>} /> <Route key={i} path={e.path} element={e.page} header={e.header} sidebar={e.sidebar} />
<Route path="/list-empty" element={<FirstQuiz/>} /> ))}
<Route path="/list-full" element={<MyQuizzesFull/>} /> {/*<Route path="/" element={ <Main /> }/>*/}
<Route path="/list-short" element={<MyQuizzes/>} /> {/*<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="/create" element={<StartPage/>} />*/}
<Route path="/questions" element={<QuestionsPage/>} /> {/*<Route path="/questions" element={<QuestionsPage/>} />*/}
<Route path='/contacts' element={<ContactFormPage/>} /> {/*<Route path='/contacts' element={<ContactFormPage/>} />*/}
<Route path='/result' element={<Result/>} /> {/*<Route path='/result' element={<Result/>} />*/}
<Route path="/settings" element={<Setting />} /> {/*<Route path="/settings" element={<Setting />} />*/}
<Route path='/install' element={<InstallQuiz/>} /> {/*<Route path='/install' element={<InstallQuiz/>} />*/}
</Routes> </Routes>
</BrowserRouter> </BrowserRouter>

4
src/pages/main.tsx
View File

@ -5,7 +5,7 @@ import {Outlet} from "react-router-dom";
import {useTheme} from "@mui/material"; import {useTheme} from "@mui/material";
export default function Main () { export default function Main (sidebar: boolean) {
const theme = useTheme(); const theme = useTheme();
return ( return (
<> <>
@ -14,7 +14,7 @@ export default function Main () {
display: 'flex' display: 'flex'
}} }}
> >
<Sidebar /> <Sidebar sidebar={sidebar} />
<Box <Box
sx={{ sx={{
background: theme.palette.background.default, background: theme.palette.background.default,

13
src/ui_kit/Header/Navbar.tsx
View File

@ -1,6 +1,7 @@
import NavbarCollapsed from "./NavbarCollapsed"; import NavbarCollapsed from "./NavbarCollapsed";
import NavbarCreateQuiz from "./NavbarCreateQuiz"; import NavbarCreateQuiz from "./NavbarCreateQuiz";
import Header from "@ui_kit/Header/Header"; import Header from "@ui_kit/Header/Header";
import HeaderFull from "@ui_kit/Header/HeaderFull";
interface Props { interface Props {
@ -11,11 +12,9 @@ interface Props {
export default function Navbar({ isLoggedIn, isCollapsed = false, mode = "default" }: Props) { export default function Navbar({ isLoggedIn, isCollapsed = false, mode = "default" }: Props) {
return isCollapsed ? return isLoggedIn ? (
<NavbarCollapsed isLoggedIn={isLoggedIn} /> <Header isLoggedIn={true}/>
: ):(
mode === "createQuiz" ? <HeaderFull/>
<NavbarCreateQuiz /> )
:
<Header isLoggedIn={true} />;
} }

5
src/ui_kit/Sidebar.tsx
View File

@ -30,7 +30,8 @@ const quizSettingsMenuItems = [
[GearIcon, "Настройки"], [GearIcon, "Настройки"],
] as const; ] as const;
export default function Sidebar() {
export default function Sidebar(sidebar: boolean) {
const theme = useTheme(); const theme = useTheme();
const [isMenuCollapsed, setIsMenuCollapsed] = useState(false); const [isMenuCollapsed, setIsMenuCollapsed] = useState(false);
const [activeMenuItemIndex, setActiveMenuItemIndex] = useState<number>(0); const [activeMenuItemIndex, setActiveMenuItemIndex] = useState<number>(0);
@ -45,7 +46,7 @@ export default function Sidebar() {
minWidth: isMenuCollapsed ? "80px" : "230px", minWidth: isMenuCollapsed ? "80px" : "230px",
width: isMenuCollapsed ? "80px" : "230px", width: isMenuCollapsed ? "80px" : "230px",
height: 'calc(100vh - 80px)', height: 'calc(100vh - 80px)',
display: "flex", display: sidebar ? "flex" : "none",
flexDirection: "column", flexDirection: "column",
py: "19px", py: "19px",
transitionProperty: "width, min-width", transitionProperty: "width, min-width",