menu items

src/app/theme/sidebar/sidebar.component.ts

@@ -1,10 +1,22 @@
-import {Component, ViewEncapsulation} from 'angular2/core';
+import {Component, ElementRef} from 'angular2/core';
+
+import {SidebarService} from './sidebar.service';
 
 @Component({
     selector: 'sidebar',
     styles: [ require('./sidebar.scss') ],
     template: require('./sidebar.html'),
+    providers: [SidebarService],
     directives: [],
     pipes: []
 })
-export class Sidebar {}
+export class Sidebar {
+  menuItems = [];
+  menuHeight = 0;
+
+  constructor(el: ElementRef, private _sidebarService: SidebarService) {
+    this.menuItems = this._sidebarService.getMenuItems();
+    // this.menuHeight = el.nativeElement.childNodes[0].clientHeight - 84;
+    
+  }
+}

src/app/theme/sidebar/sidebar.html

@@ -1,5 +1,12 @@
 <aside class="al-sidebar">
   <ul class="al-sidebar-list">
+    <li *ngFor="#item of menuItems" class="al-sidebar-list-item"
+        ngClass="{'selected': item.selected, 'with-sub-menu': item.subMenu}">
+
+      <a *ngIf="item.subMenu" href="{{ item.root }}" class="al-sidebar-list-link">
+        <i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
+      </a>
+    </li>
   </ul>
   <div class="sidebar-hover-elem"></div>
 </aside>

src/app/theme/sidebar/sidebar.service.ts

@@ -0,0 +1,79 @@
+import {Injectable} from 'angular2/core';
+
+@Injectable()
+export class SidebarService {
+
+  staticMenuItems = [ {
+    title: 'Pages',
+    icon: 'ion-document',
+    subMenu: [{
+      title: 'Sign In',
+      root: 'auth.html',
+      blank: true
+    }, {
+      title: 'Sign Up',
+      root: 'reg.html',
+      blank: true
+    }, {
+      title: 'User Profile',
+      root: '#/profile'
+    }, {
+      title: '404 Page',
+      root: '404.html',
+      blank: true
+    }]
+  }, {
+    title: 'Menu Level 1',
+    icon: 'ion-ios-more',
+    subMenu: [{
+      title: 'Menu Level 1.1',
+      root: '#',
+      disabled: true
+    }, {
+      title: 'Menu Level 1.2',
+      subMenu: [{
+        title: 'Menu Level 1.2.1',
+        root: '#',
+        disabled: true
+      }]
+    }]
+  }];
+
+  getMenuItems() {
+    // var states = defineMenuItemStates();
+    // var menuItems = states.filter(function(item) {
+    //   return item.level == 0;
+    // });
+    //
+    // menuItems.forEach(function(item) {
+    //   var children = states.filter(function(child) {
+    //     return child.level == 1 && child.name.indexOf(item.name) === 0;
+    //   });
+    //   item.subMenu = children.length ? children : null;
+    // });
+    //
+    // return menuItems.concat(staticMenuItems);
+    return this.staticMenuItems;
+  };
+
+  defineMenuItemStates() {
+    // return $state.get()
+    //   .filter(function(s) {
+    //     return s.sidebarMeta;
+    //   })
+    //   .map(function(s) {
+    //     var meta = s.sidebarMeta;
+    //     return {
+    //       name: s.name,
+    //       title: s.title,
+    //       level: (s.name.match(/\./g) || []).length,
+    //       order: meta.order,
+    //       icon: meta.icon,
+    //       root: '#/' + s.name.replace('.', '/'),
+    //     };
+    //   })
+    //   .sort(function(a, b) {
+    //     return (a.level - b.level) * 100 + a.order - b.order;
+    //   });
+  }
+}