import { Fragment } from "react";
import { useEffect } from "react";
import { Outlet } from "react-router-dom";
import Footer from "./Footer";
import TapTop from "./TapTop";
import { useAppDispatch, useAppSelector } from "../reduxToolkit/hooks";
import { addSidebarTypes, setSideBarToggle } from "../reduxToolkit/reducers/layout/themeCustomizerSlice";
import Header from "./header";
import Sidebar from "./sidebar";
import ThemeCustomizer from "./themeCustomizer";

const Layout = () => {
  const { sidebar_types, sideBarToggle } = useAppSelector((state) => state.themeCustomizer);
  
  return (
    <>
      <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 />
    </>
  );
};
export default Layout;