Merge pull request #3306 from danny007in/sidebar-scroll-fix

Sidebar scroll fixed (#3304)

build/config/postcss.config.js

@@ -1,14 +1,17 @@
 'use strict'
 
-module.exports = () => ({
+module.exports = {
   map: {
     inline: false,
     annotation: true,
     sourcesContent: true
   },
-  plugins: {
-    autoprefixer: {
+  plugins: [
+    require('postcss-scrollbar')({
+      edgeAutohide: true
+    }),
+    require('autoprefixer')({
       cascade: false
-    }
-  }
-})
+    })
+  ]
+}

build/scss/_layout.scss

@@ -580,7 +580,7 @@ body:not(.layout-fixed) {
     .control-sidebar-content {
       height: calc(100vh - #{$main-header-height});
       overflow-y: auto;
-      scrollbar-width: thin;
+      @include scrollbar-width-thin();
     }
   }
 }

build/scss/_main-sidebar.scss

@@ -19,12 +19,13 @@
 
 .sidebar {
   height: calc(100% - (#{$main-header-height-inner} + #{$main-header-bottom-border-width}));
+  overflow-x: none;
   overflow-y: initial;
-  scrollbar-width: thin;
   padding-bottom: $sidebar-padding-y;
   padding-left: $sidebar-padding-x;
   padding-right: $sidebar-padding-x;
   padding-top: $sidebar-padding-y;
+  @include scrollbar-width-thin();
 }
 
 // Sidebar user panel

build/scss/_sidebar-mini.scss

@@ -415,6 +415,13 @@
             }
           }
         }
+        .sidebar {
+          @include scrollbar-width-thin();
+        }
+      }
+
+      .sidebar {
+        @include scrollbar-width-none();
       }
     }
 

build/scss/mixins/_miscellaneous.scss

@@ -30,3 +30,13 @@
   background-image: gradient(linear, left bottom, left top, color-stop(0, $start), color-stop(1, $stop));
 }
 
+@mixin scrollbar-width-thin() {
+  scrollbar-width: thin;
+  scrollbar-color: #a9a9a9 transparent;
+}
+
+@mixin scrollbar-width-none() {
+  scrollbar-width: none;
+}
+
+//

build/scss/mixins/_sidebar.scss

@@ -25,7 +25,6 @@
   .nav-sidebar > .nav-header,
   .nav-sidebar .nav-link {
     white-space: nowrap;
-    overflow: hidden;
   }
 
   // When the sidebar is collapsed...

package-lock.json

@@ -8724,6 +8724,62 @@
         }
       }
     },
+    "postcss-scrollbar": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/postcss-scrollbar/-/postcss-scrollbar-0.3.0.tgz",
+      "integrity": "sha512-eoyc1lMOKr/hidOnUZTFxwrn0FqLFQ47wSn5eE9jUYpBXb2MZGSKEBNyqBErcTjT+9+W6aKZ3hhjPNjdVH+wDQ==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.14",
+        "postcss-selector-parser": "^5.0.0",
+        "postcss-value-parser": "^3.3.1"
+      },
+      "dependencies": {
+        "cssesc": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz",
+          "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "postcss-selector-parser": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz",
+          "integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==",
+          "dev": true,
+          "requires": {
+            "cssesc": "^2.0.0",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "postcss-scss": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-2.1.1.tgz",

package.json

@@ -147,6 +147,7 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8.2.4",
     "postcss-cli": "^8.3.1",
+    "postcss-scrollbar": "^0.3.0",
     "rollup": "^2.36.1",
     "stylelint": "^13.8.0",
     "stylelint-config-twbs-bootstrap": "^2.1.0",