OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Issue with Navigation Bar after Cloning and Moving Files in React(Next) Project

  • Thread starter Thread starter Artur Zuiev
  • Start date Start date
A

Artur Zuiev

Guest
I cloned the repository and moved the files with the following commands:

Code:
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:

enter image description here

  • after:

enter image description here

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:

Code:
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:

Code:
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?



<p>I cloned the repository and moved the files with the following commands:</p>
<pre><code>1. clone https://github.com/adrianhajdin/portfolio.git

2. cd portfolio

3. mv * ..
</code></pre>
<p>After running <code>npm run dev</code>, everything looks good, but when I click on the <code>About</code> button or similar buttons in the <code>navigation bar</code>, there is an issue.</p>
<p><strong>Problem Description</strong></p>
<p>When I click on the <code>About</code> button in the <code>navigation bar</code>, the page does not update correctly, and it seems like nothing happens, although the <code>URL changes</code>. Here are the before and after screenshots:</p>
<ul>
<li><strong>before:</strong></li>
</ul>
<p><a href="https://i.sstatic.net/XyTHn6cg.png" rel="nofollow noreferrer">enter image description here</a></p>
<ul>
<li><strong>after:</strong></li>
</ul>
<p><a href="https://i.sstatic.net/ticA53yf.png" rel="nofollow noreferrer">enter image description here</a></p>
<p>Note that the scrollbar does not move!</p>
<h4>Attempted Solutions</h4>
<p>I tried fixing it by running the following commands:</p>
<blockquote>
<p>npm audit fix --force</p>
<p>npm install --legacy-peer-deps</p>
</blockquote>
<h4>Code</h4>
<p>Here is the code for the <code>Home page</code> and the <code>Navbar</code> component:</p>
<p>Home.tsx:</p>
<pre><code>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>
);
};
</code></pre>
<p>FloatingNavbar.tsx:</p>
<pre><code>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>
);
};
</code></pre>
<hr />
<p><strong>Question:</strong></p>
<p>How can I fix the navigation issue so that the page updates correctly when clicking the navigation buttons?</p>
<hr />
 

Latest posts

Top