fuse-sidebar is a custom built Fuse component allows you to create a sidebar. Currently it's only used as the main navigation sidebar but in the future it will allow multiple usages.

Usage

<fuse-sidebar name="navbar" [folded]="someSetting.isFolded" lockedOpen="gt-md"></fuse-sidebar>

`[name]`

name attribute allows you to set a unique name to the sidebar. It's required for sidebar to work correctly, as every sidebar being registered to the sidebar service.

`[folded]`

Controls the folded status of the sidebar.

`[foldedWidth]`

Controls the width of the sidebar when it's folded.

`[position]`

Controls the position of the sidebar when it's hidden. This doesn't affect on the locked-open placement of the sidebar, it only controls which side the sidebar is going to slide in when it's completely hidden.

`[lockedOpen]`

Accepts Angular Material breakpoint aliases ('gt-md', 'lg' etc.) and locks open the sidebar if the alias matches the current breakpoint, similar to how Angular Material 1.x sidenav works.

`(onFoldedChanged)`

onFoldedChanged event will be triggered when the sidebar folded or unfolded permanently.

`(onOpenedChanged)`

onOpenedChanged event will be triggered when the sidebar opened or closed.

Sidebar Service

The sidebar service allows you to control the Sidebar's states from anywhere. To access the sidebar, you need to use the name attribute:

toggleSidebar(): void { this._fuseSidebarService.getSidebar('my-left-sidebar').toggleOpen(); }