Layout Configure

Here is the layout and routing configure

const BoxedFancy = () => {
  useEffect(
    () =>{ 
            document.body.classList.add('boxed-fancy')
            return() =>{
                document.body.classList.remove('boxed-fancy')
        }
    }
  )
    return (
        <div className="boxed-inner">
            <div id="loading">
            </div>
            <span className="screen-darken"></span>
            <main className="main-content">
                <HeaderStyle2 />
            <div className="conatiner-fluid content-inner">
                <BoxedFancyRouter />
            </div>
                <Footer />
            </main>
        </div>
    )
}

const Boxed = () => {
    useEffect( 
        () =>{
                document.body.classList.add('boxed')
                return() =>{
                    document.body.classList.remove('boxed')
            }
        }
    )
    return (
        <div className="boxed-inner">
         <span className="screen-darken"></span>
            <main className="main-content">
                <HeaderStyle2 />
                <div className="conatiner-fluid content-inner">
                    <BoxedRouter />
                </div>
                    <Footer />
            </main>
        </div>
    )
}

const Default = () => {
    return (
        <>
            <Sidebar />
            <main className="main-content">
                <div className="position-relative">
                    <Header />
                    <SubHeader />
                </div>
                <div className="conatiner-fluid content-inner mt-n5 py-0">
                  <DefaultRouter />
                </div>
                    <Footer />
            </main>           
            <SettingOffcanvas  />    
        </>
    )
}

const DualCompact = () => {
    useEffect(
        () =>{
                document.body.classList.add('dual-compact')
                return () =>{
                document.body.classList.remove('dual-compact')
            }
        }
    )
    return (
        <>
            <span className="screen-darken"></span>
            <div id="loading">
            </div>
            <main className="main-content">
                <HeaderStyle4 />
                <div className="conatiner-fluid content-inner">
                <HorizontalMulti2Router />
                </div>
                <Footer />
            </main>
        </>
    )
  }

const DualHorizontal = () => {
    return (
        <>
            <main className="main-content">
                <HeaderStyle3 />
                <div className="conatiner-fluid content-inner pb-0">
                    <HorizontalMultiRouter />
                </div>
                <Footer />
            </main>   
        </>
    )
}

const Horizontal = () => {
    return (
        <>
            <main className="main-content">
                <HeaderStyle1 />
                <div className="conatiner-fluid content-inner">
                   <HorizontalRouter />
                </div>
                <Footer />
            </main>
        </>
    )
}

const Simple = () => {
    return (
        <>
            <div id="loading">
            </div>
            <div className="wrapper">
            <SimpleRouter />
            </div>  
        </>
    )
}