feat: enhance sidebar and layout options in theme settings

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), {

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;

core/scss/layout/_core.scss

@@ -19,46 +19,4 @@ body {
   }
 }
 
-@include scrollbar;
+@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);
-    }
-  }
-}

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;
   }
 }
 

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);
+    }
+  }
+}

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);
 }
 

preview/pages/form-elements.html

@@ -234,7 +234,7 @@ permalink: form-elements.html
 								</div>
 							</div>
 							<div class="col-md-12">
-								<div class="mb-3 mb-0">
+								<div class="mb-0">
 									<label class="form-label">About Me</label>
 									<textarea rows="5" class="form-control" placeholder="Here can be your description"
 									          value="Mike">Oh so, your weak rhyme

preview/pages/layout-sidebar-narrow.html

@@ -0,0 +1,9 @@
+---
+page-header: Narrow sidebar layout
+page-menu: layout.sidebar-narrow
+layout-sidebar: true
+layout-sidebar-narrow: true
+layout-hide-topbar: true
+layout: homepage
+permalink: layout-sidebar-narrow.html
+---

shared/includes/layout/sidebar.html

@@ -1,11 +1,12 @@
 {% assign breakpoint = include.breakpoint | default: 'lg' %}
 
-<aside class="navbar navbar-vertical{% if include.end %} navbar-end{% endif %} navbar-expand-{{ breakpoint }}{% if include.transparent %} navbar-transparent{% endif %}{% if include.background %} bg-{{ include.background }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.background-color %} style="background: {{ include.background-color }}"{% endif %}{% if include.dark %} data-bs-theme="dark"{% endif %}>
+<aside class="navbar navbar-vertical{% if include.end %} navbar-end{% endif %}{% if include.narrow %} navbar-narrow{% endif %} navbar-expand-{{ breakpoint }}{% if include.transparent %} navbar-transparent{% endif %}{% if include.background %} bg-{{ include.background }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.background-color %} style="background: {{ include.background-color }}"{% endif %}{% if include.dark %} data-bs-theme="dark"{% endif %}>
 	<div class="container-fluid">
 		{% include "layout/navbar-toggler.html" target="sidebar-menu" %}
 
 		{% unless include.hide-brand %}
 			{% include "layout/navbar-logo.html" breakpoint=breakpoint header=true %}
+			{% include "layout/navbar-logo.html" breakpoint=breakpoint header=true small-logo=true %}
 		{% endunless %}
 
 		{% include "layout/navbar-side.html" class="d-lg-none" hide-username=include.hide-username person-id=include.person-id breakpoint=breakpoint %}

shared/includes/settings.html

@@ -3,7 +3,7 @@
 		{% include "ui/icon.html" icon="brush" %}
 	</a>
 
-	<form class="offcanvas offcanvas-start offcanvas-narrow" tabindex="-1" id="offcanvasSettings" role="dialog" aria-modal="true" aria-labelledby="offcanvasSettingsTitle">
+	<form class="offcanvas offcanvas-end offcanvas-narrow" tabindex="-1" id="offcanvasSettings" role="dialog" aria-modal="true" aria-labelledby="offcanvasSettingsTitle">
 		<div class="offcanvas-header">
 			<h2 class="offcanvas-title" id="offcanvasSettingsTitle">Theme Settings</h2>
 			<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
@@ -43,18 +43,60 @@
 					<label class="form-label">Font family</label>
 					<p class="form-hint">Choose the font family that fits your app.</p>
 
-					<div>
+					<div class="form-selectgroup">
 						{% assign fonts = 'sans-serif,serif,monospace,comic' | split: ',' %} {% for font in fonts %}
-						<label class="form-check">
+						<label class="form-selectgroup-item">
-							<div class="form-selectgroup-item">
+							<input type="radio" name="theme-font" value="{{ font }}" class="form-selectgroup-input"{% if font == 'sans-serif' %} checked{% endif %} />
-								<input type="radio" name="theme-font" value="{{ font }}" class="form-check-input"{% if font == 'sans-serif' %} checked{% endif %} />
+							<div class="form-selectgroup-label">
-								<div class="form-check-label">{{ font | capitalize }}</div>
+								<span style="font-family: var(--tblr-font-{{ font }});" class="display-6">Aa</span>
 							</div>
 						</label>
 						{% endfor %}
 					</div>
 				</div>
 
+				<div class="mb-4">
+					<label class="form-label">Sidebar position</label>
+					<p class="form-hint">Toggle the position of the sidebar.</p>
+
+					<div class="form-selectgroup">
+						{% assign positions = 'left,right' | split: ',' %} {% for position in positions %}
+						<label class="form-selectgroup-item">
+							<input type="radio" name="sidebar-position" value="{{ position }}" class="form-selectgroup-input"{% if position == 'left' %} checked{% endif %} />
+							<div class="form-selectgroup-label">{{ position | capitalize }}</div>
+						</label>
+						{% endfor %}
+					</div>
+				</div>
+
+				<div class="mb-4">
+					<label class="form-label">Sidebar behavior</label>
+					<p class="form-hint">Change the behavior of the sidebar.</p>
+
+					<div class="form-selectgroup">
+						{% assign behaviors = 'sticky,fixed,compact' | split: ',' %} {% for behavior in behaviors %}
+						<label class="form-selectgroup-item">
+							<input type="radio" name="sidebar-behavior" value="{{ behavior }}" class="form-selectgroup-input"{% if behavior == 'sticky' %} checked{% endif %} />
+							<div class="form-selectgroup-label">{{ behavior | capitalize }}</div>
+						</label>
+						{% endfor %}
+					</div>
+				</div>
+
+				<div class="mb-4">
+					<label class="form-label">Layout</label>
+					<p class="form-hint">Toggle container layout system.</p>
+
+					<div class="form-selectgroup">
+						{% assign layouts = 'container,fluid,boxed' | split: ',' %} {% for layout in layouts %}
+						<label class="form-selectgroup-item">
+							<input type="radio" name="layout" value="{{ layout }}" class="form-selectgroup-input"{% if layout == 'fluid' %} checked{% endif %} />
+							<div class="form-selectgroup-label">{{ layout | capitalize }}</div>
+						</label>
+						{% endfor %}
+					</div>
+				</div>
+
 				<div class="mb-4">
 					<label class="form-label">Theme base</label>
 					<p class="form-hint">Choose the gray shade for your app.</p>
@@ -121,6 +163,9 @@
 			"theme-font": "sans-serif",
 			"theme-primary": "blue",
 			"theme-radius": "1",
+			"sidebar-position": "left",
+			"sidebar-behavior": "sticky",
+			"layout": "fluid",
 		}
 
 		var url = new URL(window.location)

shared/layouts/default.html

@@ -7,7 +7,7 @@ layout: base
 <div class="page">
 	{% if layout-sidebar %}
 		<!--  BEGIN SIDEBAR  -->
-		{% include "layout/sidebar.html" dark=layout-sidebar-dark end=layout-sidebar-end transparent=layout-navbar-transparent breakpoint="lg" %}
+		{% include "layout/sidebar.html" dark=layout-sidebar-dark end=layout-sidebar-end narrow=layout-sidebar-narrow transparent=layout-navbar-transparent breakpoint="lg" %}
 		<!--  END SIDEBAR  -->
 	{% endif %}