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';
|
|
|
|
|
|
2022-06-04 07:26:53 +00:00
|
|
|
export const SiteContext = React.createContext();
|
|
|
|
|
|
2022-06-03 16:36:24 +00:00
|
|
|
const GeneralLayout = ({ children, pageName }) => {
|
2022-06-04 07:26:53 +00:00
|
|
|
const [readyState, setReadyState] = React.useState(false);
|
2022-06-03 16:36:24 +00:00
|
|
|
|
2022-06-04 07:26:53 +00:00
|
|
|
// React.useEffect(() => {
|
|
|
|
|
// setReadyState(true);
|
|
|
|
|
// }, [readyState]);
|
2022-06-03 16:36:24 +00:00
|
|
|
|
|
|
|
|
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}.*?`);
|
2022-06-04 07:26:53 +00:00
|
|
|
if (link.dataset.href === window.location.pathname) {
|
2022-06-03 19:54:06 +00:00
|
|
|
link.classList.add("active-page");
|
|
|
|
|
}
|
2022-06-10 08:59:51 +00:00
|
|
|
|
|
|
|
|
if (window.location.pathname.match(new RegExp(`${link.dataset.href}\\/.*`))) {
|
|
|
|
|
link.classList.add("active-page");
|
|
|
|
|
}
|
2022-06-03 19:54:06 +00:00
|
|
|
});
|
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,
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 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
|
|
|
|
2022-06-04 07:26:53 +00:00
|
|
|
|
|
|
|
|
|
2022-01-06 05:27:13 +00:00
|
|
|
return (
|
2022-06-04 07:26:53 +00:00
|
|
|
<SiteContext.Provider value={ { readyState, setReadyState } }>
|
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='main-content-wrapper' style={ { opacity: 0 } }>
|
|
|
|
|
<GeneralHeader />
|
|
|
|
|
<main>
|
|
|
|
|
{ children }
|
|
|
|
|
</main>
|
|
|
|
|
<GeneralFooter />
|
2022-06-10 07:49:12 +00:00
|
|
|
<div className='fixed top-0 left-0 -z-10' id='homepage-animation-wrapper'></div>
|
2022-06-03 19:54:06 +00:00
|
|
|
</div>
|
2022-06-03 16:36:24 +00:00
|
|
|
|
2022-06-04 07:26:53 +00:00
|
|
|
</SiteContext.Provider>
|
2022-01-06 05:27:13 +00:00
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default GeneralLayout
|
