From 54ded26b95aefd0b704c1769037b9d57f3831686 Mon Sep 17 00:00:00 2001 From: codecalm Date: Mon, 22 Sep 2025 23:09:55 +0200 Subject: [PATCH] feat: enhance sidebar and layout options in theme settings --- core/js/tabler-theme.js | 3 + core/scss/_variables.scss | 1 + core/scss/layout/_core.scss | 44 +-------- core/scss/layout/_navbar.scss | 111 +++++++++++++++++++---- core/scss/tabler-themes.scss | 47 ++++++++++ core/scss/ui/_buttons.scss | 2 +- preview/pages/form-elements.html | 2 +- preview/pages/layout-sidebar-narrow.html | 9 ++ shared/includes/layout/sidebar.html | 3 +- shared/includes/settings.html | 57 ++++++++++-- shared/layouts/default.html | 2 +- 11 files changed, 212 insertions(+), 69 deletions(-) create mode 100644 preview/pages/layout-sidebar-narrow.html diff --git a/core/js/tabler-theme.js b/core/js/tabler-theme.js index 45df216f1..731f9c24a 100644 --- a/core/js/tabler-theme.js +++ b/core/js/tabler-theme.js @@ -9,6 +9,9 @@ const themeConfig = { "theme-font": "sans-serif", "theme-primary": "blue", "theme-radius": "1", + "sidebar-position": "left", + "sidebar-behavior": "sticky", + "layout": "container", } const params = new Proxy(new URLSearchParams(window.location.search), { diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss index 39c2659ca..be60a306e 100644 --- a/core/scss/_variables.scss +++ b/core/scss/_variables.scss @@ -852,6 +852,7 @@ $navbar-active-border-color: var(--#{$prefix}primary) !default; // Sidebar $sidebar-width: 15rem !default; +$sidebar-narrow-width: 4rem !default; // Page $page-title-font-size: var(--#{$prefix}font-size-h2) !default; diff --git a/core/scss/layout/_core.scss b/core/scss/layout/_core.scss index a337be154..b61dea62a 100644 --- a/core/scss/layout/_core.scss +++ b/core/scss/layout/_core.scss @@ -19,46 +19,4 @@ body { } } -@include scrollbar; - -// -// Fluid container -// -.layout-fluid { - .container, - [class^="container-"], - [class*=" container-"] { - max-width: 100%; - } -} - -// -// Boxed container -// -.layout-boxed { - --#{$prefix}theme-boxed-border-radius: 0; - --#{$prefix}theme-boxed-width: #{map.get($container-max-widths, xxl)}; - - @include media-breakpoint-up(md) { - background: $dark linear-gradient(to right, rgba(#fff, .1), transparent) fixed; - padding: 1rem; - --#{$prefix}theme-boxed-border-radius: #{$border-radius}; - } - - .page { - margin: 0 auto; - max-width: var(--#{$prefix}theme-boxed-width); - border-radius: var(--#{$prefix}theme-boxed-border-radius); - color: var(--#{$prefix}body-color); - - @include media-breakpoint-up(md) { - border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color); - background: var(--#{$prefix}body-bg); - } - - > .navbar:first-child { - border-top-left-radius: var(--#{$prefix}theme-boxed-border-radius); - border-top-right-radius: var(--#{$prefix}theme-boxed-border-radius); - } - } -} \ No newline at end of file +@include scrollbar; \ No newline at end of file diff --git a/core/scss/layout/_navbar.scss b/core/scss/layout/_navbar.scss index e4a02e33d..5813708b1 100644 --- a/core/scss/layout/_navbar.scss +++ b/core/scss/layout/_navbar.scss @@ -167,22 +167,6 @@ Navbar box-shadow: inset calc(1 * var(--#{$prefix}navbar-border-width)) 0 0 0 var(--#{$prefix}navbar-border-color); } } - - &.navbar-vertical { - ~ .navbar, - ~ .page-wrapper { - margin-left: $sidebar-width; - } - } - - &.navbar-vertical.navbar-right, - &.navbar-vertical.navbar-end { - ~ .navbar, - ~ .page-wrapper { - margin-left: 0; - margin-right: $sidebar-width; - } - } } } } @@ -308,6 +292,10 @@ Navbar vertical */ @if $enable-navbar-vertical { .navbar-vertical { + @at-root .page:has(>#{&}) { + margin-left: $sidebar-width; + } + &.navbar-expand { @each $breakpoint in map.keys($grid-breakpoints) { $next: breakpoint-next($breakpoint, $grid-breakpoints); @@ -380,6 +368,97 @@ Navbar vertical } } } + + // Narrow sidebar implementation + &.navbar-narrow { + @at-root .page:has(>#{&}) { + margin-left: $sidebar-narrow-width; + } + + &.navbar-expand { + @each $breakpoint in map.keys($grid-breakpoints) { + $next: breakpoint-next($breakpoint, $grid-breakpoints); + $infix: breakpoint-infix($next, $grid-breakpoints); + + &#{$infix} { + @include media-breakpoint-up($next) { + width: $sidebar-narrow-width; + + .navbar-brand { + .navbar-brand-image { + width: 1.5rem; + height: 1.5rem; + } + } + + .navbar-nav { + .nav-link { + justify-content: center; + padding-left: 0.5rem; + padding-right: 0.5rem; + + .nav-link-title { + display: none; + } + + .nav-link-icon { + margin-right: 0; + } + } + + .dropdown-menu { + position: fixed !important; + left: $sidebar-narrow-width; + top: auto; + margin-left: 0.25rem; + background: var(--#{$prefix}bg-surface); + border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color); + box-shadow: var(--#{$prefix}shadow); + border-radius: var(--#{$prefix}border-radius); + min-width: 12rem; + + .dropdown-item { + padding: 0.5rem 1rem; + color: var(--#{$prefix}body-color); + background: transparent; + + &:hover, + &:focus { + background: var(--#{$prefix}gray-100); + } + + &.active { + background: var(--#{$prefix}primary); + color: var(--#{$prefix}white); + } + } + } + } + + ~ .page { + padding-left: $sidebar-narrow-width; + } + + &.navbar-right ~ .page, + &.navbar-end ~ .page { + padding-left: 0; + padding-right: $sidebar-narrow-width; + } + } + } + } + } + } + } +} + +/** +Navbar narrow tooltips +*/ +.navbar-narrow-tooltip { + .tooltip-inner { + font-size: 0.75rem; + padding: 0.25rem 0.5rem; } } diff --git a/core/scss/tabler-themes.scss b/core/scss/tabler-themes.scss index 9cd81480d..5fa47fe7a 100644 --- a/core/scss/tabler-themes.scss +++ b/core/scss/tabler-themes.scss @@ -1,3 +1,4 @@ +@use "sass:map"; @import "config"; [data-bs-theme-base="slate"] { @@ -119,3 +120,49 @@ } } } + +// +// Fluid container +// +[data-bs-layout="fluid"] { + .container, + [class^="container-"], + [class*=" container-"] { + max-width: 100%; + } +} + +// +// Boxed container +// +[data-bs-layout="boxed"] { + --#{$prefix}theme-boxed-border-radius: 0; + --#{$prefix}theme-boxed-width: #{map.get($container-max-widths, xxl)}; + + @include media-breakpoint-up(md) { + background: $dark linear-gradient(to right, rgba(#fff, .1), transparent) fixed; + padding: 1rem; + --#{$prefix}theme-boxed-border-radius: #{$border-radius}; + } + + body { + background: transparent; + } + + .page { + margin: 0 auto; + max-width: var(--#{$prefix}theme-boxed-width); + border-radius: var(--#{$prefix}theme-boxed-border-radius); + color: var(--#{$prefix}body-color); + + @include media-breakpoint-up(md) { + border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color); + background: var(--#{$prefix}body-bg); + } + + > .navbar:first-child { + border-top-left-radius: var(--#{$prefix}theme-boxed-border-radius); + border-top-right-radius: var(--#{$prefix}theme-boxed-border-radius); + } + } +} \ No newline at end of file diff --git a/core/scss/ui/_buttons.scss b/core/scss/ui/_buttons.scss index f9c5b6bcf..475be268e 100644 --- a/core/scss/ui/_buttons.scss +++ b/core/scss/ui/_buttons.scss @@ -215,7 +215,7 @@ position: fixed; z-index: $zindex-fixed; bottom: 1rem; - left: 1rem; + right: 1rem; box-shadow: var(--#{$prefix}shadow-dropdown); } diff --git a/preview/pages/form-elements.html b/preview/pages/form-elements.html index 9f110c743..698273dca 100644 --- a/preview/pages/form-elements.html +++ b/preview/pages/form-elements.html @@ -234,7 +234,7 @@ permalink: form-elements.html
-
+