Layout Configure

Here is the layout and routing configure

// DefaultLayout
 import React, { useEffect } from "react";

// react-router
import { Outlet } from "react-router-dom";
import Scrollbar from "smooth-scrollbar";

// Partials
import Header from "../components/partials/headerStyle/header";
// import SidebarStyle from "../components/partials/SidebarStyle/sidebarStyle";
import Footer from "../components/partials/footerStyle/footer";
import WebHostingFooter from "../components/partials/footerStyle/web-Hosting-Footer";
import QloudAppFooter from "../components/partials/footerStyle/qloud-App-Footer";
import QloudSecurityFooter from "../components/partials/footerStyle/qloud-Security-Footer";
import QloudMediaServicesFooter from "../components/partials/footerStyle/qloud-Media-Services-Footer";
import HealthCareFooter from "../components/partials/footerStyle/health-Care-Footer";
import BackToTop from "../components/partials/back-To-Top";


const defaultLayout = (props) => {

  const { Footers, WebHostingFooters, QloudAppFooters, QloudSecurityFooters, QloudMediaServicesFooters, HealthCareFooters } = props

  useEffect(() => {
    Scrollbar.init(document.querySelector("#my-scrollbar"));
  }, [])
  return (
    <>
      <div className="my-scrollbar">
        <Header />
        <Outlet />
      </div>
      <BackToTop></BackToTop>
      {Footers && <Footer />}
      {WebHostingFooters && <WebHostingFooter />}
      {QloudAppFooters && <QloudAppFooter />}
      {QloudSecurityFooters && <QloudSecurityFooter />}
      {QloudMediaServicesFooters && <QloudMediaServicesFooter />}
      {HealthCareFooters && <HealthCareFooter />}
    </>
  );
};

export default defaultLayout;

// BlankLayout
import React from "react";

// react-router
import { Outlet } from "react-router-dom";

const BlankLayout = () => {
return (
<>
<div className="wrapper">
<Outlet />
</div>
</>
);
};

export default BlankLayout