Filament•14mo 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•14mo 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'),
)

HugoOP•14mo ago

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

subhash reddy s•12mo 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•12mo 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•12mo 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•12mo ago

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

subhash reddy s•12mo ago

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

awcodes•12mo 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