I have been looking for the solution here on stackoverflow, but couldn't find any correct way to solve the issue.

My issue: I have side navigation bar on the left, when i scroll down and select certain page the navigation bar jumps to the top of the navigation bar. I want navigation bar to remain on the same position when I clicked. Pls advise.

HERE IS THE CODE:

  const LayoutWithSidebar = ({ toggleSideBar, setToggleSidebar, btn }) => {
  const { t } = useTranslation();
  const handleEnterMouse = () => {
    setToggleSidebar(true);
  };
  return (
    <aside
      className={`left-sidebar-style ${
        toggleSideBar ? 'open-left-sidebar' : 'left-sidebar'
      }`}
      onMouseEnter={handleEnterMouse}
      data-sidebarbg="skin5">
      <div className="scroll-sidebar">
        <UserProfile btn={btn} toggleSideBar={toggleSideBar} translation={t} />
        <SidebarLinks btn={btn} toggleSideBar={toggleSideBar} translation={t} />
      </div>
      {(toggleSideBar || btn) && <SidebarFooter />}
      <style jsx toggleSideBar={toggleSideBar}>
        {Styles}
      </style>
    </aside>
  );
};

export default LayoutWithSidebar;

SideBarLinks.js file

const SidebarLinks = (props) => {
  return (
    <nav className="sidebar-nav fixed">
      <ul id="sidebarnav" className="in">
        {navItems.map((navItem) => (
          <SidebarItem key={navItem.transKey} {...navItem} {...props} />
        ))}
      </ul>
    </nav>
  );
};

export default SidebarLinks;

Thank you.