Filament•9mo ago

navigation bar fixed on the active navigation item

When the navigation items become too many, when I select a navigation item that is on the bottom of the navbar and I have to scroll for it, the page refreshes and the navbar goes back to the top. Is there a way to mantain the navbar position where the selected navbar item is?

8 Replies

Lara Zeus•9mo ago

I use this code to do that

<script>
    var scrollToSection = function (event) {
        setTimeout(() => {
            const activeSidebarItem = document.querySelector('.fi-sidebar-item-active');
            const sidebarWrapper = document.querySelector('.fi-sidebar-nav')

            if (
                typeof(sidebarWrapper) != 'undefined' && sidebarWrapper != null
                && typeof(activeSidebarItem) != 'undefined' && activeSidebarItem != null
            )
            {
                sidebarWrapper.style.scrollBehavior = 'smooth';
                sidebarWrapper.scrollTo(0, activeSidebarItem.offsetTop - 250)
            }

        }, 1)
    };

    document.addEventListener('livewire:navigated', scrollToSection);
    document.addEventListener('DOMContentLoaded', scrollToSection);
</script>

<script>
    var scrollToSection = function (event) {
        setTimeout(() => {
            const activeSidebarItem = document.querySelector('.fi-sidebar-item-active');
            const sidebarWrapper = document.querySelector('.fi-sidebar-nav')

            if (
                typeof(sidebarWrapper) != 'undefined' && sidebarWrapper != null
                && typeof(activeSidebarItem) != 'undefined' && activeSidebarItem != null
            )
            {
                sidebarWrapper.style.scrollBehavior = 'smooth';
                sidebarWrapper.scrollTo(0, activeSidebarItem.offsetTop - 250)
            }

        }, 1)
    };

    document.addEventListener('livewire:navigated', scrollToSection);
    document.addEventListener('DOMContentLoaded', scrollToSection);
</script>

and you can add render hook in the panel provider

->renderHook(
    'panels::footer',
    fn (): View => view('filament.hooks.footer'),
)

->renderHook(
    'panels::footer',
    fn (): View => view('filament.hooks.footer'),
)

Hugo•9mo ago

works wonders, thank you for the suggestion! I thought filament had something for that kind of behavior.

subhash reddy s•7mo ago

will this work for v3 i am bit confused of the file structure like where to create this filament.hooks.footer.php.

Lara Zeus•7mo ago

yes it's working for v3 too notice the function view so it's a blade file, filament.hooks.footer.blade.php create it in views/filament/hooks/footer.blade.php you can also check the docs on the render hook

subhash reddy s•7mo ago

this is my code for navigation and i am getting null for const activeSidebarItem = document.querySelector('.fi-sidebar-item-active'); am i missing something.

DrByte•7mo ago

Does it only happen when you have the nav-bar collapsed?

subhash reddy s•7mo ago

no even if there is no nav-bar collapsed i am facing same problem.

awcodes•7mo ago

If you are completely overriding the entire navigation as it appears to be the case in your code, you aren’t assigning an active state to any of the navigation items. ->isActiveWhen() https://filamentphp.com/docs/3.x/panels/navigation#registering-custom-navigation-items-1

Navigation - Panel Builder - Filament

Gaming

Programming

navigation bar fixed on the active navigation item