fix(sidebar): fix #997

.angular-cli.json

@@ -19,22 +19,23 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
-        "../node_modules/normalize.css/normalize.css",
-        "../node_modules/bootstrap/scss/bootstrap.scss",
         "../node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss",
+        "../node_modules/normalize.css/normalize.css",
         "../node_modules/font-awesome/scss/font-awesome.scss",
         "../node_modules/ionicons/scss/ionicons.scss",
+        "../node_modules/bootstrap/scss/bootstrap.scss",
         "../node_modules/leaflet/dist/leaflet.css",
         "../node_modules/chartist/dist/chartist.css",
         "../node_modules/fullcalendar/dist/fullcalendar.css",
-        "app/theme/initial.scss",
         "app/theme/theme.scss",
         "styles.scss"
       ],
       "scripts": [
         "../node_modules/jquery/dist/jquery.js",
+        "../node_modules/easy-pie-chart/dist/jquery.easypiechart.js",
+        "../node_modules/jquery-slimscroll/jquery.slimscroll.js",
         "../node_modules/tether/dist/js/tether.js",
-        "../node_modules/easy-pie-chart/dist/jquery.easypiechart.js"
+        "../node_modules/bootstrap/dist/js/bootstrap.js"
       ],
       "environmentSource": "environments/environment.ts",
       "environments": {

src/app/app.component.scss

@@ -0,0 +1,123 @@
+@import './theme/sass/conf/conf';
+@import './theme/components/baSidebar/baSidebar';
+
+:host /deep/ {
+  @mixin layout-collapsed() {
+    .al-main {
+      margin-left: 50px;
+    }
+    .al-footer {
+      padding-left: 83px;
+    }
+  }
+
+  @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-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;
+      }
+    }
+  }
+
+  @mixin sidebar-hidden() {
+    .al-sidebar {
+      width: 0;
+    }
+    .sidebar-hover-elem, .sidebar-select-elem {
+      display: none;
+    }
+  }
+
+  @media (min-width: 1200px) {
+    .menu-collapsed {
+      @include layout-collapsed();
+    }
+  }
+
+  @media (max-width: 1200px) and (min-width: $resXS) {
+    @include layout-collapsed();
+  }
+
+  @media (min-width: $resXS + 1) {
+    .menu-collapsed {
+      @include sidebar-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;
+    }
+  }
+}

src/app/app.component.ts

@@ -12,8 +12,9 @@ import { layoutPaths } from './theme/theme.constants';
  */
 @Component({
   selector: 'app',
+  styleUrls: ['./app.component.scss'],
   template: `
-    <main [ngClass]="{'menu-collapsed': isMenuCollapsed}" baThemeRun>
+    <main [class.menu-collapsed]="isMenuCollapsed" baThemeRun>
       <div class="additional-bg"></div>
       <router-outlet></router-outlet>
     </main>