Skip to content

chore: Add width prop to SideBar and align side bar item interface with top bar items. #532

@kurtdoherty

Description

@kurtdoherty

Background context:

  • SideBar currently sizes itself incorrectly. While it has a min and max width, it is not able to size itself to the longest menu item, because some menu items will be hidden inside a menu group. Further, when used in real products, the side bar's container will often want to size itself to the minimum size its content. This leads to many menu items being truncated when they shouldn't be.
  • SideBar components were recently refactored. Its item components used an isActive prop to indicate whether the item is the current page or not.
  • TopBar components were also recently refactored. Its item components used the aria-current attribute directly, instead of an abstracted isActive prop.

Specification or tasks to perform:

  • Update SideBar's item components to also use aria-current directly, instead of isActive
  • Update SideBar to accept a width prop that specifies the exact, fixed width of the side bar.

Metadata

Metadata

Assignees

Labels

housekeepingThe issue relates to a housekeeping task or chore

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions