Filament•17mo ago

Auto scrolling for navigation selected menu

On v2, there was renderHook for Auto scrolling for navigation selected menu. If there is the same for v3

9 Replies

AlexAnderOP•15mo ago

Maybe someone can help?

toeknee•15mo ago

How do you mean? To go to the same position on the navigation?

AlexAnderOP•15mo ago

jap If admin have lot off manu items, then on menu in far down, active menu show in active menu level please 🙂

Vp•15mo ago

V2 scroll trick still works but needs to change a little bit. put below code in provider boot():

Filament::registerRenderHook(
    'panels::scripts.before',
    fn () => new HtmlString(html: "
        <script>
            document.addEventListener('DOMContentLoaded', function(){
                setTimeout(() => {
                    const activeSidebarItem = document.querySelector('.fi-sidebar-item-active');
                    const sidebarWrapper = document.querySelector('.fi-sidebar-nav');

                    sidebarWrapper.style.scrollBehavior = 'smooth';

                    sidebarWrapper.scrollTo(0, activeSidebarItem.offsetTop - 250);
                }, 300)
            });
        </script>
"));

Filament::registerRenderHook(
    'panels::scripts.before',
    fn () => new HtmlString(html: "
        <script>
            document.addEventListener('DOMContentLoaded', function(){
                setTimeout(() => {
                    const activeSidebarItem = document.querySelector('.fi-sidebar-item-active');
                    const sidebarWrapper = document.querySelector('.fi-sidebar-nav');

                    sidebarWrapper.style.scrollBehavior = 'smooth';

                    sidebarWrapper.scrollTo(0, activeSidebarItem.offsetTop - 250);
                }, 300)
            });
        </script>
"));

Vp•15mo ago

Ref: https://v2.filamentphp.com/tricks/auto-scrolling-for-navigation-selected-menu

Filament

Auto scrolling for navigation selected menu by Shipu Ahamed - Trick...

Filament is a collection of tools for rapidly building beautiful TALL stack apps, designed for humans.

AlexAnderOP•15mo ago

Thanks

Pooja chakrawarti•14mo ago

Have any another solution for v3?

DrByte•14mo ago

I just tested the code posted by Vp above, putting it in AppServiceProvider boot(), and it works well in my Filament v3 app. Currently using v3.1.29

Pooja chakrawarti•14mo ago

for me its not working

Gaming

Programming

Auto scrolling for navigation selected menu

Did you find this page helpful?