From 1ca12745950e03bb8c947ec8acf1cde9d1e2a704 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
 <1282324+codecalm@users.noreply.github.com>
Date: Wed, 7 Jun 2023 21:22:28 +0200
Subject: [PATCH] Revert "Navbar unify" (#1617)

---
 src/pages/_includes/layout/navbar-menu.html |   4 +-
 src/scss/_variables-dark.scss               |   4 +-
 src/scss/_variables.scss                    | 108 +++++---
 src/scss/layout/_navbar.scss                | 282 +++++++++-----------
 src/scss/layout/_page.scss                  |   2 +-
 src/scss/layout/_root.scss                  |   5 +-
 src/scss/ui/_timeline.scss                  |   6 +-
 7 files changed, 212 insertions(+), 199 deletions(-)

diff --git a/src/pages/_includes/layout/navbar-menu.html b/src/pages/_includes/layout/navbar-menu.html
index 8c4a62405..adaa668d0 100644
--- a/src/pages/_includes/layout/navbar-menu.html
+++ b/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[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 %}>
+		<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 %}>
 				{% unless hide-icons %}
 				<span class="nav-link-icon d-md-none d-lg-inline-block">{% include ui/icon.html icon=icon %}</span>
 				{% endunless %}
diff --git a/src/scss/_variables-dark.scss b/src/scss/_variables-dark.scss
index 3b8a5dbaf..a8fd38b29 100644
--- a/src/scss/_variables-dark.scss
+++ b/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: rgba(255, 255, 255, .8) !default;
+$body-color-dark: $light !default;
 $body-emphasis-color-dark: $white !default;
 
 $code-color-dark: var(--#{$prefix}gray-300) !default;
-$body-secondary-color-dark: rgba(153, 159, 164, 1) !default;
+$text-secondary-dark: rgba(153, 159, 164, 1) !default;
  
\ No newline at end of file
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index e4016a3de..bbe01523d 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -61,7 +61,6 @@ $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,
@@ -180,6 +179,19 @@ $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;
@@ -190,14 +202,21 @@ $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}secondary-rgb), 0.04) !default;
+$hover-bg: rgba(var(--#{$prefix}text-secondary-rgb), 0.04) !default;
 
 $disabled-bg: var(--#{$prefix}bg-surface-secondary) !default;
 $disabled-color: var(--#{$prefix}gray-300) !default;
@@ -269,7 +288,10 @@ $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;
@@ -297,8 +319,9 @@ $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}secondary-dark) !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-bg: var(--#{$prefix}code-bg) !default;
 $kbd-border-radius: var(--#{$prefix}border-radius) !default;
 
@@ -315,8 +338,8 @@ $avatar-sizes: (
 ) !default;
 $avatar-border-radius: var(--#{$prefix}border-radius) !default;
 $avatar-font-size: $h4-font-size !default;
-$avatar-list-spacing: -.5;
 $avatar-box-shadow: var(--#{$prefix}box-shadow-border) !default;
+$avatar-list-spacing: -.5;
 
 $link-decoration: none !default;
 $link-hover-decoration: underline !default;
@@ -330,12 +353,13 @@ $caret-width: 0.36em !default;
 $caret-spacing: 0.4em !default;
 
 //Sizing
-$page-padding-x: var(--#{$prefix}spacer-3) !default;
+$page-padding: var(--#{$prefix}spacer-3) !default;
+$page-padding-sm: var(--#{$prefix}spacer-2) !default;
 $page-padding-y: var(--#{$prefix}spacer-4) !default;
 
 // Sizing
-$container-padding-x: calc(var(--#{$prefix}page-padding-x) * 2) !default;
-$grid-gutter-width: var(--#{$prefix}page-padding-x) !default;
+$container-padding-x: calc(var(--#{$prefix}page-padding) * 2) !default;
+$grid-gutter-width: var(--#{$prefix}page-padding) !default;
 
 // Grid
 $grid-gutter-width: 1rem !default;
@@ -371,7 +395,11 @@ $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: (
@@ -410,7 +438,6 @@ $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;
@@ -442,7 +469,11 @@ $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;
@@ -550,7 +581,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-x) !default;
+$cards-grid-gap: var(--#{$prefix}page-padding) !default;
 $cards-grid-breakpoint: lg !default;
 
 // Carousel
@@ -619,7 +650,10 @@ $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;
@@ -645,13 +679,11 @@ $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: inherit !default;
+$nav-link-icon-color: var(--#{$prefix}icon-color) !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;
@@ -661,7 +693,8 @@ $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;
@@ -670,17 +703,14 @@ $nav-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 $navbar-height: 3.5rem !default;
 $navbar-padding-y: 0.25rem !default;
 
-$navbar-light-bg: var(--#{$prefix}bg-surface) !default;
-$navbar-light-color: var(--#{$prefix}secondary) !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-brand-color: var(--#{$prefix}body-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-active-color: var(--#{$prefix}body-color) color !default;
 $navbar-light-disabled-color: var(--#{$prefix}disabled-color) !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-light-active-bg: rgba(0, 0, 0, 0.06) !default;
 
 $navbar-dark-color: rgba($white, $text-secondary-opacity) !default;
 $navbar-dark-brand-color: $white !default;
@@ -701,10 +731,9 @@ $navbar-toggler-animation-time: 0.2s !default;
 $navbar-toggler-focus-width: 0 !default;
 $navbar-overlap-height: 9rem !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;
+$navbar-nav-link-padding-x: $nav-link-padding-x !default;
+
+$navbar-active-border-color: var(--#{$prefix}primary) !default;
 
 // Sidebar
 $sidebar-width: 15rem !default;
@@ -769,7 +798,9 @@ $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;
@@ -802,7 +833,9 @@ $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;
@@ -811,12 +844,13 @@ $input-group-addon-color: var(--#{$prefix}secondary) !default;
 $input-border-radius: var(--#{$prefix}border-radius) !default;
 
 // Forms
-$form-check-margin-bottom: 0.75rem !default;
+$form-check-margin-bottom: .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;
 
diff --git a/src/scss/layout/_navbar.scss b/src/scss/layout/_navbar.scss
index bdfc5b222..d3f45d5a1 100644
--- a/src/scss/layout/_navbar.scss
+++ b/src/scss/layout/_navbar.scss
@@ -1,68 +1,12 @@
-@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;
-    }
-  }
-
-  &.navbar-right ~ .page {
-    padding-left: 0;
-    padding-right: $sidebar-width;
-  }
-  
+@mixin navbar-vertical-nav {
   .navbar-collapse {
     flex-direction: column;
 
     [class^="container"] {
       flex-direction: column;
       align-items: stretch;
+      padding: 0;
     }
 
     .navbar-nav {
@@ -70,7 +14,7 @@
       margin-right: 0;
 
       .nav-link {
-        padding: 0.5rem calc(#{$container-padding-x} / 2);
+        padding: .5rem calc(#{$container-padding-x} / 2);
         justify-content: flex-start;
       }
     }
@@ -129,16 +73,14 @@
 Navbar
  */
 .navbar {
-  --#{$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-bg: var(--#{$prefix}bg-surface);
+  --#{$prefix}navbar-border-width: #{$navbar-border-width};
+  --#{$prefix}navbar-active-border-color: #{$navbar-active-border-color};
   --#{$prefix}navbar-active-bg: #{$navbar-light-active-bg};
-  --#{$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};
+  --#{$prefix}navbar-color: var(--#{$prefix}body-color);
+  --#{$prefix}navbar-border-color: #{$navbar-border-color};
   align-items: stretch;
-  min-height: var(--#{$prefix}navbar-height);
+  min-height: $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);
@@ -155,47 +97,30 @@ 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 {
@@ -204,9 +129,9 @@ Navbar nav
     $infix: breakpoint-infix($next, $grid-breakpoints);
 
     &#{$infix} {
-      // @include media-breakpoint-down(breakpoint-next($breakpoint)) {
-      //   @include navbar-vertical;
-      // }
+      @include media-breakpoint-down(breakpoint-next($breakpoint)) {
+        @include navbar-vertical-nav;
+      }
 
       @include media-breakpoint-up($next) {
         .navbar-collapse {
@@ -214,56 +139,40 @@ Navbar nav
           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-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;
-              }
-            }
+        &.navbar-vertical.navbar-right {
+          ~ .navbar,
+          ~ .page-wrapper {
+            margin-left: 0;
+            margin-right: $sidebar-width;
           }
         }
       }
@@ -306,12 +215,7 @@ 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,
@@ -328,11 +232,11 @@ Navbar toggler
   }
 
   &:before {
-    top: -0.45em;
+    top: -.45em;
   }
 
   &:after {
-    bottom: -0.45em;
+    bottom: -.45em;
   }
 
   .navbar-toggler[aria-expanded="true"] & {
@@ -359,6 +263,19 @@ Navbar transparent
   background: transparent !important;
 }
 
+/**
+Navbar nav
+ */
+.navbar-nav {
+  align-items: stretch;
+
+  .nav-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+
 /**
 Navbar side
  */
@@ -382,7 +299,65 @@ Navbar vertical
 
         &#{$infix} {
           @include media-breakpoint-up($next) {
-            @include navbar-vertical;
+            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;
           }
         }
       }
@@ -390,6 +365,7 @@ Navbar vertical
   }
 }
 
+
 .navbar-overlap {
   &:after {
     content: "";
@@ -402,4 +378,4 @@ Navbar vertical
     z-index: -1;
     box-shadow: inherit;
   }
-}
+}
\ No newline at end of file
diff --git a/src/scss/layout/_page.scss b/src/scss/layout/_page.scss
index aeb7ebd8b..27912f44f 100644
--- a/src/scss/layout/_page.scss
+++ b/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-x) 0;
+  padding: var(--#{$prefix}page-padding) 0;
   margin-bottom: 0;
   flex: 1;
 
diff --git a/src/scss/layout/_root.scss b/src/scss/layout/_root.scss
index 6f2cd0cdb..0fa2b9a24 100644
--- a/src/scss/layout/_root.scss
+++ b/src/scss/layout/_root.scss
@@ -48,8 +48,11 @@
   --#{$prefix}dark-mode-border-color-active: #{$border-color-active-dark};
   --#{$prefix}dark-mode-border-dark-color: #{$border-dark-color-dark};
 
-  --#{$prefix}page-padding-x: #{$page-padding-x};
+  --#{$prefix}page-padding: #{$page-padding};
   --#{$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};
diff --git a/src/scss/ui/_timeline.scss b/src/scss/ui/_timeline.scss
index 4c5403a51..112902b78 100644
--- a/src/scss/ui/_timeline.scss
+++ b/src/scss/ui/_timeline.scss
@@ -15,14 +15,14 @@
   position: relative;
 
   &:not(:last-child) {
-    margin-bottom: var(--#{$prefix}page-padding-x);
+    margin-bottom: var(--#{$prefix}page-padding);
 
     &: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-x));
+      bottom: calc(-1 * var(--#{$prefix}page-padding));
       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-x));
+  margin-left: calc(var(--#{$prefix}timeline-icon-size, $avatar-size) + var(--#{$prefix}page-padding));
 }
 
 //