Inertia preserve scroll and scroll-region not working properly

Question

So i have simple page with sidebar and main content area. I'm not sure what i'm doing wrong but for some reason inner content of sidebar is not preserving its own state and scroll position. Scroll position on a full page is preserved but scroll position on sidebar is always resetting to 0 whenever i click any inertia Link.

I followed official documentation from inertia but Its not working for me... What I'm doing wrong?

<script setup>
import { ref } from 'vue';
import { Link } from '@inertiajs/vue3';

const links = ref([
  { name: 'Home', url: '/home' },
  { name: 'Dashboard', url: '/dashboard' },
  { name: 'Profile', url: '/profile' },
  { name: 'Settings', url: '/settings' },
  { name: 'Reports', url: '/reports' },
  { name: 'Invoices', url: '/invoices' },
  { name: 'Products', url: '/products' },
]);

defineProps({
  title: String,
});
</script>

<template>
  <div class="bg-gray-100 h-[2500px] flex">
    <!-- Sidebar with scroll-region -->
    <div class="w-64 bg-gray-800 text-white p-4 space-y-2 overflow-y-scroll h-screen" scroll-region>
      <h2 class="text-lg font-bold mb-4">Navigation</h2>
      <nav>
        <ul class="space-y-20">
          <li v-for="(link, index) in links" :key="index">
            <Link
              :href="link.url"
              class="block px-4 py-2 rounded hover:bg-gray-700"
              preserve-scroll
              preserve-state
            >
              {{ link.name }}
            </Link>
          </li>
        </ul>
      </nav>
    </div>

    <!-- Main Content -->
    <main class="flex flex-col p-4 flex-1 h-full">
      <slot />
    </main>
  </div>
</template>

Answer 1

Solution is to use Inertia persistent layouts. Working like a charm

inertiajs.com/pages, inertiajs.com/pages#persistent-layouts