updates
This commit is contained in:
Tben
@@ -33,6 +33,12 @@ const GeneralFooter = () => {
|
||||
>
|
||||
LinkedIn
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/BenjaminToby"
|
||||
target="_blank"
|
||||
>
|
||||
Github
|
||||
</a>
|
||||
<a href="mailto:benoti.san@gmail.com">Mail</a>
|
||||
<a href="tel:+2348123682346">Phone</a>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Image from "next/image";
|
||||
|
||||
import { gsap } from "gsap";
|
||||
import HeaderNav from "./HeaderNav";
|
||||
|
||||
/**
|
||||
* General Header for all pages
|
||||
@@ -10,6 +12,8 @@ import { gsap } from "gsap";
|
||||
const GeneralHeader = (): React.ReactElement => {
|
||||
const links: { title: string; url: string }[] = require("./links.json");
|
||||
|
||||
const [mobileNavOpen, setMobileNavOpen] = React.useState<boolean>(false);
|
||||
|
||||
/**
|
||||
* Animate the header on mount
|
||||
*/
|
||||
@@ -33,10 +37,26 @@ const GeneralHeader = (): React.ReactElement => {
|
||||
);
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (mobileNavOpen) {
|
||||
gsap.to("#mobile-nave-drawer", {
|
||||
opacity: 1,
|
||||
pointerEvents: "all",
|
||||
duration: 0.5,
|
||||
});
|
||||
} else {
|
||||
gsap.to("#mobile-nave-drawer", {
|
||||
opacity: 0,
|
||||
pointerEvents: "none",
|
||||
duration: 0.5,
|
||||
});
|
||||
}
|
||||
}, [mobileNavOpen]);
|
||||
|
||||
return (
|
||||
<header
|
||||
id="main-header"
|
||||
className="flex items-start justify-between gap-10 w-full py-4 md:py-10 relative z-10"
|
||||
className="flex items-start justify-between gap-10 w-full py-4 md:py-10 z-10 fixed xl:sticky top-0"
|
||||
>
|
||||
<a
|
||||
href="/"
|
||||
@@ -51,21 +71,29 @@ const GeneralHeader = (): React.ReactElement => {
|
||||
/>
|
||||
</a>
|
||||
|
||||
<nav>
|
||||
{links.map((link: { title: string; url: string; download?: boolean }, index) => {
|
||||
return (
|
||||
<a
|
||||
key={index}
|
||||
href={link.url}
|
||||
data-href={link.url}
|
||||
className="text-lg"
|
||||
download={link.download}
|
||||
>
|
||||
{link.title}
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
<HeaderNav />
|
||||
|
||||
<button
|
||||
className="p-2 w-14 h-14 rounded-full flex flex-col items-center justify-center gap-2 hover:bg-[white]/90 xl:hidden fixed right-10 z-10 -rotate-45"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setMobileNavOpen(!mobileNavOpen);
|
||||
}}
|
||||
>
|
||||
<div className="w-8 h-1 rounded-full bg-[black]"></div>
|
||||
<div className="w-8 h-1 rounded-full bg-[black]"></div>
|
||||
</button>
|
||||
|
||||
<div
|
||||
id="mobile-nave-drawer"
|
||||
className="flex xl:hidden flex-col fixed top-0 right-0 w-screen max-w-[400px] h-screen overflow-auto bg-[black] p-8"
|
||||
style={{
|
||||
opacity: 0,
|
||||
pointerEvents: "none",
|
||||
}}
|
||||
>
|
||||
<HeaderNav mobile={true} />
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -6,7 +6,7 @@ import GeneralFooter from "./GeneralFooter";
|
||||
import { gsap } from "gsap";
|
||||
import BG from "./BG";
|
||||
|
||||
export const SiteContext = React.createContext({});
|
||||
export const SiteContext: any = React.createContext({});
|
||||
|
||||
type GeneralLayoutProps = {
|
||||
children: React.ReactNode;
|
||||
@@ -46,9 +46,9 @@ const GeneralLayout = ({ children }: GeneralLayoutProps): ReactElement => {
|
||||
<GeneralHeader />
|
||||
<main
|
||||
className="flex items-center flex-col w-full"
|
||||
style={{
|
||||
perspective: "800px",
|
||||
}}
|
||||
// style={{
|
||||
// perspective: "800px",
|
||||
// }}
|
||||
>
|
||||
{children}
|
||||
</main>
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { gsap } from "gsap";
|
||||
|
||||
/**
|
||||
* General Header for all pages
|
||||
*/
|
||||
const HeaderNav = ({ mobile }: { mobile?: boolean }): React.ReactElement => {
|
||||
const links: { title: string; url: string }[] = require("./links.json");
|
||||
|
||||
return (
|
||||
<nav className={"items-start xl:items-center gap-x-6 gap-y-2 xl:flex-row" + (mobile ? " flex-col" : " hidden xl:flex")}>
|
||||
{links.map((link: { title: string; url: string; download?: boolean }, index) => {
|
||||
return (
|
||||
<a
|
||||
key={index}
|
||||
href={link.url}
|
||||
data-href={link.url}
|
||||
className="text-lg"
|
||||
download={link.download}
|
||||
>
|
||||
{link.title}
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
|
||||
<span className="opacity-20">|</span>
|
||||
|
||||
<div className="flex items-start xl:items-center gap-4 flex-col xl:flex-row">
|
||||
<a
|
||||
href="https://github.com/BenjaminToby"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
src="/images/github-white.png"
|
||||
alt="Benjamin Toby Github"
|
||||
width={20}
|
||||
height={20}
|
||||
className="flex items-center"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.linkedin.com/in/benjamin-toby/"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
src="/images/linkedin-white.png"
|
||||
alt="Benjamin Toby Github"
|
||||
width={20}
|
||||
height={20}
|
||||
className="flex items-center"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderNav;
|
||||
Reference in New Issue
Block a user