fix(sidebar): fix #997

2025-12-28 21:28:50 +01:00 · 2017-04-20 13:28:56 +03:00 · 2017-04-20 13:28:56 +03:00 · 2a5d9463b1
commit 2a5d9463b1
parent 4931da2d22
8 changed files with 186 additions and 227 deletions
--- a/src/app/app.component.scss
+++ b/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;
+    }
+  }
+}