How to show brand logo when sidebar is collapsed on desktop?
Is there an away to show the brand logo when the sidebar is collapsed?
14 Replies
I think some custom CSS may be the simplest way.
Not out of the box.
Can you guys direct me where I should change ? :3
How would a logo even fit there with the expand icon too?
My first thought was to put them side by side
We have two images for the logo. One for the expanded menu and a small one for the collapsed version
Even side by side, they aren’t going to fit. The collapse icon is the same width as the sidebar icons. Idk.
I think it was available in filamentphp v2.
It was but the layout changed and the space is missing now.
I had suggested the arrow icon should reside in the header on the right, which is clickable and the menu icon is the logo. It can be done now with some hacky CSS but it's not ideall
Do we have a quick workaround? 🫡
Not really.
I still looking around this when I have the free time and also trying to find an way to the transition between collasped and expanded going more smooth
Would an alternative solution be to move the brand logo out of the sidebar (the
aside element) and into the topbar div element (after the expand & collapse sidebar buttons in the nav sub-element)?Approach proposed here: https://github.com/filamentphp/filament/pull/13718
GitHub
Proposal: add
brandLogoInTopBar() method to Panel component by ...Description
Adding a brandLogoInTopBar() method to the Panel component is proposed, which has the effect of hiding the brand logo in the sidebar and instead showing it in the topbar (after the &quo...