Sidebar Menu UI Bugs

[subodhpareek18]

Some comparisons with a pure semantic-ui project (non react):

<Sidebar 
  as={Menu} 
  animation='push' 
  width='very thin' 
  icon='labeled' 
  vertical 
  inverted>

Expected Sidebar Behavior

Actual Sidebar Behavior

As you can see the menu is getting hidden under Sidebar.Pusher

---

<Menu.Item disabled link name='/jobs'>
  <Icon name='briefcase' />
  Jobs
</Menu.Item>

Expected Behavior:

Actual Behavior:

Disabled prop is having no effect on the menu item.

---

Also facing issues with most of the animations (only push seems to be usable)

Now I can see in the docs that all of the animations are working fine, so what can I do to achieve better performance?

[levithomason]

A very thin sidebar simply does not have enough space to fit a labeled icon menu. You'd need to customize the CSS theme and set @labeledIconMinWidth: 0; in the Menu overrides. Otherwise, the menu items are set to have a min width that is wider than the sidebar.

Another option is to not use an icon='labeled' menu, but just an icon menu (size='massive' in this case):