upgrade bs from 4.6 to v5.x - nav toggle

assets/css/style.css

@@ -6,8 +6,8 @@
  */
 @font-face {
   font-family: "icomoon";
-  src: url("../fonts/icomoon.eot?ugtl4m2");
-  src: url("../fonts/icomoon.eot?ugtl4m2#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?ugtl4m2") format("truetype"), url("../fonts/icomoon.woff?ugtl4m2") format("woff"), url("../fonts/icomoon.svg?ugtl4m2#icomoon") format("svg");
+  src: url("../fonts/icomoon.eot?ugtl4sa");
+  src: url("../fonts/icomoon.eot?ugtl4sa#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?ugtl4sa") format("truetype"), url("../fonts/icomoon.woff?ugtl4sa") format("woff"), url("../fonts/icomoon.svg?ugtl4sa#icomoon") format("svg");
   font-weight: normal;
   font-style: normal;
   font-display: swap;
@@ -4003,7 +4003,7 @@ textarea.form-control-lg {
   --bs-navbar-toggler-padding-x: 0.75rem;
   --bs-navbar-toggler-font-size: 1.25rem;
   --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
-  --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15);
+  --bs-navbar-toggler-border-color: transparent;
   --bs-navbar-toggler-border-radius: 0;
   --bs-navbar-toggler-focus-width: 0.25rem;
   --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
@@ -11015,35 +11015,34 @@ footer h2, footer .h2 {
   padding-bottom: 0;
 }
 
+.navbar-toggler {
+  --bar-height: 4px;
+  --bar-margin: 5px;
+}
 .navbar-toggler:focus {
   outline: none;
 }
 .navbar-toggler .navbar-toggler-bar {
   background-color: #2d2d2d;
+  position: relative;
   display: block;
-  height: 4px;
+  height: var(--bar-height);
+  margin: var(--bar-margin) 0;
   width: 26px;
   transform: rotate(0deg);
-  transform-origin: left center;
+  transform-origin: center;
   transition: 0.25s ease-in-out;
   will-change: transform;
 }
-.navbar-toggler .navbar-toggler-bar:not(:first-child) {
-  margin-top: 5px;
-}
-.navbar-toggler[aria-expanded=true] .navbar-toggler-bar:nth-child(1) {
-  transform: rotate(45deg);
-  top: 20px;
-  left: 20px;
+.navbar-toggler[aria-expanded=true] .navbar-toggler-bar:nth-child(1),
+.navbar-toggler[aria-expanded=true] .navbar-toggler-bar:nth-child(3) {
+  transform: translateY(calc(var(--bar-height) + var(--bar-margin))) rotate(45deg);
 }
 .navbar-toggler[aria-expanded=true] .navbar-toggler-bar:nth-child(2) {
-  width: 0;
   opacity: 0;
 }
 .navbar-toggler[aria-expanded=true] .navbar-toggler-bar:nth-child(3) {
-  transform: rotate(-45deg);
-  top: 39px;
-  left: 20px;
+  transform: translateY(calc(-1 * (var(--bar-height) + var(--bar-margin)))) rotate(-45deg);
 }
 
 @media (max-width: 767.98px) {

src-ui/scss/_custom.scss

@@ -266,6 +266,7 @@ $nav-tabs-link-active-color:        $body-color;
 $nav-tabs-link-active-bg:           $gray-100;
 $nav-tabs-link-active-border-color: $gray-200 $gray-200 $nav-tabs-link-active-bg;
 
+$navbar-light-toggler-border-color: transparent;
 
 $common-padding:				$grid-gutter-width;
 

src-ui/scss/_layout.scss

@@ -94,41 +94,36 @@ footer h2 {
 }
 
 .navbar-toggler {
-
+  --bar-height: 4px;
+  --bar-margin: 5px;
 	&:focus {
 		outline: none;
 	}
 	
 	.navbar-toggler-bar {
 		background-color: #2d2d2d;
+        position: relative;
 		display: block;
-		height: 4px;
+        height: var(--bar-height);
+        margin: var(--bar-margin) 0;
 		width: 26px;
 		transform: rotate(0deg);
-		transform-origin: left center;
+		transform-origin: center;
 		transition: .25s ease-in-out;
 		will-change: transform;
 	}
 
-	.navbar-toggler-bar:not(:first-child) {
-		margin-top: 5px;
-	}
-
 	&[aria-expanded="true"] {
-		.navbar-toggler-bar:nth-child(1) {
-			transform: rotate(45deg);
-			top: 20px;
-			left: 20px;
+		.navbar-toggler-bar:nth-child(1),
+        .navbar-toggler-bar:nth-child(3) {
+          transform: translateY(calc(var(--bar-height) + var(--bar-margin))) rotate(45deg);
 		}
 		.navbar-toggler-bar:nth-child(2) {
-			width: 0;
 			opacity: 0;
 		}
-		.navbar-toggler-bar:nth-child(3) {
-			transform: rotate(-45deg);
-			top: 39px;
-			left: 20px;
-		}
+      .navbar-toggler-bar:nth-child(3) {
+        transform: translateY(calc(-1 * calc(var(--bar-height) + var(--bar-margin)))) rotate(-45deg);
+      }
 	}
 }