diff --git a/src/App.js b/src/App.js index f5bd7e2e47..d1ad16d5a5 100644 --- a/src/App.js +++ b/src/App.js @@ -60,6 +60,13 @@ export default { '-' + this.layoutType ] }, + navClasses () { + const { navbarColumnStretch } = this.$store.getters.mergedConfig + return [ + '-' + this.layoutType, + ...(navbarColumnStretch ? ['-column-stretch'] : []) + ] + }, currentUser () { return this.$store.state.users.currentUser }, userBackground () { return this.currentUser.background_image }, instanceBackground () { diff --git a/src/App.scss b/src/App.scss index 3c16007e60..02f5e049fd 100644 --- a/src/App.scss +++ b/src/App.scss @@ -185,13 +185,14 @@ nav { --maxiColumn: 45rem; --columnGap: 1em; --status-margin: 0.75em; - + --effectiveSidebarColumnWidth: minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn))); + --effectiveNotifsColumnWidth: minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn))); --effectiveContentColumnWidth: minmax(var(--miniColumn), var(--contentColumnWidth, var(--maxiColumn))); position: relative; display: grid; grid-template-columns: - minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn))) + var(--effectiveSidebarColumnWidth) var(--effectiveContentColumnWidth); grid-template-areas: "sidebar content"; grid-template-rows: 1fr; @@ -288,22 +289,22 @@ nav { &.-reverse:not(.-wide):not(.-mobile) { grid-template-columns: var(--effectiveContentColumnWidth) - minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn))); + var(--effectiveSidebarColumnWidth); grid-template-areas: "content sidebar"; } &.-wide { grid-template-columns: - minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn))) + var(--effectiveSidebarColumnWidth) var(--effectiveContentColumnWidth) - minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn))); + var(--effectiveNotifsColumnWidth); grid-template-areas: "sidebar content notifs"; &.-reverse { grid-template-columns: - minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn))) + var(--effectiveNotifsColumnWidth) var(--effectiveContentColumnWidth) - minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn))); + var(--effectiveSidebarColumnWidth); grid-template-areas: "notifs content sidebar"; } } diff --git a/src/App.vue b/src/App.vue index c741aa7000..1f96efe8d4 100644 --- a/src/App.vue +++ b/src/App.vue @@ -8,7 +8,10 @@ class="app-bg-wrapper" /> - +
+
  • + + {{ $t('settings.navbar_column_stretch') }} + +