Ng-icon-sidebar NPM

ng-icon-sidebar

An Angular sidebar component which displays a dock for icons when closed.

Installation

npm install --save ng-icon-sidebar

Usage

Add SidebarModule to your app module:

import { SidebarModule } from 'ng-icon-sidebar';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [AppComponent],
  imports: [BrowserModule, SidebarModule.forRoot()],
})
class AppModule {}

In your app component, simply add a <ng-icon-sidebar> wrapper, then place your content within it.

@Component({
  selector: 'app',
  template: `
    <!-- Container for sidebar content. -->
    <ng-icon-sidebar>
      Sidebar contents...
    </ng-icon-sidebar>
  `
})
class AppComponent {}

Behavior

The sidebar opens and closes based on UI events. It is designed to open when the user:

moves the mouse onto the sidebar
touches the sidebar
tabs into the sidebar

Specifically, the sidebar will open on the following events:

A mouseenter event bubbles up to the sidebar element's <aside> element.
A focusin event bubbles up to the sidebar element's <aside> element.

The sidebar is designed to close when the user:

moves the mouse out of the sidebar
touches the part of the screen outside of the sidebar
tabs out of the sidebar

Specifically, the sidebar will close on the following events:

A mouseleave event bubbles up to the sidebar element's <aside> element when none of the sidebar's contents have keyboard focus. (It tracks keyboard focus via focusin and focusout events.)
A focusout event bubbles up to the sidebar element's <aside> element when the mouse is outside of the <aside>. (It tracks mouse presence via mouseenter and mouseleave events.)

Thus you can progamatically open and close the sidebar by dispatching these events from within the sidebar's contents.

Properties

The sidebar component has a single, read-only property.

Property	Description
`opened`	A boolean which indicates whether the sidebar is open or closed.

Styling

The sidebar exposes a few CSS classes for convenient styling.

Class name	Description
`ng-icon-sidebar`	Always on the sidebar component's `<aside>` element.
`ng-icon-sidebar--opened`	On the sidebar component's `<aside>` element when `opened` is `true`.
`ng-icon-sidebar--closed`	On the sidebar component's `<aside>` element when `opened` is `false`.