Filament•10mo 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

AlexAnder•9mo ago

Maybe someone can help?

toeknee•9mo ago

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

AlexAnder•9mo ago

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

Vp•9mo 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•9mo 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.

AlexAnder•8mo ago

Thanks

Pooja chakrawarti•7mo ago

Have any another solution for v3?

DrByte•7mo 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•7mo ago

for me its not working

Gaming

Programming

Auto scrolling for navigation selected menu