I cloned the repository and moved the files with the following commands:
1. clone https://github.com/adrianhajdin/portfolio.git
2. cd portfolio
3. mv * ..
After running npm run dev
, everything looks good, but when I click on the About
button or similar buttons in the navigation bar
, there is an issue.
Problem Description
When I click on the About
button in the navigation bar
, the page does not update correctly, and it seems like nothing happens, although the URL changes
. Here are the before and after screenshots:
- before:
- after:
Note that the scrollbar does not move!
Attempted Solutions
I tried fixing it by running the following commands:
npm audit fix –force
npm install –legacy-peer-deps
Code
Here is the code for the Home page
and the Navbar
component:
Home.tsx:
const Home = () => {
return (
<main className="relative bg-black-100 flex justify-center items-center flex-col overflow-hidden mx-auto sm:px-10 px-5">
<div className="max-w-7xl w-full">
<FloatingNav navItems={navItems} />
<Hero />
<Grid />
<RecentProjects />
<Clients />
<Experience />
<Approach />
<Footer />
</div>
</main>
);
};
FloatingNavbar.tsx:
import React, { useState } from "react";
import {
motion,
AnimatePresence,
useScroll,
useMotionValueEvent,
} from "framer-motion";
import Link from "next/link";
import { cn } from "@/lib/utils";
export const FloatingNav = ({
navItems,
className,
}: {
navItems: {
name: string;
link: string;
icon?: JSX.Element;
}[];
className?: string;
}) => {
const { scrollYProgress } = useScroll();
// set true for the initial state so that nav bar is visible in the hero section
const [visible, setVisible] = useState(true);
useMotionValueEvent(scrollYProgress, "change", (current) => {
// Check if current is not undefined and is a number
if (typeof current === "number") {
let direction = current! - scrollYProgress.getPrevious()!;
if (scrollYProgress.get() < 0.05) {
// also set true for the initial state
setVisible(true);
} else {
if (direction < 0) {
setVisible(true);
} else {
setVisible(false);
}
}
}
});
return (
<AnimatePresence mode="wait">
<motion.div
initial={{
opacity: 1,
y: -100,
}}
animate={{
y: visible ? 0 : -100,
opacity: visible ? 1 : 0,
}}
transition={{
duration: 0.2,
}}
className={cn(
// change rounded-full to rounded-lg
// remove dark:border-white/[0.2] dark:bg-black bg-white border-transparent
// change pr-2 pl-8 py-2 to px-10 py-5
"flex max-w-fit md:min-w-[70vw] lg:min-w-fit fixed z-[5000] top-10 inset-x-0 mx-auto px-10 py-5 rounded-lg border border-black/.1 shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)] items-center justify-center space-x-4",
className
)}
style={{
backdropFilter: "blur(16px) saturate(180%)",
backgroundColor: "rgba(17, 25, 40, 0.75)",
borderRadius: "12px",
border: "1px solid rgba(255, 255, 255, 0.125)",
}}
>
{navItems.map((navItem: any, idx: number) => (
<Link
key={`link=${idx}`}
href={navItem.link}
className={cn(
"relative dark:text-neutral-50 items-center flex space-x-1 text-neutral-600 dark:hover:text-neutral-300 hover:text-neutral-500"
)}
>
<span className="block sm:hidden">{navItem.icon}</span>
{/* add !cursor-pointer */}
{/* remove hidden sm:block for the mobile responsive */}
<span className=" text-sm !cursor-pointer">{navItem.name}</span>
</Link>
))}
{/* remove this login btn */}
{/* <button className="border text-sm font-medium relative border-neutral-200 dark:border-white/[0.2] text-black dark:text-white px-4 py-2 rounded-full">
<span>Login</span>
<span className="absolute inset-x-0 w-1/2 mx-auto -bottom-px bg-gradient-to-r from-transparent via-blue-500 to-transparent h-px" />
</button> */}
</motion.div>
</AnimatePresence>
);
};
Question:
How can I fix the navigation issue so that the page updates correctly when clicking the navigation buttons?