I cloned the repository and transferred the files using these commands:
1. git clone https://github.com/adrianhajdin/portfolio.git
2. cd portfolio
3. mv * ..
Upon executing npm run dev, everything appears fine, but upon clicking on the About button or similar buttons in the navigation bar, an issue arises.
Issue Description
Clicking on the About button in the navigation bar does not update the page correctly; it seems like nothing happens despite the URL changing. Check out the before and after screenshots below:
- before:
- after:
Note that the scrollbar remains stationary!
Tried Solutions
To address this, I attempted the following commands:
npm audit fix --force
npm install --legacy-peer-deps
Code Snippets
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();
// initial state set to true so that the nav bar is visible in the hero section
const [visible, setVisible] = useState(true);
useMotionValueEvent(scrollYProgress, "change", (current) => {
// Ensure current is a number
if (typeof current === "number") {
let direction = current! - scrollYProgress.getPrevious()!;
if (scrollYProgress.get() < 0.05) {
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(
"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>
<span className=" text-sm !cursor-pointer">{navItem.name}</span>
</Link>
))}
</motion.div>
</AnimatePresence>
);
};
Question:
How can I troubleshoot the navigation problem to ensure that the page updates correctly when clicking on the navigation buttons?