MermsWebsite2025/components/layout/Layout.js

import { useEffect, useState } from "react"
import BackToTop from '../elements/BackToTop'
import Breadcrumb from './Breadcrumb'
import PageHead from './PageHead'
// import Footer1 from './footer/Footer1'
// import Footer2 from './footer/Footer2'
import Footer3 from "./footer/Footer3"
// import Header1 from "./header/Header1"
// import Header2 from './header/Header2'
import HeaderMerms from "./header/HeaderMerms";

export default function Layout({ headerStyle, footerStyle, headTitle, breadcrumbTitle, children, headerCls }) {
    const [scroll, setScroll] = useState(0)
    // Moblile Menu
    const [isMobileMenu, setMobileMenu] = useState(false)
    const handleMobileMenu = () => {
        setMobileMenu(!isMobileMenu)
        !isMobileMenu ? document.body.classList.add("wsactive") : document.body.classList.remove("wsactive")
    }

    useEffect(() => {
        const WOW = require('wowjs')
        window.wow = new WOW.WOW({
            live: false
        })
        window.wow.init()

        document.addEventListener("scroll", () => {
            const scrollCheck = window.scrollY > 100
            if (scrollCheck !== scroll) {
                setScroll(scrollCheck)
            }
        })
    }, [])
    return (
        <>
            <PageHead headTitle={headTitle} />
            <div id="page" className="page font--jakarta">
                <HeaderMerms scroll={scroll} isMobileMenu={isMobileMenu} handleMobileMenu={handleMobileMenu} headerCls={headerCls} />

                <div className="main">
                    <main className="main merms-main">
                        {breadcrumbTitle && <Breadcrumb breadcrumbTitle={breadcrumbTitle} />}

                        {children}
                    </main>
                </div>

                <Footer3 />
                {/*<BackToTop />*/}
            </div>
        </>
    )
}