How to retain sidebar scroll position if there are many menu items.
I have navigation that has many items, it has scrollbar in nav. But if I click the bottom items, the position of the scroll goes back to the top. I have ->spa() enabled also.
1 Reply
Add this inside AppserviceProvider class at boot() method
FilamentView::registerRenderHook(
'panels::body.end',
fn (): View => view('additional-scripts'),
);
And inside resources/views/additional-scripts.blade.php file, add this
<script>
const sidebarNav = document.querySelector('.fi-sidebar-nav');
const SCROLL_POSITION_KEY = 'SIDEBAR_SCROLL_TOP';
window.addEventListener('DOMContentLoaded', () => {
sidebarNav.scrollBy(0, Number(window.localStorage.getItem(SCROLL_POSITION_KEY) || 0))
Array.from(document.querySelectorAll('.fi-sidebar-item-button')).forEach(sidebarItem => {
sidebarItem.addEventListener('click', e => {
const scrollTop = sidebarNav.scrollTop;
window.localStorage.setItem(SCROLL_POSITION_KEY, scrollTop);
});
});
});
</script>