From a766a172f517ff948f46e0a463143551dba60522 Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Wed, 24 May 2023 20:11:22 +0200
Subject: [PATCH 1/3] navbar unify

---
 src/pages/_includes/layout/navbar-menu.html |  4 +-
 src/scss/_variables.scss                    | 36 +++++-----
 src/scss/layout/_navbar.scss                | 73 ++++++++++++---------
 src/scss/layout/_page.scss                  |  2 +-
 src/scss/layout/_root.scss                  |  5 +-
 src/scss/ui/_timeline.scss                  |  6 +-
 6 files changed, 71 insertions(+), 55 deletions(-)

diff --git a/src/pages/_includes/layout/navbar-menu.html b/src/pages/_includes/layout/navbar-menu.html
index adaa668d0..8c4a62405 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[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 %}
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 8355f8e18..47534027c 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -60,6 +60,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,
@@ -350,13 +351,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;
@@ -576,7 +576,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
@@ -674,11 +674,13 @@ $nav-link-padding-x: 0.75rem !default;
 $nav-link-color: var(--#{$prefix}muted) !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;
@@ -698,14 +700,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}muted) !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-muted-opacity) !default;
 $navbar-dark-brand-color: $white !default;
@@ -726,9 +731,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: .25rem !default;
+$navbar-nav-link-padding-x: .5rem !default;
+$navbar-nav-link-padding-y: .5rem !default;
 
 // Sidebar
 $sidebar-width: 15rem !default;
diff --git a/src/scss/layout/_navbar.scss b/src/scss/layout/_navbar.scss
index d3f45d5a1..623f97409 100644
--- a/src/scss/layout/_navbar.scss
+++ b/src/scss/layout/_navbar.scss
@@ -73,12 +73,13 @@
 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};
   align-items: stretch;
   min-height: $navbar-height;
   box-shadow: inset 0 calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 var(--#{$prefix}navbar-border-color);
@@ -118,9 +119,34 @@ Navbar
   }
 }
 
+/**
+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;
+    
+    &.active {
+      background-color: var(--#{$prefix}navbar-active-bg);
+    }
+
+    &:hover,
+    &:focus,
+    &.show {
+      background-color: var(--#{$prefix}navbar-hover-bg);
+    }
+  }
 }
 
 .navbar-expand {
@@ -139,19 +165,19 @@ Navbar
           flex: 1 1 auto;
         }
 
-        .nav-item.active {
-          position: relative;
+        // .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;
-          }
-        }
+        //   &: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);
@@ -263,19 +289,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
  */
diff --git a/src/scss/layout/_page.scss b/src/scss/layout/_page.scss
index 886820862..268a713eb 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) 0;
+  padding: var(--#{$prefix}page-padding-x) 0;
   margin-bottom: 0;
   flex: 1;
 
diff --git a/src/scss/layout/_root.scss b/src/scss/layout/_root.scss
index 58da0c1ec..de03d6036 100644
--- a/src/scss/layout/_root.scss
+++ b/src/scss/layout/_root.scss
@@ -44,11 +44,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};
diff --git a/src/scss/ui/_timeline.scss b/src/scss/ui/_timeline.scss
index 7117a19fa..b9fad2604 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);
+    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));
 }
 
 //

From f624fc1bb0f01ae1eb7e0c52904cc991c50df653 Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Wed, 24 May 2023 20:40:50 +0200
Subject: [PATCH 2/3] navbar padding fix

---
 src/scss/layout/_navbar.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/scss/layout/_navbar.scss b/src/scss/layout/_navbar.scss
