import { Fragment } from "react";
import { Outlet } from "react-router-dom";
import { useAppSelector } from "../ReduxToolkit/Hooks";
import Footer from "./Footer";
import Header from "./Header/Header";
import Sidebar from "./Sidebar/Sidebar";
import TapTop from "./TapTop";
import ThemeCustomizer from "./ThemeCustomizer";

const Layout = () => {
  const { sidebar_types, sideBarToggle } = useAppSelector((state) => state.themeCustomizer);
  return (
    <Fragment>
      <TapTop />
      <div className={`page-wrapper ${sideBarToggle ? "compact-wrapper" : sidebar_types}`}>
        <Header />
        <div className="page-body-wrapper">
          <Sidebar />
          <div className="page-body">
            <Outlet />
          </div>
          <Footer />
        </div>
      </div>
      <ThemeCustomizer />
    </Fragment>
  );
};
export default Layout;