@stejnar/sidebar

Angular component library for tabbed sidebars.

Features

1. Simple navigation implementation for @stejnar/tabs and @angular/router
2. Semantic encapsulation with tabs
3. Customizable in style, height and width
4. Smooth animations

Build with lib-starter: https://github.com/Stejnar/lib-starter

npm package: https://www.npmjs.com/package/@stejnar/sidebar

Installation

1. $ npm install --save @stejnar/sidebar --production
2. Include in Webpack or SystemJS

Components

1. Sidebar

<sidebar>

@Input elementHeight: number

• height of sidebar children in em
• defaults to 4

@Input widthRatio: number

• widthRatio * elementHeight = width
• width of sidebar in em
• defaults to 4

2. SidebarItem

<sidebar-item>

@Input providerName: string

• refers to StateProvider of @stejnar/tabs TabsService

@Input url: string

• url to navigate to

@Input text: string

• text to be displayed

@Input icon: string

• class for bootstrap or iconmoon icons

3. SidebarTab

<sidebar-tab>

@Input tabName: string

• refers to TabComponent of @stejnar/tabs

@Input text: string

• text to be displayed

@Input icon: string

• class for bootstrap or iconmoon icons

4. SidebarService

Subscriptable slideInOut$: BehaviorSubject

• subscribe to listen on slide event

Subscriptable active$: BehaviorSubject

• subscribe to get active tab

Usage

<sidebar>
    <sidebar-item text="Apples"
                  url="/apples"
                  providerName="apples"
                  icon="em em-apple">
        <sidebar-tab tabName="red"
                     text="Red"
                     icon="em em-ant">
        </sidebar-tab>
        <sidebar-tab tabName="yellow"
                     text="Yellow"
                     icon="em em-balloon">
        </sidebar-tab>
        <sidebar-tab tabName="green"
                     text="Green"
                     icon="em em-beer">
        </sidebar-tab>
    </sidebar-item>
    <sidebar-item text="Bananas"
                  url="/bananas"
                  providerName="bananas"
                  icon="em em-banana">
        <sidebar-tab tabName="straight"
                     text="Straight"
                     icon="em em-ng">
        </sidebar-tab>
        <sidebar-tab tabName="curved"
                     text="Curved"
                     icon="em em-cl">
       </sidebar-tab>
    </sidebar-item>
</sidebar>

Future Possibilities

1. Router navigation for SidebarTab via routerLink
2. ...

Any suggestions? Contact me or collaborate! Send an e-mail to: [email protected]

Demo

1. Fork the git repository and clone it with:

   $ git clone https://github.com/Stejnar/stejnar-sdiebar.git

2. Start the build process and go to localhost:

   $ cd stejnar-sidebar-master
   $ npm install
   $ npm run build:example
   $ npm start