Added event and routing support

src/navigation/items/NavDropDownItem.tsx

@@ -1,13 +1,23 @@
 import * as React from 'react'
 
-export class NavDropDownItem extends React.Component<{label: string}, any> {
+import {OnSelectCallback, Payload} from "./OnSelectCallback";
+
+export class NavDropDownItem extends React.Component<{label: string, onSelect?: OnSelectCallback, payload?: Payload}, any> {
     static propTypes() {
         return {
-            label: React.PropTypes.string.isRequired
+            label: React.PropTypes.string.isRequired,
+            onSelect: React.PropTypes.func,
+            payload: React.PropTypes.object
         }
     }
 
+    private handleSelect = () => {
+        if (this.props.onSelect) {
+            this.props.onSelect(this.props.payload);
+        }
+    };
+
     render(): React.ReactElement<any> {
-        return <li><a href="#">{this.props.label}</a></li>
+        return <li><a onClick={this.handleSelect}>{this.props.label}</a></li>
     }
 }

src/navigation/items/NavInfoList.tsx

@@ -1,14 +1,24 @@
 import * as React from 'react'
 
-import { NavItem } from "./NavItem";
+import {NavItem} from "./NavItem";
+import {OnClearCallback} from "./OnClearCallback";
 
-export class NavInfoList extends NavItem<{ label: string }> {
+export class NavInfoList extends NavItem<{ id: string, label: string, onClear?: OnClearCallback }> {
     static propTypes() {
         return {
-            label: React.PropTypes.string.isRequired
+            id: React.PropTypes.string.isRequired,
+            label: React.PropTypes.string.isRequired,
+            onClear: React.PropTypes.func
         }
     }
 
+    private handleClear = () => {
+        if (this.props.onClear) {
+            this.props.onClear(this.props.id);
+        }
+    };
+
+
     render(): React.ReactElement<any> {
         const length =  React.Children.count(this.props.children);
         return <li className="dropdown">
@@ -22,7 +32,7 @@ export class NavInfoList extends NavItem<{ label: string }> {
                     {this.props.children}
                 </ul>
                 <div className="footer">
-                    <a>Clear Messages</a>
+                    <a onClick={this.handleClear}>Clear Messages</a>
                 </div>
             </div>
         </li>

src/navigation/items/OnClearCallback.ts

@@ -0,0 +1,3 @@
+export interface OnClearCallback {
+    (id: string)
+}

src/navigation/items/OnSelectCallback.ts

@@ -0,0 +1,11 @@
+export interface Payload {
+    payload: any;
+}
+
+export interface CommandPayload extends  Payload{
+    command: string;
+}
+
+export interface OnSelectCallback {
+    (event: Payload)
+}

src/navigation/items/SidebarItem.tsx

@@ -1,16 +1,17 @@
 import * as React from 'react'
 
-export class SidebarItem extends React.Component<{ label: string, icon: string}, any> {
+export class SidebarItem extends React.Component<{ label: string, icon: string, route: string}, any> {
     static propTypes() {
         return {
             label: React.PropTypes.string.isRequired,
-            icon: React.PropTypes.string.isRequired
+            icon: React.PropTypes.string.isRequired,
+            route: React.PropTypes.string.isRequired
         }
     }
 
     render(): React.ReactElement<any> {
         return <li className="list-group-item">
-            <a>
+            <a href={this.props.route}>
                 <span className={'fa ' + this.props.icon} data-toggle="tooltip" title={this.props.label}></span>
                 <span className="list-group-item-value">{this.props.label}</span>
             </a>

src/navigation/items/SidebarListItem.tsx

@@ -1,15 +1,16 @@
 import * as React from 'react'
 
-export class SidebarListItem extends React.Component<{label: string}, any> {
+export class SidebarListItem extends React.Component<{label: string, route: string}, any> {
     static propTypes() {
         return {
-            label: React.PropTypes.string.isRequired
+            label: React.PropTypes.string.isRequired,
+            route: React.PropTypes.string.isRequired
         }
     }
 
     render(): React.ReactElement<any> {
         return <li className="list-group-item">
-            <a>
+            <a href={this.props.route}>
                 <span className="list-group-item-value">{this.props.label}</span>
             </a>
         </li>

src/navigation/items/index.ts

@@ -5,4 +5,6 @@ export * from './NavInfoList'
 export * from './NavInfoItem'
 export * from './SidebarItem'
 export * from './SidebarItemList'
-export * from './SidebarListItem'
+export * from './SidebarListItem'
+export * from './OnSelectCallback'
+export * from './OnClearCallback'