diff --git a/src/App.js b/src/App.js index 26a188f4..75fa3a3c 100644 --- a/src/App.js +++ b/src/App.js @@ -82,6 +82,8 @@ export default { layoutType () { return this.$store.state.interface.layoutType }, privateMode () { return this.$store.state.instance.private }, reverseLayout () { return this.$store.getters.mergedConfig.sidebarRight }, + noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders }, + showScrollbars () { return this.$store.getters.mergedConfig.showScrollbars }, ...mapGetters(['mergedConfig']) }, methods: { diff --git a/src/App.scss b/src/App.scss index 1867a54d..ac6cf3f4 100644 --- a/src/App.scss +++ b/src/App.scss @@ -59,6 +59,7 @@ nav { #content { overscroll-behavior-y: none; overflow-y: auto; + overflow-x: hidden; position: sticky; } @@ -136,6 +137,19 @@ nav { max-height: calc(100vh - var(--navbar-height)); overflow-y: auto; overflow-x: hidden; + margin-left: -2em; + padding-left: 2.5em; + + &:not(.-show-scrollbar) { + scrollbar-width: none; + margin-right: -2em; + padding-right: 2.5em; + + &::-webkit-scrollbar { + display: block; + width: 0; + } + } .panel-heading.-sticky { top: -10px; @@ -143,6 +157,15 @@ nav { } } + &.-no-sticky-headers { + .column { + .panel-heading.-sticky { + position: relative; + top: 0; + } + } + } + .column-inner { display: grid; grid-template-columns: 100%; @@ -186,10 +209,6 @@ nav { #content, .column.-scrollable { - &::-webkit-scrollbar { - display: block; - width: 0; - } } .text-center { diff --git a/src/App.vue b/src/App.vue index 70084538..243a3314 100644 --- a/src/App.vue +++ b/src/App.vue @@ -13,10 +13,10 @@
-