next.js - Sidebar client side rendering when rerouting - Stack Overflow

Hi I have a sidebar which I want the content on the right to be reload instead of entire page when changing the path and can't seem to find any answers out there.

This is my layout

        <MantineProvider defaultColorScheme="dark" theme={theme}>
      <AppShell navbar={{ width: 250, breakpoint: 0 }} padding={{ base: 10, sm: 15, lg: 'xl' }}>
        <HomeNavbar></HomeNavbar>
        {children}
      </AppShell>
    </MantineProvider>

This is my HomeNavBar

  <AppShell.Navbar>
  <nav className={classes.navbar}>
    <div className={classes.wrapper}>
      <div className={classes.aside}>
        <div className={classes.logo}>
          <Image src={'/logo.jpeg'} alt="Ben" width="40" height="40" />
        </div>
        {mainLinks}
      </div>
      <div className={classes.main}>
        <Title order={4} className={classes.title}>
          {/* {active} */}
        </Title>

        {data.map((link) => (
          <a
            className={classes.link}
            data-active={activeLink === link.label || undefined}
            // href={link.link}
            key={link.label}
            onClick={(event) => {
              event.preventDefault();
              router.push(link.link);
            }}
          >
            {link.label}
           
          </a>
        ))}
      </div>
    </div>
    <div className={classes.footer}>
      <ColorSchemeToggle></ColorSchemeToggle>
    </div>
  </nav>
</AppShell.Navbar>

When changing path with router.push, the entire page get reload. How do I partially loading only the content aka {children}