index 623f97409..f58081671 100644
--- a/src/scss/layout/_navbar.scss
+++ b/src/scss/layout/_navbar.scss
@@ -6,7 +6,6 @@
     [class^="container"] {
       flex-direction: column;
       align-items: stretch;
-      padding: 0;
     }
 
     .navbar-nav {
@@ -101,6 +100,7 @@ Navbar
 
   .navbar-nav {
     min-height: subtract($navbar-height, 2 * $navbar-padding-y);
+    margin-left: calc(-1 * var(--#{$prefix}navbar-nav-link-padding-x));
 
     .nav-link {
       position: relative;

From 48bf597fe294946c570dcdafd030775e03438780 Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Thu, 25 May 2023 00:18:17 +0200
Subject: [PATCH 3/3] navbar cleanup

---
 src/scss/_variables-dark.scss |   4 +-
 src/scss/_variables.scss      |  96 +++++---------
 src/scss/layout/_navbar.scss  | 235 ++++++++++++++++++----------------
 3 files changed, 154 insertions(+), 181 deletions(-)

diff --git a/src/scss/_variables-dark.scss b/src/scss/_variables-dark.scss
index a8fd38b29..3b8a5dbaf 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: $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;
  
\ No newline at end of file
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index ccc0137c1..df04cf804 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -179,19 +179,6 @@ $green: #2fb344 !default;
 $teal: #0ca678 !default;
 $cyan: #17a2b8 !default;
 
-$color-blue: #206bc4;
-$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 +189,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 +268,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 +296,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,6 +314,7 @@ $avatar-sizes: (
 ) !default;
 $avatar-border-radius: var(--#{$prefix}border-radius) !default;
 $avatar-font-size: $h4-font-size;
+$avatar-box-shadow: var(--#{$prefix}box-shadow-border) !default;
 
 $link-decoration: none !default;
 $link-hover-decoration: underline !default;
@@ -392,11 +369,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: (
@@ -435,6 +408,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-input: 0 1px 1px rgba(var(--#{$prefix}body-color-rgb), 0.06) !default;
 $box-shadow-card: 0 0 4px rgba(var(--#{$prefix}body-color-rgb), 0.04) !default;
@@ -443,6 +417,7 @@ $box-shadow-dropdown: 0 16px 24px 2px rgb(0, 0, 0, 0.07), 0 6px 30px 5px rgb(0,
 
 $box-shadows: (
   box-shadow: $box-shadow,
+  box-shadow-border: $box-shadow-border,
   box-shadow-transparent: $box-shadow-transparent,
   box-shadow-input: $box-shadow-input,
   box-shadow-card: $box-shadow-card,
@@ -464,11 +439,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;
@@ -491,7 +462,7 @@ $alert-border-color: var(--#{$prefix}border-color-translucent) !default;
 $alert-shadow: rgba($dark, 0.04) 0 2px 4px 0 !default;
 
 // Breadcrumb
-$breadcrumb-divider-color: var(--#{$prefix}text-secondary) !default;
+$breadcrumb-divider-color: var(--#{$prefix}secondary) !default;
 $breadcrumb-link-color: var(--#{$prefix}link-color) !default;
 $breadcrumb-active-color: inherit !default;
 $breadcrumb-active-font-weight: var(--#{$prefix}font-weight-bold) !default;
@@ -629,7 +600,7 @@ $loader-size: 2.5rem !default;
 
 // Lists
 $list-group-header-bg: var(--#{$prefix}bg-surface-tertiary) !default;
-$list-group-header-color: var(--#{$prefix}text-secondary) !default;
+$list-group-header-color: var(--#{$prefix}secondary) !default;
 
 $list-group-border-color: var(--#{$prefix}border-color) !default;
 $list-group-item-padding-y: $card-cap-padding-y !default;
@@ -645,10 +616,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;
@@ -671,7 +639,7 @@ $modal-sm: 380px !default;
 // Nav
 $nav-link-padding-y: 0.5rem !default;
 $nav-link-padding-x: 0.75rem !default;
-$nav-link-color: var(--#{$prefix}text-secondary) !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;
@@ -690,8 +658,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;
@@ -701,7 +668,7 @@ $navbar-height: 3.5rem !default;
 $navbar-padding-y: 0.25rem !default;
 
 $navbar-light-bg: var(--#{$prefix}bg-surface) !default;
-$navbar-light-color: var(--#{$prefix}muted) !default;
+$navbar-light-color: var(--#{$prefix}secondary) !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;
@@ -732,9 +699,9 @@ $navbar-toggler-focus-width: 0 !default;
 $navbar-overlap-height: 9rem !default;
 
 // Navbar nav
-$navbar-nav-gap: .25rem !default;
-$navbar-nav-link-padding-x: .5rem !default;
-$navbar-nav-link-padding-y: .5rem !default;
+$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;
@@ -754,13 +721,13 @@ $popover-body-color: inherit !default;
 $footer-padding-y: 2rem !default;
 $footer-bg: $white !default;
 $footer-border-color: var(--#{$prefix}border-color) !default;
-$footer-color: var(--#{$prefix}text-secondary) !default;
+$footer-color: var(--#{$prefix}secondary) !default;
 
 // Pagination
 $pagination-border-width: 0 !default;
 $pagination-padding-y: 0.25rem !default;
 $pagination-padding-x: 0.25rem !default;
-$pagination-color: var(--#{$prefix}text-secondary) !default;
+$pagination-color: var(--#{$prefix}secondary) !default;
 $pagination-bg: transparent !default;
 $pagination-disabled-bg: transparent !default;
 $pagination-disabled-color: var(--#{$prefix}disabled-color) !default;
@@ -795,13 +762,11 @@ $table-border-color: var(--#{$prefix}border-color-translucent) !default;
 $table-th-border-color: var(--#{$prefix}border-color-translucent) !default;
 $table-th-padding-x: $table-cell-padding-x !default;
 $table-th-padding-y: 0.5rem !default;
-$table-th-color: var(--#{$prefix}text-secondary) !default;
+$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;
@@ -809,7 +774,7 @@ $table-sort-desc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org
 
 // Toasts
 $toast-border-color: var(--#{$prefix}border-color) !default;
-$toast-header-color: var(--#{$prefix}text-secondary) !default;
+$toast-header-color: var(--#{$prefix}secondary) !default;
 
 // Tracking
 $tracking-height: 1.5rem !default;
@@ -834,24 +799,21 @@ $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;
-$input-group-addon-color: var(--#{$prefix}text-secondary) !default;
+$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;
 
diff --git a/src/scss/layout/_navbar.scss b/src/scss/layout/_navbar.scss
index f58081671..bdfc5b222 100644
--- a/src/scss/layout/_navbar.scss
+++ b/src/scss/layout/_navbar.scss
@@ -1,5 +1,62 @@
+@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);
 
-@mixin navbar-vertical-nav {
+  &.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;
+  }
+  
   .navbar-collapse {
     flex-direction: column;
 
@@ -13,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;
       }
     }
@@ -79,8 +136,9 @@ Navbar
   --#{$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,26 +155,6 @@ Navbar
     position: absolute;
     z-index: $zindex-fixed;
   }
-
-  .navbar-nav {
-    min-height: subtract($navbar-height, 2 * $navbar-padding-y);
-    margin-left: calc(-1 * var(--#{$prefix}navbar-nav-link-padding-x));
-
-    .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%);
-      }
-    }
-  }
 }
 
 /**
@@ -136,7 +174,18 @@ Navbar nav
 
   .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);
     }
@@ -155,9 +204,9 @@ Navbar nav
     $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 {
@@ -165,40 +214,56 @@ 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-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;
+              }
+            }
           }
         }
       }
@@ -241,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,
@@ -258,11 +328,11 @@ Navbar toggler
   }
 
   &:before {
-    top: -.45em;
+    top: -0.45em;
   }
 
   &:after {
-    bottom: -.45em;
+    bottom: -0.45em;
   }
 
   .navbar-toggler[aria-expanded="true"] & {
@@ -312,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;
           }
         }
       }
@@ -378,7 +390,6 @@ Navbar vertical
   }
 }
 
-
 .navbar-overlap {
   &:after {
     content: "";
@@ -391,4 +402,4 @@ Navbar vertical
     z-index: -1;
     box-shadow: inherit;
   }
-}
\ No newline at end of file
+}