Quiz_dashboard/src/Layout/Ui/Layout.tsx
2024-10-02 10:16:27 +03:00

31 lines
830 B
TypeScript

import React, { useState } from "react";
import NavBar from "./NavBar";
import SideBar from "./SideBar";
import ProtectedRouteProvider from "../../lib/ProtectedRouteProvider";
import { useSideBarState } from "../../zustand/SideBarState";
const Layout = ({
children,
className = "",
}: {
children: React.ReactNode;
className?: string;
}) => {
const {openSideBar, setOpenSideBar} = useSideBarState();
return (
<ProtectedRouteProvider className="Layout">
<main
className={`${className} ${openSideBar ? "Layout_Body" : "Layout_Body side_bar_close"}`}
>
<NavBar isOpen={openSideBar} />
<div className="Layout_Children">{children}</div>
</main>
<SideBar isOpen={openSideBar} setIsOpen={setOpenSideBar} />
</ProtectedRouteProvider>
);
};
export default Layout;