Sidebar

.blue-sidebar-exception

Prevents the default behaviour of closing sidebar after clicking an item.

.blue-sidebar-bottom

With Sidebar Bottom, for example, a registered user can be displayed at the bottom left. Usable within <SidebarMenu bottomContent={} />.

.blue-sidebar-hidden-on-open

The element is hidden as long as the sidebar is open.

.blue-sidebar-pseudo-hidden-on-open, .blue-sidebar-before-hidden-on-open, .blue-sidebar-afters-hidden-on-open

Pseudo elements of element are hidden as long as the sidebar is open. .blue-sidebar-before-hidden-on-open hides ::before,.blue-sidebar-after-hidden-on-open hides ::after and .blue-sidebar-pseudo-hidden-on-open will hide both.

.blue-sidebar-d-flex-on-open

Alias: .blue-sidebar-visible-on-open The element is visible (display: flex) as long as the sidebar is open.

.blue-sidebar-d-block-on-open

The element is visible (display: block) as long as the sidebar is open.

.blue-sidebar-menu-horizontal-on-open

Use this inside of the sidebar to make menus act like horizontal menus when the sidebar is open. Designed for the IconMenuItem component. But might be useful for other scenarios aswell.

.blue-sidebar-menu-vertical-on-open

If you want to change direction inside of .blue-sidebar-menu-horizontal-on-open back to vertical, use .blue-sidebar-menu-vertical-on-open. Might be useful for dropdowns.