2022-03-11 10:43:00 +00:00
|
|
|
import React, { Fragment } from 'react';
|
|
|
|
|
import GeneralHeader from './GeneralHeader';
|
2022-03-11 12:19:52 +00:00
|
|
|
import Head from "next/head"
|
2022-03-11 12:36:23 +00:00
|
|
|
import GeneralFooter from './GeneralFooter';
|
2022-06-03 16:36:24 +00:00
|
|
|
import { gsap } from "gsap";
|
|
|
|
|
import threeJsAnimations from '../../functions/frontend/threeJsAnimations';
|
|
|
|
|
|
|
|
|
|
const GeneralLayout = ({ children, pageName }) => {
|
|
|
|
|
|
|
|
|
|
const [readyState, setReadyState] = React.useState(false)
|
|
|
|
|
|
|
|
|
|
React.useEffect(() => {
|
|
|
|
|
// barba.init({
|
|
|
|
|
// transitions: [{
|
|
|
|
|
// name: 'default-transition',
|
|
|
|
|
// leave() {
|
|
|
|
|
// // create your stunning leave animation here
|
|
|
|
|
// return gsap.to("main", {
|
|
|
|
|
// opacity: 1,
|
|
|
|
|
// duration: 1,
|
|
|
|
|
// delay: 2
|
|
|
|
|
// })
|
|
|
|
|
// },
|
|
|
|
|
// enter() {
|
|
|
|
|
// // create your amazing enter animation here
|
|
|
|
|
// return gsap.from("main", {
|
|
|
|
|
// opacity: 0,
|
|
|
|
|
// duration: 1,
|
|
|
|
|
// delay: 2
|
|
|
|
|
// })
|
|
|
|
|
// }
|
|
|
|
|
// }]
|
|
|
|
|
// });
|
|
|
|
|
|
2022-06-03 19:54:06 +00:00
|
|
|
// window.addEventListener("load", () => {
|
|
|
|
|
// })
|
|
|
|
|
// setReadyState(true);
|
2022-06-03 16:36:24 +00:00
|
|
|
|
2022-06-03 19:54:06 +00:00
|
|
|
document.querySelectorAll("nav a").forEach((link) => {
|
|
|
|
|
let locationRegex = new RegExp(`${window.location.pathname}.*?`);
|
|
|
|
|
if (link.pathname === window.location.pathname) {
|
|
|
|
|
link.classList.add("active-page");
|
|
|
|
|
}
|
|
|
|
|
});
|
2022-06-03 16:36:24 +00:00
|
|
|
|
2022-06-03 20:08:56 +00:00
|
|
|
gsap.to("#main-content-wrapper", {
|
|
|
|
|
opacity: 1,
|
|
|
|
|
duration: 2,
|
|
|
|
|
delay: 1
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// gsap.to("#page-loader", {
|
|
|
|
|
// opacity: 0,
|
|
|
|
|
// duration: 0.5,
|
|
|
|
|
// delay: 1,
|
|
|
|
|
// pointerEvents: "none"
|
2022-06-03 19:54:06 +00:00
|
|
|
// })
|
2022-06-03 16:36:24 +00:00
|
|
|
|
2022-06-03 20:08:56 +00:00
|
|
|
// document.getElementById("page-loader").style.opacity
|
2022-06-03 19:54:06 +00:00
|
|
|
|
|
|
|
|
threeJsAnimations();
|
2022-06-03 16:36:24 +00:00
|
|
|
}, [])
|
|
|
|
|
|
2022-01-06 05:27:13 +00:00
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Fragment>
|
2022-03-11 12:19:52 +00:00
|
|
|
<Head>
|
|
|
|
|
<meta name="keywords" content="UI/UX designer, Full Stack Web Developer, Web/graphic/motion designer, React Developer, NextJS developer, Node JS developer, Javascript Developer, Linux Ubuntu, DevOps, Nginx, MySQL developer, Freelancer" />
|
|
|
|
|
</Head>
|
2022-06-03 16:36:24 +00:00
|
|
|
|
2022-06-03 19:54:06 +00:00
|
|
|
{/* <div id='page-loader' className='fixed w-screen h-screen bg-black flex items-center justify-center top-0 left-0' style={ { zIndex: 2000 } }>
|
2022-06-03 16:36:24 +00:00
|
|
|
<span className='text-xl'>Tben Loading ...</span>
|
2022-06-03 19:54:06 +00:00
|
|
|
</div> */}
|
2022-06-03 16:36:24 +00:00
|
|
|
|
2022-06-03 19:54:06 +00:00
|
|
|
<div id='main-content-wrapper' style={ { opacity: 0 } }>
|
|
|
|
|
<GeneralHeader />
|
|
|
|
|
<main>
|
|
|
|
|
{ children }
|
|
|
|
|
</main>
|
|
|
|
|
<GeneralFooter />
|
|
|
|
|
</div>
|
2022-06-03 16:36:24 +00:00
|
|
|
|
2022-01-06 05:27:13 +00:00
|
|
|
</Fragment>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default GeneralLayout
|
