Layout Configure

Here is the layout configure

const BlankLayout = () => {
return (
<Fragment>
<Suspense fallback={<Loader></Loader>}>
<Outlet></Outlet>
</Suspense>
<SettingOffCanvas />
</Fragment>
);
};
export default BlankLayout;

Dashboard Layout Configure

Here is the layout configure

import HeaderStyle from "../components/partials/dashboard/header/HeaderStyle";
import Subheader from "../components/custom/Subheader";
import SidebarStyle from "../components/partials/dashboard/sidebar/sidebar";
import FooterStyle from "../components/partials/dashboard/footer/FooterStyle";
import SettingOffCanvas from '../components/setting/SettingOffCanvas'


const DashboardLayout = memo((props) => {
useEffect(() => { });
const closeTour = () => {
sessionStorage.setItem("tour", "true");
};
// shepherd
const newSteps = [
{
title: "<h4>Menu</h4>",
text: '<p className="mb-0">Check the content under Menu Style. Click to view all oavailable Menu Style options
for you.</p>',
attachTo: { element: ".sidebar ", on: "right" },
buttons: [
{
type: "next",
text: "Next",
},
],
when: {
show: () => {
document
.querySelector(".shepherd-modal-overlay-container")
.classList.add("shepherd-modal-is-visible");
},
cancel: () => closeTour(),
},
},
{
title: "<h4>Profile Setting</h4>",
text: '<p className="mb-0">Configure your Profile using Profile Settings. Edit, save and update your profile
from here.</p>',
attachTo: { element: ".iq-tour ", on: "bottom" },
buttons: [
{
type: "back",
classes: "shepherd-button-secondary",
text: "Back",
},
{
type: "next",
text: "Next",
},
],
when: {
cancel: () => closeTour(),
},
},
{
title: "<h4>Live Customizer</h4>",
text: '<p className="mb-0">Transform the entire look, color, style and appearance of using Live Customizer
settings. Change and copy the settings from here.</p>',
attachTo: { element: ".btn-setting", on: "left" },
buttons: [
{
type: "back",
classes: "shepherd-button-secondary",
text: "Back",
},
{
action() {
sessionStorage.setItem("tour", "true");
return this.next();
},
text: "Done",
},
],
when: {
cancel: () => closeTour(),
},
},
];
const tourOptions = {
defaultStepOptions: {
cancelIcon: {
enabled: true,
},
},
when: {
cancel: function () { },
},
};
const pageLayout = useSelector(SettingSelector.page_layout)
return (
<Fragment>
<ShepherdTour steps={newSteps} tourOptions={tourOptions}>
<Tour />
<div className="wrapper">
<SidebarStyle />
<main className="main-content">
<div className="position-relative">
<HeaderStyle />
{props.isBanner == "true" ? <Subheader /> : ""}
</div>
<div className={` ${pageLayout} content-inner pb-0`}>
<Suspense fallback={<div className="react-load"></div>}>
<Outlet></Outlet>
</Suspense>
</div>
<FooterStyle />
</main>
</div>
<SettingOffCanvas />
</ShepherdTour>
</Fragment>
);
});
            

Template Layout Configure

Here is the layout configure

const FrontendLayout = memo((props) => {
const [animationClass, setAnimationClass] = useState("animate__fadeIn");
                
const scrollToTop = () => {
window.scrollTo({ top: 0, behavior: "smooth" });
};
const handleScroll = () => {
if (document.documentElement.scrollTop > 250) {
setAnimationClass("animate__fadeIn");
} else {
setAnimationClass("animate__fadeOut");
}
};
                
useEffect(() => {
handleScroll();
window.addEventListener("scroll", handleScroll);
                
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);
                
return (
<Fragment>
<main className="main-content">
{props.HeaderMega === "true" && <HeaderDefault></HeaderDefault>}
{props.HeaderMerchandise === "true" && (<HeaderMerchandise></HeaderMerchandise>)}
<Suspense fallback={<Loader></Loader>}>
<Outlet></Outlet>
</Suspense>
</main>
{props.FooterMerchandise === "true" && location.pathname !== "/shop" ? (<MerchandiseFooter />) : (<FooterDefault />)}
<div id="back-to-top" style="display: "none"" className="animate__animated ${animationClass}" onClick={scrollToTop} >
<Link className="p-0 btn bg-primary btn-sm position-fixed top border-0 rounded-circle text-white" id="top" to="#top" >
<i className="fa-solid fa-chevron-up"></i>
</Link>
</div>
<SettingOffCanvas />
</Fragment>
);
});