v4.1 - sidebar breakpoint
How one can set the breakpoint for sidebar collapsing in v4.1?
The sidebar is collapsing at 1024px. At 1025px it takes up way to much space. I am aware that there is an option to set the width of the sidebar, but in order for better UX I'd love to set the collapse breakpoint of a sidebar to at least 1280px.
Can this be done in v4.1?
Thank you in advance.
Kind regards
iGigi
3 Replies
Hi again,
i found this referance
const breakpoint = 1024
in following file ../vendor/filament/filament/resources/js/stores/sidebar.js
It seem like it is hardcoded.
Is there a way to change this value? Changing it in this vendor file doesn't seem to have any effect š
Thanks in advance and best regards
iGigiVery interested in this too.
I think yes it is all hardcoded
You need to publish the views and also make a custom theme.
There are breakpoints in both topbar.css and sidebar.css for the sidebar with rules such as
@apply lg:hidden as it is set to tailwind's default lg breakpoint value, lg
A quick change in topbar.css and sidebar.css, and then also need to change the header.css for the logo.
Pretty much can find and replace any instance of lg: to replace with the new breakpoint, e.g., xl, but there is alpine.js in the blade views which are triggering on lg
You would need to also need to modify: /packages/panels/resources/views/components/sidebar/item.blade.php
and
/packages/panels/resources/views/components/layout/index.blade.php
These views use the tailwind lg again for toggling sidebar visibilty, and also for the side bar open/close toggle in item.blade.php it uses matchMedia (1024px) for the button to work
I would also consider using a fluid width value for the sidebar width so you could actually get more of your realeastate before it collapses..
e.g in your panel configuration
->sidebarWidth('clamp(15rem, 24vw, 30rem)')Thanks for the insights!
For me, that's too large of a hack to change this individually in my project for the moment. The tip about using a fluid width is greatāthanks!
You seem to be very knowledgeable about Filament's internals. Would it be possible for you to comment on this 'ideas' topic on GitHub, and perhaps even create a pull request?
https://github.com/filamentphp/filament/discussions/18146
Kind regards
igigi
GitHub
[UX Improvement] Configurable collapse breakpoint of the sidebar Ā·...
The sidebar is currently collapsing at 1024px. At 1025px, it takes up quite a large chunk of available space. In order for better UX, could the collapse breakpoint of the sidebar be configurable, e...