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?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");
+  src: url("../fonts/icomoon.eot?ugtl4xi");
+  src: url("../fonts/icomoon.eot?ugtl4xi#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?ugtl4xi") format("truetype"), url("../fonts/icomoon.woff?ugtl4xi") format("woff"), url("../fonts/icomoon.svg?ugtl4xi#icomoon") format("svg");
   font-weight: normal;
   font-style: normal;
   font-display: swap;
@@ -4005,7 +4005,7 @@ textarea.form-control-lg {
   --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: transparent;
   --bs-navbar-toggler-border-radius: 0;
-  --bs-navbar-toggler-focus-width: 0.25rem;
+  --bs-navbar-toggler-focus-width: 0;
   --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
   position: relative;
   display: flex;
@@ -11018,12 +11018,13 @@ footer h2, footer .h2 {
 .navbar-toggler {
   --bar-height: 4px;
   --bar-margin: 5px;
+  --bar-color: #2d2d2d;
 }
 .navbar-toggler:focus {
   outline: none;
 }
 .navbar-toggler .navbar-toggler-bar {
-  background-color: #2d2d2d;
+  background-color: var(--bar-color);
   position: relative;
   display: block;
   height: var(--bar-height);
@@ -11034,6 +11035,9 @@ footer h2, footer .h2 {
   transition: 0.25s ease-in-out;
   will-change: transform;
 }
+.navbar-toggler[aria-expanded=true], .navbar-toggler:hover, .navbar-toggler:focus {
+  --bar-color: #990099;
+}
 .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);

src-ui/scss/_custom.scss

@@ -267,6 +267,7 @@ $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;
+$navbar-toggler-focus-width: 0;
 
 $common-padding:				$grid-gutter-width;
 

src-ui/scss/_layout.scss

@@ -96,12 +96,13 @@ footer h2 {
 .navbar-toggler {
   --bar-height: 4px;
   --bar-margin: 5px;
+  --bar-color: #2d2d2d;
 	&:focus {
 		outline: none;
 	}
 	
 	.navbar-toggler-bar {
-		background-color: #2d2d2d;
+		background-color: var(--bar-color);
         position: relative;
 		display: block;
         height: var(--bar-height);
@@ -113,6 +114,16 @@ footer h2 {
 		will-change: transform;
 	}
 
+    &[aria-expanded="true"],
+    &:hover,
+    &:focus {
+      --bar-color: #{$primary};
+    }
+
+  &:focus-within {
+    //--#{$prefix}navbar-toggler-focus-width: 1px;
+  }
+
 	&[aria-expanded="true"] {
 		.navbar-toggler-bar:nth-child(1),
         .navbar-toggler-bar:nth-child(3) {