Merge branch 'dev-navbar' of https://github.com/tabler/tabler into dev

src/pages/_includes/layout/navbar-menu.html

@@ -11,8 +11,8 @@
 <ul class="navbar-nav{% if include.class %} {{ include.class }}{% endif %}">
 	{% for level-1 in menu %}
 		{% assign icon = level-1[1].icon %}
-		<li class="nav-item{% if level-1[0] == current-page[0] or level-1[1].active %} active{% endif %}{% if level-1[1].children %} dropdown{% endif %}">
-			<a class="nav-link{% if level-1[1].children %} dropdown-toggle{% endif %}{% if level-1[1].disabled %} disabled{% endif %}" {% if level-1[1].children %}href="#navbar-{{ level-1[0] }}" data-bs-toggle="dropdown" data-bs-auto-close="{% if include.keep-open %}false{% else %}outside{% endif %}" role="button" aria-expanded="{% if include.auto-open and level-1[0] == current-page[0] %}true{% else %}false{% endif %}" {% else %}href="{{ site.base }}/{{ level-1[1].url }}" {% endif %}>
+		<li class="nav-item{% if level-1[1].children %} dropdown{% endif %}">
+			<a class="nav-link{% if level-1[1].children %} dropdown-toggle{% endif %}{% if level-1[1].disabled %} disabled{% endif %}{% if level-1[0] == current-page[0] or level-1[1].active %} active{% endif %}" {% if level-1[1].children %}href="#navbar-{{ level-1[0] }}" data-bs-toggle="dropdown" data-bs-auto-close="{% if include.keep-open %}false{% else %}outside{% endif %}" role="button" aria-expanded="{% if include.auto-open and level-1[0] == current-page[0] %}true{% else %}false{% endif %}" {% else %}href="{{ site.base }}/{{ level-1[1].url }}" {% endif %}>
 				{% unless hide-icons %}
 				<span class="nav-link-icon d-md-none d-lg-inline-block">{% include ui/icon.html icon=icon %}</span>
 				{% endunless %}

src/scss/_variables-dark.scss

@@ -9,9 +9,9 @@ $border-dark-color-dark: lighten($dark, 4%) !default;
 $border-color-active-dark: lighten($dark, 12%) !default;
 
 //new bootsrap variables
