Tricks

Auto scrolling for navigation selected menu

May 17, 2023
Shipu Ahamed
Admin panel

In a service provider's boot() method:

Filament::registerRenderHook(
name: 'scripts.start',
callback: fn () => new HtmlString(html: "
<script>
document.addEventListener('DOMContentLoaded', function(){
setTimeout(() => {
const activeSidebarItem = document.querySelector('.filament-sidebar-item-active');
const sidebarWrapper = document.querySelector('.filament-sidebar-nav')
 
sidebarWrapper.style.scrollBehavior = 'smooth';
 
sidebarWrapper.scrollTo(0, activeSidebarItem.offsetTop - 250)
}, 300)
});
</script>
"));

2nd Way

Filament::registerRenderHook(
name: 'scripts.start',
callback: fn () => new HtmlString(html: "
<script>
document.addEventListener('DOMContentLoaded', function(){
let sidebar_item = document.querySelector('.filament-sidebar-item-active');
if( sidebar_item ) {
sidebar_item.scrollIntoView({ behavior: \"auto\", block: \"center\", inline: \"center\" });
}
});
</script>
"));

No comments yet…