[feat] add loading screen and bar
This commit is contained in:
Alvalen
parent
f0fcfe6124
commit
218ee462f0
15 changed files with 354 additions and 134 deletions
|
|
@ -3,8 +3,12 @@ import { useRef, useState, useEffect } from "react";
|
|||
import { motion } from "framer-motion";
|
||||
import Link from "next/link";
|
||||
|
||||
const NavItems = ({ isNavOpen }) => {
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
const NavItems = ({ isNavOpen, setIsNavOpen }) => {
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
|
||||
const handleItemClick = () => {
|
||||
setIsNavOpen(false);
|
||||
};
|
||||
const navVariant = {
|
||||
open: (height = 1000) => ({
|
||||
clipPath: `circle(${height + 400}px at calc(100% - 40px) 40px)`,
|
||||
|
|
@ -24,43 +28,43 @@ const [isMobile, setIsMobile] = useState(false);
|
|||
},
|
||||
},
|
||||
};
|
||||
useEffect(() => {
|
||||
const updateScreenWidth = () => {
|
||||
setIsMobile(window.innerWidth <= 768);
|
||||
};
|
||||
useEffect(() => {
|
||||
const updateScreenWidth = () => {
|
||||
setIsMobile(window.innerWidth <= 768);
|
||||
};
|
||||
|
||||
// Initial check and event listener
|
||||
updateScreenWidth();
|
||||
window.addEventListener("resize", updateScreenWidth);
|
||||
// Initial check and event listener
|
||||
updateScreenWidth();
|
||||
window.addEventListener("resize", updateScreenWidth);
|
||||
|
||||
// Clean up the event listener on unmount
|
||||
return () => {
|
||||
window.removeEventListener("resize", updateScreenWidth);
|
||||
};
|
||||
}, []);
|
||||
// Clean up the event listener on unmount
|
||||
return () => {
|
||||
window.removeEventListener("resize", updateScreenWidth);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Check screen width and adjust clipPath for smaller screens
|
||||
if (isMobile) {
|
||||
navVariant.closed = {
|
||||
clipPath: "circle(0px at calc(100% - 35px) 35px)", // Adjusted value for mobile screens
|
||||
transition: {
|
||||
delay: 0.5,
|
||||
type: "spring",
|
||||
stiffness: 400,
|
||||
damping: 40,
|
||||
},
|
||||
};
|
||||
} else {
|
||||
navVariant.closed = {
|
||||
clipPath: "circle(0px at calc(100% - 120px) 35px)",
|
||||
transition: {
|
||||
delay: 0.5,
|
||||
type: "spring",
|
||||
stiffness: 400,
|
||||
damping: 40,
|
||||
},
|
||||
};
|
||||
}
|
||||
// Check screen width and adjust clipPath for smaller screens
|
||||
if (isMobile) {
|
||||
navVariant.closed = {
|
||||
clipPath: "circle(0px at calc(100% - 35px) 35px)", // Adjusted value for mobile screens
|
||||
transition: {
|
||||
delay: 0.5,
|
||||
type: "spring",
|
||||
stiffness: 400,
|
||||
damping: 40,
|
||||
},
|
||||
};
|
||||
} else {
|
||||
navVariant.closed = {
|
||||
clipPath: "circle(0px at calc(100% - 120px) 35px)",
|
||||
transition: {
|
||||
delay: 0.5,
|
||||
type: "spring",
|
||||
stiffness: 400,
|
||||
damping: 40,
|
||||
},
|
||||
};
|
||||
}
|
||||
const itemVariants = {
|
||||
open: {
|
||||
opacity: 1,
|
||||
|
|
@ -74,9 +78,6 @@ if (isMobile) {
|
|||
},
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<motion.div
|
||||
|
|
@ -85,45 +86,77 @@ if (isMobile) {
|
|||
animate={isNavOpen ? "open" : "closed"}
|
||||
initial={false}>
|
||||
<div className="relative backdrop-blur-sm opacity-95 flex flex-col items-center space-x-8 min-h-[100vh] bg-gray-700 min-w-[100vw] ">
|
||||
<div className="flex flex-col items-center space-y-8 my-auto mx-0">
|
||||
{/* title */}
|
||||
<motion.h1
|
||||
animate={{ opacity: 1 }}
|
||||
initial={{ opacity: 0 }}
|
||||
transition={{ delay: 0.5, duration: 1 }}
|
||||
className="text-6xl font-bold text-white">
|
||||
Menu
|
||||
</motion.h1>
|
||||
<Link href="/">
|
||||
<div className="text-2xl font-bold text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"} delay={1}>
|
||||
<motion.h2 className="text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"}>
|
||||
Home
|
||||
</motion.h2>
|
||||
</div>
|
||||
</Link>
|
||||
<Link href="/about">
|
||||
<div className="text-2xl font-bold text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"} delay={1.2}>
|
||||
<motion.h2 className="text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"}>
|
||||
About
|
||||
</motion.h2>
|
||||
</div>
|
||||
</Link>
|
||||
<Link href="/projects">
|
||||
<div className="text-2xl font-bold text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"} delay={1.3}>
|
||||
<motion.h2 className="text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"}>
|
||||
Projects
|
||||
</motion.h2>
|
||||
</div>
|
||||
</Link>
|
||||
<Link href="/contact">
|
||||
<div className="text-2xl font-bold text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"} delay={1.4}>
|
||||
<motion.h2 className="text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"}>
|
||||
Contact
|
||||
</motion.h2>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-center space-y-8 my-auto mx-0">
|
||||
{/* title */}
|
||||
<motion.h1
|
||||
animate={{ opacity: 1 }}
|
||||
initial={{ opacity: 0 }}
|
||||
transition={{ delay: 0.5, duration: 1 }}
|
||||
className="text-6xl font-bold text-white">
|
||||
Menu
|
||||
</motion.h1>
|
||||
<a href="/#home">
|
||||
<div
|
||||
onClick={handleItemClick}
|
||||
className="text-2xl font-bold text-white"
|
||||
variants={itemVariants}
|
||||
animate={isNavOpen ? "open" : "closed"}
|
||||
delay={1}>
|
||||
<motion.h2
|
||||
className="text-white"
|
||||
variants={itemVariants}
|
||||
animate={isNavOpen ? "open" : "closed"}>
|
||||
Home
|
||||
</motion.h2>
|
||||
</div>
|
||||
</a>
|
||||
<Link href="/about">
|
||||
<div
|
||||
onClick={handleItemClick}
|
||||
className="text-2xl font-bold text-white"
|
||||
variants={itemVariants}
|
||||
animate={isNavOpen ? "open" : "closed"}
|
||||
delay={1.2}>
|
||||
<motion.h2
|
||||
className="text-white"
|
||||
variants={itemVariants}
|
||||
animate={isNavOpen ? "open" : "closed"}>
|
||||
About
|
||||
</motion.h2>
|
||||
</div>
|
||||
</Link>
|
||||
<Link href="/projects">
|
||||
<div
|
||||
onClick={handleItemClick}
|
||||
className="text-2xl font-bold text-white"
|
||||
variants={itemVariants}
|
||||
animate={isNavOpen ? "open" : "closed"}
|
||||
delay={1.3}>
|
||||
<motion.h2
|
||||
className="text-white"
|
||||
variants={itemVariants}
|
||||
animate={isNavOpen ? "open" : "closed"}>
|
||||
Projects
|
||||
</motion.h2>
|
||||
</div>
|
||||
</Link>
|
||||
<a href="/#contact">
|
||||
<div
|
||||
onClick={handleItemClick}
|
||||
className="text-2xl font-bold text-white"
|
||||
variants={itemVariants}
|
||||
animate={isNavOpen ? "open" : "closed"}
|
||||
delay={1.4}>
|
||||
<motion.h2
|
||||
className="text-white"
|
||||
variants={itemVariants}
|
||||
animate={isNavOpen ? "open" : "closed"}>
|
||||
Contact
|
||||
</motion.h2>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
);
|
||||
|
|
@ -141,11 +174,12 @@ const Navbar = () => {
|
|||
<>
|
||||
<nav
|
||||
ref={navRef}
|
||||
className={`navbar px-5 md:px-24 w-screen fixed transition-colors ease duration-500 ${isNavOpen ? "bg-transparent" : "bg-gray-50"} inset-0 backdrop-blur-md opacity-50 flex flex-row justify-between items-center h-16 z-50 `}>
|
||||
className={`navbar px-5 md:px-24 w-screen fixed transition-colors ease duration-500 ${
|
||||
isNavOpen ? "bg-transparent" : "bg-gray-50"
|
||||
} inset-0 backdrop-blur-md opacity-50 flex flex-row justify-between items-center h-16 z-50 `}>
|
||||
<div className="">
|
||||
<h1 className="text-2xl">Alvalens</h1>
|
||||
</div>
|
||||
{/* toggler */}
|
||||
<div className="flex flex-row items-center">
|
||||
<button
|
||||
className="burger button flex flex-col justify-center items-center space-y-1.5 "
|
||||
|
|
@ -170,7 +204,10 @@ const Navbar = () => {
|
|||
</div>
|
||||
</nav>
|
||||
{/* items */}
|
||||
<NavItems isNavOpen={isNavOpen} setIsNavOpen={setIsNavOpen} />
|
||||
<NavItems
|
||||
isNavOpen={isNavOpen}
|
||||
setIsNavOpen={setIsNavOpen}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue