basic sidebar implementation

src/app/pages/pages.component.ts

@@ -2,7 +2,7 @@ import {Component, ViewEncapsulation} from 'angular2/core';
 import {RouteConfig, Router} from 'angular2/router';
 
 import {Dashboard} from './dashboard';
-import {PageTop} from '../theme';
+import {PageTop, Sidebar} from '../theme';
 
 /*
  * App Component
@@ -12,8 +12,8 @@ import {PageTop} from '../theme';
     selector: 'pages',
     encapsulation: ViewEncapsulation.None,
     styles: [],
-    directives: [PageTop],
-    template:  `<page-top></page-top><router-outlet></router-outlet>`
+    directives: [PageTop, Sidebar],
+    template:  `<sidebar></sidebar><page-top></page-top><router-outlet></router-outlet>`
 })
 @RouteConfig([
     { path: '/dashboard', name: 'Dashboard', component: Dashboard, useAsDefault: true },
@@ -25,4 +25,4 @@ export class Pages {
         console.log('Pages');
     }
 
-}
+}

src/app/theme/index.ts

@@ -1,2 +1,3 @@
 export * from './pageTop';
 export * from './msgCenter';
+export * from './sidebar';

src/app/theme/sidebar/index.ts

@@ -0,0 +1 @@
+export * from './sidebar.component';

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

@@ -0,0 +1,10 @@
+import {Component, ViewEncapsulation} from 'angular2/core';
+
+@Component({
+    selector: 'sidebar',
+    styles: [ require('./sidebar.scss') ],
+    template: require('./sidebar.html'),
+    directives: [],
+    pipes: []
+})
+export class Sidebar {}

src/app/theme/sidebar/sidebar.html

@@ -0,0 +1,5 @@
+<aside class="al-sidebar">
+  <ul class="al-sidebar-list">
+  </ul>
+  <div class="sidebar-hover-elem"></div>
+</aside>

src/app/theme/sidebar/sidebar.scss

@@ -0,0 +1,274 @@
+@import '../sass/conf/conf';
+
+$sidebar-width: 180px;
+$angle-left: "\f100";
+$angle-right: "\f101";
+
+.al-sidebar {
+  width: $sidebar-width;
+  top: $top-height;
+  left: 0;
+  z-index: 904;
+  display: block;
+  min-height: 100%;
+  @include bg-translucent-dark(0.5);
+  height: 100%;
+  position: fixed;
+}
+
+.al-sidebar-list {
+  margin: 0;
+  padding: 18px 0 0 0;
+  list-style: none;
+}
+
+.al-sidebar-sublist .subitem-submenu-list {
+  padding-left: 15px;
+}
+
+.subitem-submenu-link {
+  .fa {
+    top: 7px;
+  }
+}
+
+.al-sidebar-list-item {
+  display: block;
+  position: relative;
+  float: none;
+  padding: 0;
+  &.selected:not(.with-sub-menu) {
+    background-color: $primary;
+    a.al-sidebar-list-link {
+      color: $default;
+      b {
+        color: $default;
+      }
+    }
+  }
+}
+
+a.al-sidebar-list-link {
+  display: block;
+  height: 42px;
+  padding-left: 18px;
+  text-shadow: none;
+  font-size: 13px;
+  text-decoration: none;
+  color: #ffffff;
+  line-height: 42px;
+  white-space: nowrap;
+  overflow: hidden;
+  cursor: pointer;
+  &:hover {
+    color: $primary;
+    b {
+      color: $primary;
+    }
+  }
+  i {
+    margin-right: 18px;
+    width: 16px;
+    display: inline-block;
+  }
+  b {
+    display: block;
+    opacity: 1;
+    width: 14px;
+    height: 14px;
+    line-height: 14px;
+    text-shadow: none;
+    font-size: 18px;
+    position: absolute;
+    right: 10px;
+    top: 12px;
+    padding: 0;
+    text-align: center;
+    color: #cccccc;
+  }
+}
+
+.slimScrollBar, .slimScrollRail {
+  border-radius: 0px !important;
+  width: 4px !important;
+  left: 176px;
+}
+
+@mixin layout-collapsed() {
+  .al-main {
+    margin-left: 50px;
+  }
+
+  .al-footer {
+    padding-left: 83px
+  }
+}
+
+@mixin default-sublist() {
+  padding: 0;
+  list-style: none;
+  position: relative;
+  display: none;
+  &.expanded {
+    display: block;
+  }
+  > li {
+    display: block;
+    float: none;
+    padding: 0;
+    border-bottom: none;
+    position: relative;
+    a {
+      display: block;
+      text-shadow: none;
+      font-size: 13px;
+      text-decoration: none;
+      color: #ffffff;
+      padding-left: 52px;
+      height: auto;
+      line-height: 29px;
+      &:hover {
+        color: $primary;
+      }
+    }
+    &.selected:not(.with-sub-menu) > a {
+      border: none;
+      background-color: $primary;
+      &:hover {
+        color: $default;
+      }
+    }
+
+  }
+}
+
+.al-sidebar-sublist {
+  @include default-sublist();
+}
+
+.sidebar-hover-elem{
+  width: 4px;
+  background: $primary;
+  position: absolute;
+  top: -150px;
+  left: 176px;
+  transition: all 0.5s ease;
+  transition-property: top, height;
+  height: 42px;
+  display: block;
+}
+
+.sidebar-select-elem {
+  display: block;
+  top: 94px;
+}
+
+@mixin sidebar-collapsed() {
+  .al-sidebar {
+    width: 52px;
+
+    .fa-angle-down, .fa-angle-up {
+      opacity: 0;
+    }
+
+    .al-sidebar-sublist {
+      position: absolute;
+      top: -1px;
+      left: 52px;
+      @include bg-translucent-dark(0.8);
+      width: 0;
+      display: block;
+      overflow: hidden;
+      transition: width 0.5s ease;
+      &.slide-right {
+        width: 135px;
+      }
+      &:before {
+        display: none;
+      }
+      li {
+        &:before {
+          display: none;
+        }
+        a {
+          padding-left: 18px;
+          padding-right: 18px;
+          min-width: 130px;
+          white-space: nowrap;
+        }
+      }
+    }
+
+    .sidebar-hover-elem, .sidebar-select-elem {
+      left: 48px;
+    }
+  }
+}
+
+@mixin sidebar-hidden() {
+  .al-sidebar {
+    width: 0;
+  }
+  .sidebar-hover-elem, .sidebar-select-elem {
+    display: none;
+  }
+}
+
+@mixin sidebar-overlap() {
+  .al-sidebar {
+    width: $sidebar-width;
+    @include bg-translucent-dark(0.75);
+    transition: width 0.5s ease;
+
+    .fa-angle-down, .fa-angle-up {
+      opacity: 1;
+    }
+
+    .al-sidebar-sublist {
+      @include default-sublist();
+      top: auto;
+      left: auto;
+      background: none;
+      width: auto;
+      overflow: visible;
+      transition: none;
+    }
+
+    .sidebar-hover-elem, .sidebar-select-elem {
+      left: $sidebar-width - 4;
+      transition: left 0.5s ease;
+    }
+  }
+}
+
+@media (min-width: 1200px) {
+  .menu-collapsed {
+    @include layout-collapsed();
+  }
+}
+
+@media (min-width: $resXS + 1) {
+  .menu-collapsed {
+    @include sidebar-collapsed();
+  }
+}
+
+@media (max-width: 1200px) and (min-width: $resXS) {
+  @include layout-collapsed();
+}
+
+@media (max-width: 1200px) {
+  @include sidebar-overlap();
+}
+
+@media (max-width: $resXS) {
+  .menu-collapsed {
+    @include sidebar-hidden();
+  }
+  .al-main {
+    margin-left: 0;
+  }
+  .al-footer {
+    padding-left: 0;
+  }
+}