Add stickyScrollSidebar() to make the sidebar co-scroll with the page - #20245
Open
the14thsky wants to merge 1 commit into
Open
Add stickyScrollSidebar() to make the sidebar co-scroll with the page#20245the14thsky wants to merge 1 commit into
the14thsky wants to merge 1 commit into
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
By default the desktop sidebar has a fixed height and its navigation scrolls independently inside it (a nested scrollbar). For panels with long navigation this results in two separate scroll contexts on one screen, and lower nav groups sit behind a subtle inner scrollbar.
This PR adds an opt-in panel option,
stickyScrollSidebar(), that makes the desktop sidebar scroll together with the page instead. When the menu is taller than the viewport, the sidebar's bottom pins to the bottom of the viewport, so scrolling the page reveals the rest of the menu — no nested scrollbar.It is off by default, so existing behavior is unchanged.
Behavior when enabled:
lg+): the sidebar grows to its content height (no inner scroll) and isposition: sticky.The topbar offset is measured at runtime (from
.fi-topbar-ctn) and published as the--fi-sidebar-sticky-scroll-offsetcustom property, so the sidebar adapts to any header height — a taller brand logo, a notification bar, a wrapped header — rather than assuming a fixed height.Implementation: a
stickyScrollSidebar()setter +hasStickyScrollSidebar()getter on theHasSidebarconcern (delegated throughFilamentManagerand theFilamentfacade); the sidebar Blade adds afi-sidebar-sticky-scrollclass; CSS makes the desktop sidebar tall/sticky with a page-scrolling nav; andsticky-scroll-sidebar.jsmeasures the topbar and sets the stickytop(pinning the bottom when the sidebar is taller than the viewport). There is no per-scroll JS — CSSposition: stickyhandles the scrolling; the script only runs onresize, aResizeObserver(sidebar + topbar), andlivewire:navigated, and is inert for panels that don't enable the option.Visual changes
sticky-scroll-sidebar-demo.mov
Before (default — nav scrolls inside a fixed-height sidebar):
After (
stickyScrollSidebar()— sidebar co-scrolls with the page; bottom groups revealed on scroll):Functional changes
composer cscommand.