From 04602910c401e38534df928cee457c5386aa10d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
 <1282324+codecalm@users.noreply.github.com>
Date: Wed, 23 Sep 2026 13:20:14 +0200
Subject: [PATCH] Emit the vertical navbar styles once instead of per
 breakpoint (#3139)

---
 .changeset/navbar-vertical-smaller-css.md |  5 +++++
 core/scss/layout/_navbar.scss             | 23 +++++++++++++----------
 2 files changed, 18 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/navbar-vertical-smaller-css.md

diff --git a/.changeset/navbar-vertical-smaller-css.md b/.changeset/navbar-vertical-smaller-css.md
new file mode 100644
index 000000000..5f8d4c3a5
--- /dev/null
+++ b/.changeset/navbar-vertical-smaller-css.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Updated the `.navbar-vertical` styles to be generated once instead of per breakpoint, cutting 36 kB from `tabler.min.css`.
diff --git a/core/scss/layout/_navbar.scss b/core/scss/layout/_navbar.scss
index dd39172f1..e0fad1f1f 100644
--- a/core/scss/layout/_navbar.scss
+++ b/core/scss/layout/_navbar.scss
@@ -371,6 +371,16 @@ Navbar
   }
 }
 
+// The vertical navbar is a vertical list at every width: the stacked mobile
+// menu below its breakpoint, the sidebar from it up. Emitted once instead of
+// inside every breakpoint of both loops; it stays ahead of them in source
+// order, so the per-breakpoint rules below still override it.
+@if $enable-navbar-vertical {
+  .navbar-vertical[class*='navbar-expand'] {
+    @include navbar-vertical-nav();
+  }
+}
+
 .navbar-expand {
   @each $breakpoint in map.keys($grid-breakpoints) {
     $next: breakpoint-next($breakpoint, $grid-breakpoints);
@@ -760,11 +770,6 @@ Navbar vertical
               flex-grow: 1;
               flex-direction: column;
               min-height: auto;
-
-              .nav-link {
-                padding-top: 0.5rem;
-                padding-bottom: 0.5rem;
-              }
             }
 
             // Bottom-pinned footer area, e.g. a user block. Sits after the
@@ -818,15 +823,13 @@ Navbar vertical
               padding-inline-end: var(--sidebar-width);
             }
 
-            @include navbar-vertical-nav();
-
             // Folded state, both routes; the hover variant folds only while
             // not hovered and not holding visible keyboard focus. Plain
             // :focus-within would keep the sidebar stuck open after a mouse
             // click, because the clicked link keeps focus.
-            &:is(.navbar-folded, .navbar-folded-hover:not(:hover):not(:has(:focus-visible))),
-            :where([data-bs-sidebar='folded']) &,
-            :where([data-bs-sidebar='folded-hover']) &:not(:hover):not(:has(:focus-visible)) {
+            // One :is() instead of a selector list — the mixin's rules are long
+            // and a list would repeat each of them three times.
+            &:is(.navbar-folded, .navbar-folded-hover:not(:hover):not(:has(:focus-visible)), [data-bs-sidebar='folded'] *, [data-bs-sidebar='folded-hover'] :not(:hover):not(:has(:focus-visible))) {
               @include navbar-vertical-folded();
             }