Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Sidebar: Undefined behavior for items with no icon when collapsed #81

Closed
tulup-conner opened this issue May 4, 2022 · 3 comments
Closed

Sidebar: Undefined behavior for items with no icon when collapsed #81

tulup-conner opened this issue May 4, 2022 · 3 comments
Assignees
@tulup-conner
Labels
🐛 bug Something isn't working confirmed This bug was confirmed

Comments

@tulup-conner
Copy link
Collaborator

tulup-conner commented May 4, 2022 •
edited
Loading

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 rluders added 🐛 bug Something isn't working confirmed This bug was confirmed labels May 4, 2022
@rluders
Copy link
Collaborator

rluders commented May 23, 2022

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

@tulup-conner
Copy link
Collaborator Author

tulup-conner commented May 24, 2022 •
edited
Loading

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 added a commit to tulup-conner/flowbite-react that referenced this issue May 31, 2022
@tulup-conner
feature(component): Allow Sidebars to hide completely, resolves the…
adedacd 
…mesberg#81

`Sidebar`s can now be created with:

```js
<Sidebar collapseBehavior="hide">...</Sidebar>
```

To completely hide the `Sidebar` when collapsed,
instead of displaying icons. This is useful if you
are not adding icons to yours.
@tulup-conner tulup-conner mentioned this issue May 31, 2022
Merged
4 tasks
tulup-conner added a commit to tulup-conner/flowbite-react that referenced this issue May 31, 2022
@tulup-conner
feature(component): Allow Sidebars to hide completely, resolves the…
3c99acc 
…mesberg#81

`Sidebar`s can now be created with:

```js
<Sidebar collapseBehavior="hide">...</Sidebar>
```

To completely hide the `Sidebar` when collapsed,
instead of displaying icons. This is useful if you
are not adding icons to yours.
tulup-conner added a commit to tulup-conner/flowbite-react that referenced this issue May 31, 2022
@tulup-conner
feature(component): Allow Sidebars to hide completely, resolves the…
ae4abcd 
…mesberg#81

`Sidebar`s can now be created with:

```js
<Sidebar collapseBehavior="hide">...</Sidebar>
```

To completely hide the `Sidebar` when collapsed,
instead of displaying icons. This is useful if you
are not adding icons to yours.
tulup-conner added a commit to tulup-conner/flowbite-react that referenced this issue May 31, 2022
@tulup-conner
feature(component): Allow Sidebars to hide completely, resolves the…
7cc3655 
…mesberg#81

`Sidebar`s can now be created with:

```js
<Sidebar collapseBehavior="hide">...</Sidebar>
```

To completely hide the `Sidebar` when collapsed,
instead of displaying icons. This is useful if you
are not adding icons to yours.
tulup-conner added a commit to tulup-conner/flowbite-react that referenced this issue May 31, 2022
@tulup-conner
feature(component): Allow Sidebars to hide completely, resolves the…
809104f 
…mesberg#81

`Sidebar`s can now be created with:

```js
<Sidebar collapseBehavior="hide">...</Sidebar>
```

To completely hide the `Sidebar` when collapsed,
instead of displaying icons. This is useful if you
are not adding icons to yours.
@rluders rluders closed this as completed in 44a29e7 Jun 2, 2022
@rluders rluders moved this from Backlog to In Progress in Flowbite React Development Jun 2, 2022
@rluders rluders moved this from In Progress to Done in Flowbite React Development Jun 2, 2022
@rluders rluders added this to the v1.0.0-alpha milestone Jun 4, 2022
@tulup-conner tulup-conner reopened this Jul 31, 2022
@tulup-conner
Copy link
Collaborator Author

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.

tulup-conner added a commit to tulup-conner/flowbite-react that referenced this issue Aug 20, 2022
@tulup-conner
fix(component): use 1st letter of text in collapsed Sidebar.Item wi…
8f0d24c 
…th no `icon`

resolve themesberg#81
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@tulup-conner tulup-conner

Labels
🐛 bug Something isn't working confirmed This bug was confirmed
Projects
Flowbite React Development
Status: Done
Milestone
No milestone
Development

No branches or pull requests
2 participants
@rluders @tulup-conner