you need to set text as hidden when sidebar is closed

I thought that too but why is this not necessary for the other menu items (home, inbox, etc)

i assumed it was built-in to the sidebar component and does it automatically

Can you send your code?

Try setting the element as span, the text, it might just be hiding span

Tried that already

let me try again

no luck

i even tried removing the encapsulating div and just wrote a single span element

If you're using shadcn, you should just checkout the example here: https://ui.shadcn.com/docs/components/sidebar

I have

I even checked the blocks page

They have an example of collapsible icons

and i looked at the code

i aint got the slightest clue how it works for them but not for me

I guess I had no choice but to use the state variable form the useSidebar hook to hide the text when collapsed

for others that may have the same issue:

iirc im pretty sure shadcn hides the text simply by resizing the sidebar and set overflow-hidden on the sidebar items, so the text just gets hidden. as you see here the button is wider than the collapsed sidebar, but because of overflow-hidden, the text that overflows is hidden.

in your case the text wraps instead, you can slap whitespace-nowrap on the button and calculate the spacing very carefully to make the effect described above works

shadcn sidebar relies on so many undocumented relationships between the elements that i spent a whole day malding over the sidebar code to fully reskin it to my intended design. this is the message that came out of that day

im glad its not just me struggling with this lmao