Filament•15mo 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•13mo ago

Maybe someone can help?

toeknee•13mo ago

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

AlexAnderOP•13mo ago

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

Vp•13mo 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•13mo 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•13mo ago

Thanks

Pooja chakrawarti•12mo ago

Have any another solution for v3?

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

for me its not working

Gaming

Programming

Auto scrolling for navigation selected menu