-$body-color-dark: $light !default;
+$body-color-dark: rgba(255, 255, 255, .8) !default;
 $body-emphasis-color-dark: $white !default;
 
 $code-color-dark: var(--#{$prefix}gray-300) !default;
-$text-secondary-dark: rgba(153, 159, 164, 1) !default;
+$body-secondary-color-dark: rgba(153, 159, 164, 1) !default;
  

src/scss/_variables.scss

@@ -61,6 +61,7 @@ $font-weight-bold: 600 !default;
 
 $headings-font-weight: var(--#{$prefix}font-weight-bold) !default;
 $headings-margin-bottom: var(--#{$prefix}spacer) !default;
+$headings-color: var(--#{$prefix}body-color) color !default;
 
 $font-weights: (
   light: $font-weight-light,
@@ -179,19 +180,6 @@ $green: #2fb344 !default;
 $teal: #0ca678 !default;
 $cyan: #17a2b8 !default;
 
-$color-blue: #0054a6;
-$color-azure: #3586c9;
-$color-indigo: #4263eb;
-$color-purple: #ae3ec9;
-$color-pink: #d6336c;
-$color-red: #e73f3f;
-$color-orange: #f76707;
-$color-yellow: #f59f00;
-$color-lime: #74b816;
-$color-green: #2fb344;
-$color-teal: #0ca678;
-$color-cyan: #17a2b8;
-
 $text-secondary: $gray-600 !default;
 $text-secondary-light: $gray-500 !default;
 $text-secondary-dark: $gray-700 !default;
@@ -202,21 +190,14 @@ $border-color-translucent: rgba(4, 32, 69, 0.14);
 $border-dark-color: $gray-400 !default;
 $border-dark-color-translucent: rgba(4, 32, 69, 0.27);
 
-$border-active-color: mix(
-  $text-secondary,
-  #ffffff,
-  percentage($border-active-opacity)
-) !default;
-$border-active-color-translucent: rgba(
-  $text-secondary,
-  $border-active-opacity
-) !default;
+$border-active-color: mix($text-secondary, #ffffff, percentage($border-active-opacity)) !default;
+$border-active-color-translucent: rgba($text-secondary, $border-active-opacity) !default;
 
 $active-bg: rgba(var(--#{$prefix}primary-rgb), 0.04) !default;
 $active-color: var(--#{$prefix}primary) !default;
 $active-border-color: var(--#{$prefix}primary) !default;
 
-$hover-bg: rgba(var(--#{$prefix}text-secondary-rgb), 0.04) !default;
+$hover-bg: rgba(var(--#{$prefix}secondary-rgb), 0.04) !default;
 
 $disabled-bg: var(--#{$prefix}bg-surface-secondary) !default;
 $disabled-color: var(--#{$prefix}gray-300) !default;
@@ -288,10 +269,7 @@ $gray-colors: (
   gray-900: $gray-900,
 ) !default;
 
-$theme-colors: map-merge(
-  $theme-colors,
-  map-merge($extra-colors, $social-colors)
-);
+$theme-colors: map-merge($theme-colors, map-merge($extra-colors, $social-colors));
 
 // Borders
 $border-width: 1px !default;
@@ -319,9 +297,8 @@ $kbd-padding-x: 0.5rem !default;
 $kbd-padding-y: 0.25rem !default;
 $kbd-font-weight: var(--#{$prefix}font-weight-medium) !default;
 $kbd-font-size: var(--#{$prefix}font-size-h5) !default;
-$kbd-border: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
-  var(--#{$prefix}border-color) !default;
-$kbd-color: var(--#{$prefix}text-secondary-dark) !default;
+$kbd-border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !default;
+$kbd-color: var(--#{$prefix}secondary-dark) !default;
 $kbd-bg: var(--#{$prefix}code-bg) !default;
 $kbd-border-radius: var(--#{$prefix}border-radius) !default;
 
@@ -338,8 +315,8 @@ $avatar-sizes: (
 ) !default;
 $avatar-border-radius: var(--#{$prefix}border-radius) !default;
 $avatar-font-size: $h4-font-size !default;
-$avatar-box-shadow: var(--#{$prefix}box-shadow-border) !default;
 $avatar-list-spacing: -.5;
+$avatar-box-shadow: var(--#{$prefix}box-shadow-border) !default;
 
 $link-decoration: none !default;
 $link-hover-decoration: underline !default;
@@ -353,13 +330,12 @@ $caret-width: 0.36em !default;
 $caret-spacing: 0.4em !default;
 
 //Sizing
-$page-padding: var(--#{$prefix}spacer-3) !default;
-$page-padding-sm: var(--#{$prefix}spacer-2) !default;
+$page-padding-x: var(--#{$prefix}spacer-3) !default;
 $page-padding-y: var(--#{$prefix}spacer-4) !default;
 
 // Sizing
-$container-padding-x: calc(var(--#{$prefix}page-padding) * 2) !default;
-$grid-gutter-width: var(--#{$prefix}page-padding) !default;
+$container-padding-x: calc(var(--#{$prefix}page-padding-x) * 2) !default;
+$grid-gutter-width: var(--#{$prefix}page-padding-x) !default;
 
 // Grid
 $grid-gutter-width: 1rem !default;
@@ -395,11 +371,7 @@ $spacers: (
   8: $spacer-8,
 ) !default;
 
-$negative-spacers: if(
-  $enable-negative-margins,
-  negativify-map($spacers),
-  null
-) !default;
+$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
 
 // Sizes
 $size-spacers: (
@@ -438,6 +410,7 @@ $aspect-ratios: (
 
 // Shadows
 $box-shadow: rgba(var(--#{$prefix}body-color-rgb), 0.04) 0 2px 4px 0 !default;
+$box-shadow-border: inset 0 0 0 1px var(--#{$prefix}border-color-translucent) !default;
 $box-shadow-transparent: 0 0 0 0 transparent !default;
 $box-shadow-border: inset 0 0 0 1px var(--#{$prefix}border-color-translucent) !default;
 $box-shadow-input: 0 1px 1px rgba(var(--#{$prefix}body-color-rgb), 0.06) !default;
@@ -469,11 +442,7 @@ $focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color
 $transition-time: 0.3s !default;
 
 // Overlay
-$overlay-gradient: linear-gradient(
-  180deg,
-  rgba(0, 0, 0, 0) 0%,
-  rgba(0, 0, 0, 0.6) 100%
-) !default;
+$overlay-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%) !default;
 
 // Accordion
 $accordion-bg: transparent !default;
@@ -581,7 +550,7 @@ $card-ribbon-font-size: $h6-font-size !default;
 
 $card-header-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 
-$cards-grid-gap: var(--#{$prefix}page-padding) !default;
+$cards-grid-gap: var(--#{$prefix}page-padding-x) !default;
 $cards-grid-breakpoint: lg !default;
 
 // Carousel
@@ -650,10 +619,7 @@ $modal-fade-transform: translate(0, -1rem) !default;
 $modal-content-border-color: transparent !default;
 $modal-content-bg: var(--#{$prefix}bg-surface) !default;
 $modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
-$modal-content-inner-border-radius: subtract(
-  var(--#{$prefix}modal-border-radius),
-  1px
-) !default;
+$modal-content-inner-border-radius: subtract(var(--#{$prefix}modal-border-radius), 1px) !default;
 
 $modal-header-padding: 1.5rem !default;
 $modal-header-height: 3.5rem !default;
@@ -679,11 +645,13 @@ $nav-link-padding-x: 0.75rem !default;
 $nav-link-color: var(--#{$prefix}secondary) !default;
 $nav-link-disabled-color: var(--#{$prefix}disabled-color) !default;
 $nav-link-icon-size: $icon-size !default;
-$nav-link-icon-color: var(--#{$prefix}icon-color) !default;
+$nav-link-icon-color: inherit !default;
 
 $nav-pills-link-active-color: var(--#{$prefix}primary) !default;
 $nav-pills-link-active-bg: var(--#{$prefix}active-bg) !default;
 
+$nav-underline-link-active-color: var(--#{$prefix}primary) !default;
+
 $nav-bordered-border-color: var(--#{$prefix}border-color) !default;
 $nav-bordered-border-width: var(--#{$prefix}border-width) !default;
 $nav-bordered-link-active-color: var(--#{$prefix}primary) !default;
@@ -693,8 +661,7 @@ $nav-bordered-margin-x: 1.25rem !default;
 
 $nav-tabs-border-color: var(--#{$prefix}border-color) !default;
 $nav-tabs-border-radius: var(--#{$prefix}border-radius) !default;
-$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color
-  $nav-tabs-border-color !default;
+$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color $nav-tabs-border-color !default;
 $nav-tabs-link-active-border-color: $nav-tabs-link-hover-border-color !default;
 $nav-tabs-link-active-color: var(--#{$prefix}body-color) !default;
 $nav-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
@@ -703,14 +670,17 @@ $nav-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 $navbar-height: 3.5rem !default;
 $navbar-padding-y: 0.25rem !default;
 
-$navbar-border-width: var(--#{$prefix}border-width) !default;
-$navbar-border-color: var(--#{$prefix}border-color) !default;
-
-$navbar-light-color: var(--#{$prefix}body-color) !default;
+$navbar-light-bg: var(--#{$prefix}bg-surface) !default;
+$navbar-light-color: var(--#{$prefix}secondary) !default;
 $navbar-light-brand-color: var(--#{$prefix}body-color) !default;
-$navbar-light-active-color: var(--#{$prefix}body-color) color !default;
+$navbar-light-border-color: var(--#{$prefix}border-color) !default;
+$navbar-light-border-width: var(--#{$prefix}border-width) !default;
+$navbar-light-active-color: var(--#{$prefix}body-color) !default;
 $navbar-light-disabled-color: var(--#{$prefix}disabled-color) !default;
-$navbar-light-active-bg: rgba(0, 0, 0, 0.06) !default;
+$navbar-light-hover-bg: $hover-bg !default;
+$navbar-light-active-bg: null !default;
+$navbar-light-active-border-color: var(--#{$prefix}primary) !default;
+$navbar-light-active-color: red !default;
 
 $navbar-dark-color: rgba($white, $text-secondary-opacity) !default;
 $navbar-dark-brand-color: $white !default;
@@ -731,9 +701,10 @@ $navbar-toggler-animation-time: 0.2s !default;
 $navbar-toggler-focus-width: 0 !default;
 $navbar-overlap-height: 9rem !default;
 
-$navbar-nav-link-padding-x: $nav-link-padding-x !default;
-
-$navbar-active-border-color: var(--#{$prefix}primary) !default;
+// Navbar nav
+$navbar-nav-gap: 0.25rem !default;
+$navbar-nav-link-padding-x: 0.5rem !default;
+$navbar-nav-link-padding-y: 0.5rem !default;
 
 // Sidebar
 $sidebar-width: 15rem !default;
@@ -798,9 +769,7 @@ $table-th-color: var(--#{$prefix}secondary) !default;
 $table-th-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 $table-striped-order: even !default;
 $table-striped-bg: var(--#{$prefix}bg-surface-tertiary) !default;
-$table-group-separator-color: var(
-  --#{$prefix}border-color-translucent
-) !default;
+$table-group-separator-color: var(--#{$prefix}border-color-translucent) !default;
 
 $table-sort-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'><path d='M5 7l3 -3l3 3'/><path d='M5 10l3 3l3 -3'/></svg>") !default;
 $table-sort-asc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 7l3 3l3 -3'/></svg>") !default;
@@ -833,9 +802,7 @@ $list-group-active-color: inherit !default;
 $input-bg: var(--#{$prefix}bg-forms) !default;
 $input-disabled-bg: $disabled-bg !default;
 $input-border-color: var(--#{$prefix}border-color) !default;
-$input-border-color-translucent: var(
-  --#{$prefix}border-color-translucent
-) !default;
+$input-border-color-translucent: var(--#{$prefix}border-color-translucent) !default;
 $input-placeholder-color: $text-secondary-light !default;
 
 $input-group-addon-bg: var(--#{$prefix}bg-surface-secondary) !default;
@@ -844,13 +811,12 @@ $input-group-addon-color: var(--#{$prefix}secondary) !default;
 $input-border-radius: var(--#{$prefix}border-radius) !default;
 
 // Forms
-$form-check-margin-bottom: .75rem !default;
+$form-check-margin-bottom: 0.75rem !default;
 $form-check-padding-start: 2rem !default;
 
 $form-check-input-width: 1.25rem !default;
 $form-check-input-bg: var(--#{$prefix}bg-forms) !default;
-$form-check-input-border: var(--#{$prefix}border-width)
-  var(--#{$prefix}border-style) $input-border-color-translucent !default;
+$form-check-input-border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color-translucent !default;
 $form-check-input-border-radius: var(--#{$prefix}border-radius) !default;
 $form-check-input-box-shadow: $input-box-shadow !default;
 

src/scss/layout/_navbar.scss

@@ -1,12 +1,68 @@
+@mixin navbar-vertical {
+  width: $sidebar-width;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: $zindex-fixed;
+  align-items: flex-start;
+  overflow-y: scroll;
+  padding: 0;
+  @include transition(transform $transition-time);
+
+  &.navbar-right {
+    left: auto;
+    right: 0;
+  }
+
+  .navbar-brand {
+    padding: (($navbar-height - $navbar-brand-image-height) * 0.5) 0;
+    justify-content: center;
+  }
+
+  .navbar-collapse {
+    align-items: stretch;
+  }
+
+  .navbar-nav {
+    flex-direction: column;
+    flex-grow: 1;
+    min-height: auto;
+
+    .nav-link {
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+    }
+  }
+
+  > [class^="container"] {
+    flex-direction: column;
+    align-items: stretch;
+    min-height: 100%;
+    justify-content: flex-start;
+    padding: 0;
+  }
+
+  ~ .page {
+    padding-left: $sidebar-width;
+
+    [class^="container"] {
+      padding-left: 1.5rem;
+      padding-right: 1.5rem;
+    }
+  }
 
-@mixin navbar-vertical-nav {
+  &.navbar-right ~ .page {
+    padding-left: 0;
+    padding-right: $sidebar-width;
+  }
+  
   .navbar-collapse {
     flex-direction: column;
 
     [class^="container"] {
       flex-direction: column;
       align-items: stretch;
-      padding: 0;
     }
 
     .navbar-nav {
@@ -14,7 +70,7 @@
       margin-right: 0;
 
       .nav-link {
-        padding: .5rem calc(#{$container-padding-x} / 2);
+        padding: 0.5rem calc(#{$container-padding-x} / 2);
         justify-content: flex-start;
       }
     }
@@ -73,14 +129,16 @@
 Navbar
  */
 .navbar {
-  --#{$prefix}navbar-bg: var(--#{$prefix}bg-surface);
-  --#{$prefix}navbar-border-width: #{$navbar-border-width};
-  --#{$prefix}navbar-active-border-color: #{$navbar-active-border-color};
+  --#{$prefix}navbar-bg: #{$navbar-light-bg};
+  --#{$prefix}navbar-border-width: #{$navbar-light-border-width};
+  --#{$prefix}navbar-active-border-color: #{$navbar-light-active-border-color};
   --#{$prefix}navbar-active-bg: #{$navbar-light-active-bg};
-  --#{$prefix}navbar-color: var(--#{$prefix}body-color);
-  --#{$prefix}navbar-border-color: #{$navbar-border-color};
+  --#{$prefix}navbar-hover-bg: #{$navbar-light-hover-bg};
+  --#{$prefix}navbar-border-color: #{$navbar-light-border-color};
+  --#{$prefix}navbar-nav-gap: #{$navbar-nav-gap};
+  --#{$prefix}navbar-height: #{$navbar-height};
   align-items: stretch;
-  min-height: $navbar-height;
+  min-height: var(--#{$prefix}navbar-height);
   box-shadow: inset 0 calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 var(--#{$prefix}navbar-border-color);
   background: var(--#{$prefix}navbar-bg);
   color: var(--#{$prefix}navbar-color);
@@ -97,30 +155,47 @@ Navbar
     position: absolute;
     z-index: $zindex-fixed;
   }
-
-  .navbar-nav {
-    min-height: subtract($navbar-height, 2 * $navbar-padding-y);
-
-    .nav-link {
-      position: relative;
-      min-width: 2rem;
-      min-height: 2rem;
-      justify-content: center;
-      border-radius: var(--#{$prefix}border-radius);
-
-      .badge {
-        position: absolute;
-        top: .375rem;
-        right: .375rem;
-        transform: translate(50%, -50%);
-      }
-    }
-  }
 }
 
+/**
+Navbar nav
+*/
 .navbar-nav {
+  gap: var(--#{$prefix}navbar-nav-gap);
   margin: 0;
   padding: 0;
+  align-items: stretch;
+
+  .nav-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .nav-link {
+    transition: $transition-time background-color;
+    position: relative;
+    min-width: 2rem;
+    min-height: 2rem;
+    border-radius: var(--#{$prefix}border-radius);
+
+    .badge {
+      position: absolute;
+      top: 0.375rem;
+      right: 0.375rem;
+      transform: translate(50%, -50%);
+    }
+
+    &.active {
+      background-color: var(--#{$prefix}navbar-active-bg);
+    }
+
+    &:hover,
+    &:focus,
+    &.show {
+      background-color: var(--#{$prefix}navbar-hover-bg);
+    }
+  }
 }
 
 .navbar-expand {
@@ -129,9 +204,9 @@ Navbar
     $infix: breakpoint-infix($next, $grid-breakpoints);
 
     &#{$infix} {
-      @include media-breakpoint-down(breakpoint-next($breakpoint)) {
-        @include navbar-vertical-nav;
-      }
+      // @include media-breakpoint-down(breakpoint-next($breakpoint)) {
+      //   @include navbar-vertical;
+      // }
 
       @include media-breakpoint-up($next) {
         .navbar-collapse {
@@ -139,40 +214,56 @@ Navbar
           flex: 1 1 auto;
         }
 
-        .nav-item.active {
-          position: relative;
-
-          &:after {
-            content: "";
-            position: absolute;
-            left: 0;
-            right: 0;
-            bottom: -.25rem;
-            border: 0 var(--#{$prefix}border-style) var(--#{$prefix}navbar-active-border-color);
-            border-bottom-width: 2px;
-          }
-        }
-
         &.navbar-vertical {
           box-shadow: inset calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 0 var(--#{$prefix}navbar-border-color);
 
           &.navbar-right {
             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-right {
+            ~ .navbar,
+            ~ .page-wrapper {
+              margin-left: 0;
+              margin-right: $sidebar-width;
+            }
+          }
         }
 
-        &.navbar-vertical.navbar-right {
-          ~ .navbar,
-          ~ .page-wrapper {
-            margin-left: 0;
-            margin-right: $sidebar-width;
+        .navbar-nav {
+          .nav-link {
+            &:before {
+              content: "";
+              height: 100%;
+              left: 50%;
+              min-height: var(--#{$prefix}navbar-height);
+              position: absolute;
+              top: 50%;
+              transform: translateX(-50%) translateY(-50%);
+              width: 100%;
+            }
+
+            &.active {
+              background-color: var(--#{$prefix}navbar-active-bg);
+
+              &:after {
+                content: "";
+                background: var(--#{$prefix}navbar-active-border-color);
+                border-radius: var(--#{$prefix}border-radius);
+                bottom: calc(50% - calc(var(--tblr-navbar-height) / 2));
+                height: 2px;
+                position: absolute;
+                right: 50%;
+                transform: translate(50%, -50%);
+                width: 100%;
+                z-index: 1;
+              }
+            }
           }
         }
       }
@@ -215,7 +306,12 @@ Navbar toggler
   width: 1.25em;
   background: currentColor;
   border-radius: 10px;
-  @include transition(top $navbar-toggler-animation-time $navbar-toggler-animation-time, bottom $navbar-toggler-animation-time $navbar-toggler-animation-time, transform $navbar-toggler-animation-time, opacity 0s $navbar-toggler-animation-time);
+  @include transition(
+    top $navbar-toggler-animation-time $navbar-toggler-animation-time,
+    bottom $navbar-toggler-animation-time $navbar-toggler-animation-time,
+    transform $navbar-toggler-animation-time,
+    opacity 0s $navbar-toggler-animation-time
+  );
   position: relative;
 
   &:before,
@@ -232,11 +328,11 @@ Navbar toggler
   }
 
   &:before {
-    top: -.45em;
+    top: -0.45em;
   }
 
   &:after {
-    bottom: -.45em;
+    bottom: -0.45em;
   }
 
   .navbar-toggler[aria-expanded="true"] & {
@@ -263,19 +359,6 @@ Navbar transparent
   background: transparent !important;
 }
 
-/**
-Navbar nav
- */
-.navbar-nav {
-  align-items: stretch;
-
-  .nav-item {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-}
-
 /**
 Navbar side
  */
@@ -299,65 +382,7 @@ Navbar vertical
 
         &#{$infix} {
           @include media-breakpoint-up($next) {
-            width: $sidebar-width;
-            position: fixed;
-            top: 0;
-            left: 0;
-            bottom: 0;
-            z-index: $zindex-fixed;
-            align-items: flex-start;
-            @include transition(transform $transition-time);
-            overflow-y: scroll;
-            padding: 0;
-
-            &.navbar-right {
-              left: auto;
-              right: 0;
-            }
-
-            .navbar-brand {
-              padding: (($navbar-height - $navbar-brand-image-height) * .5) 0;
-              justify-content: center;
-            }
-
-            .navbar-collapse {
-              align-items: stretch;
-            }
-
-            .navbar-nav {
-              flex-direction: column;
-              flex-grow: 1;
-              min-height: auto;
-
-              .nav-link {
-                padding-top: .5rem;
-                padding-bottom: .5rem;
-              }
-            }
-
-            > [class^="container"] {
-              flex-direction: column;
-              align-items: stretch;
-              min-height: 100%;
-              justify-content: flex-start;
-              padding: 0;
-            }
-
-            ~ .page {
-              padding-left: $sidebar-width;
-
-              [class^="container"] {
-                padding-left: 1.5rem;
-                padding-right: 1.5rem;
-              }
-            }
-
-            &.navbar-right ~ .page {
-              padding-left: 0;
-              padding-right: $sidebar-width;
-            }
-
-            @include navbar-vertical-nav;
+            @include navbar-vertical;
           }
         }
       }
@@ -365,7 +390,6 @@ Navbar vertical
   }
 }
 
-
 .navbar-overlap {
   &:after {
     content: "";
@@ -378,4 +402,4 @@ Navbar vertical
     z-index: -1;
     box-shadow: inherit;
   }
-}
+}

src/scss/layout/_page.scss

@@ -38,7 +38,7 @@
 .page-body-card {
   background: var(--#{$prefix}bg-surface);
   border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $card-border-color;
-  padding: var(--#{$prefix}page-padding) 0;
+  padding: var(--#{$prefix}page-padding-x) 0;
   margin-bottom: 0;
   flex: 1;
 

src/scss/layout/_root.scss

@@ -48,11 +48,8 @@
   --#{$prefix}dark-mode-border-color-active: #{$border-color-active-dark};
   --#{$prefix}dark-mode-border-dark-color: #{$border-dark-color-dark};
 
-  --#{$prefix}page-padding: #{$page-padding};
+  --#{$prefix}page-padding-x: #{$page-padding-x};
   --#{$prefix}page-padding-y: #{$page-padding-y};
-  @include media-breakpoint-down($cards-grid-breakpoint) {
-    --#{$prefix}page-padding: #{$page-padding-sm};
-  }
 
   @each $name, $value in $font-weights {
     --#{$prefix}font-weight-#{$name}: #{$value};

src/scss/ui/_timeline.scss

@@ -15,14 +15,14 @@
   position: relative;
 
   &:not(:last-child) {
-    margin-bottom: var(--#{$prefix}page-padding);
+    margin-bottom: var(--#{$prefix}page-padding-x);
 
     &:before {
       content: "";
       position: absolute;
       top: var(--#{$prefix}timeline-icon-size);
       left: calc(var(--#{$prefix}timeline-icon-size) / 2);
-      bottom: calc(-1 * var(--#{$prefix}page-padding));
+      bottom: calc(-1 * var(--#{$prefix}page-padding-x));
       width: var(--#{$prefix}border-width);
       background-color: var(--#{$prefix}border-color);
       border-radius: var(--#{$prefix}border-radius);
@@ -44,7 +44,7 @@
 }
 
 .timeline-event-card {
-  margin-left: calc(var(--#{$prefix}timeline-icon-size, $avatar-size) + var(--#{$prefix}page-padding));
+  margin-left: calc(var(--#{$prefix}timeline-icon-size, $avatar-size) + var(--#{$prefix}page-padding-x));
 }
 
 //