Mirrors/tabler
1
0 Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-10-12 05:06:55 +04:00
Code Issues Projects Releases Wiki Activity

Emit the vertical navbar styles once instead of per breakpoint (#3139)

Browse Source
This commit is contained in:
Paweł Kuna authored and GitHub committed 2026-09-23 13:20:14 +02:00
1 parent e7b03a6341
commit 04602910c4
2 files changed
+18 -10
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.changeset/navbar-vertical-smaller-css.md
+5
View File
@@ -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`.
core/scss/layout/_navbar.scss
+13 -10
View File
@@ -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 { .navbar-expand {
@each $breakpoint in map.keys($grid-breakpoints) { @each $breakpoint in map.keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints); $next: breakpoint-next($breakpoint, $grid-breakpoints);
@@ -760,11 +770,6 @@ Navbar vertical
flex-grow: 1; flex-grow: 1;
flex-direction: column; flex-direction: column;
min-height: auto; 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 // Bottom-pinned footer area, e.g. a user block. Sits after the
@@ -818,15 +823,13 @@ Navbar vertical
padding-inline-end: var(--sidebar-width); padding-inline-end: var(--sidebar-width);
} }
@include navbar-vertical-nav();
// Folded state, both routes; the hover variant folds only while // Folded state, both routes; the hover variant folds only while
// not hovered and not holding visible keyboard focus. Plain // not hovered and not holding visible keyboard focus. Plain
// :focus-within would keep the sidebar stuck open after a mouse // :focus-within would keep the sidebar stuck open after a mouse
// click, because the clicked link keeps focus. // click, because the clicked link keeps focus.
&:is(.navbar-folded, .navbar-folded-hover:not(:hover):not(:has(:focus-visible))), // One :is() instead of a selector list — the mixin's rules are long
:where([data-bs-sidebar='folded']) &, // and a list would repeat each of them three times.
:where([data-bs-sidebar='folded-hover']) &:not(:hover):not(:has(:focus-visible)) { &: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(); @include navbar-vertical-folded();
} }