Sidebar: Undefined behavior for items with no icon when collapsed

[tulup-conner]

Describe the bug When I create a Sidebar with items that do not have an icon, and then collapse the Sidebar, nothing shows up.

To Reproduce Steps to reproduce the behavior:

1. Create a collapsed Sidebar:

<Sidebar collapsed>
  <Sidebar.Items>
    <Sidebar.ItemGroup>
      <Sidebar.Item href="#">Dashboard</Sidebar.Item>
      <Sidebar.Item href="#" label="Pro" labelColor="gray">
        Kanban
      </Sidebar.Item>
      <Sidebar.Item href="#" label="3">
        Inbox
      </Sidebar.Item>
      <Sidebar.Item href="#">Users</Sidebar.Item>
      <Sidebar.Item href="#">Products</Sidebar.Item>
      <Sidebar.Item href="#">Sign In</Sidebar.Item>
      <Sidebar.Item href="#">Sign Up</Sidebar.Item>
    </Sidebar.ItemGroup>
  </Sidebar.Items>
</Sidebar>

Expected behavior I can't find the expected behavior on flowbite.com, so I guess there isn't one yet?

A few options...

• Abbreviate label to the first letter
• Add a default icon
• When collapsed, hide the Sidebar completely
  • Could add a prop to to change this behavior, like collapseBehavior="hide|icons"
    • I prefer this option because the collapsing to icons only looks cool, and the other two options are not great

Screenshots n/a

Additional context n/a

[rluders]

@tulup-conner I like the idea of having the collapseBehavior. IMO, if there is no icon set, the sidebar should be hidden.

[tulup-conner]

Cool, I can add this to my todo

I think what makes the most sense is to add a collapseBehavior="collapse|hide" so users can decide

[tulup-conner]

After looking at this Flowbite Pro design, the correct behavior would be to pull the first letter of the text label and capitalize it: https://www.figma.com/file/U3v0je4no1JpE8sCud1pPZ/Flowbite-Pro-v2.1.0?node-id=3279%3A34616

So we should do that. I can look into this.