v.korobtsev/vkorobtsev-nextJs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: ref usage in useIntersectionObserver and update Navbar

Browse source
This commit is contained in:
Alvalens 2025-03-18 12:08:42 +07:00
parent bec725da38
commit 21d5b440d4
2 changed files with 14 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

10
app/about/components/quote/useIntersectionObserver.js
View file

@ -17,13 +17,15 @@ export function useIntersectionObserver() {
} }
); );
if (ref.current) { const currentRef = ref.current; // Store the ref value in a variable
observer.observe(ref.current);
if (currentRef) {
observer.observe(currentRef);
} }
return () => { return () => {
if (ref.current) { if (currentRef) {
observer.unobserve(ref.current); observer.unobserve(currentRef);
} }
}; };
}, []); }, []);

20
components/Navbar.jsx
View file

@ -99,7 +99,7 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
type: "spring", type: "spring",
stiffness: 400, stiffness: 400,
damping: 40, damping: 40,
}, },
}, },
}; };
@ -111,7 +111,7 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
animate={isNavOpen ? "open" : "closed"} animate={isNavOpen ? "open" : "closed"}
initial={false}> 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="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"> <div className="flex flex-col items-center space-y-8 my-auto mx-0 z-50">
{/* title */} {/* title */}
<motion.h1 <motion.h1
variants={itemVariants} variants={itemVariants}
@ -119,7 +119,7 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
className="text-6xl font-bold text-white "> className="text-6xl font-bold text-white ">
Menu Menu
</motion.h1> </motion.h1>
<a href="/#home"> <Link href="/#home">
<div <div
className="text-2xl font-bold text-white" className="text-2xl font-bold text-white"
onClick={handleItemClick}> onClick={handleItemClick}>
@ -131,7 +131,7 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
Home Home
</motion.h2> </motion.h2>
</div> </div>
</a> </Link>
<Link href="/about"> <Link href="/about">
<div <div
onClick={handleItemClick} onClick={handleItemClick}
@ -158,7 +158,7 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
</motion.h2> </motion.h2>
</div> </div>
</Link> </Link>
<a href="/#contact"> <Link href="/#contact">
<div <div
onClick={handleItemClick} onClick={handleItemClick}
className="text-2xl font-bold text-white"> className="text-2xl font-bold text-white">
@ -170,7 +170,7 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
Contact Contact
</motion.h2> </motion.h2>
</div> </div>
</a> </Link>
</div> </div>
</div> </div>
</motion.div> </motion.div>
@ -209,15 +209,11 @@ const Navbar = () => {
onClick={toggleNav}> onClick={toggleNav}>
<div <div
className={`w-10 h-1 bg-black rounded-full transition-all ease duration-300 ${ className={`w-10 h-1 bg-black rounded-full transition-all ease duration-300 ${
isNavOpen isNavOpen ? "rotate-45 bg-white translate-y-[2px]" : ""
? "rotate-45 bg-white translate-y-[2px]"
: ""
}`}></div> }`}></div>
<div <div
className={`w-10 h-1 bg-black rounded-full transition-all ease duration-300 ${ className={`w-10 h-1 bg-black rounded-full transition-all ease duration-300 ${
isNavOpen isNavOpen ? "-rotate-45 -translate-y-2 bg-white" : ""
? "-rotate-45 -translate-y-2 bg-white"
: ""
}`}></div> }`}></div>
</button> </button>
</div> </div>