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