fix(Sidebar): nav icons width issue, sidebar close button width

Author: mrholek

scss/_variables.scss

@@ -2043,6 +2043,9 @@ $sidebar-border-width:                     0 !default;
 $sidebar-border-color:                     transparent !default;
 $sidebar-transition:                       margin-left .15s, margin-right .15s, box-shadow .075s, transform .15s, width .15s, z-index 0s ease .15s !default;
 
+$sidebar-close-button-width:               2rem !default;
+$sidebar-close-button-height:              4rem !default;
+
 $sidebar-brand-height:                     4rem !default;
 $sidebar-brand-color:                      $high-emphasis-inverse !default;
 $sidebar-brand-bg:                         rgba($black, .2) !default;

scss/sidebar/_sidebar-nav.scss

@@ -97,6 +97,10 @@
     }
   }
 
+  svg.nav-icon {
+    overflow: hidden; // fix chrome 105+ width issue
+  }
+
   .nav-group {
     position: relative;
     @include transition($sidebar-nav-group-transition);

scss/sidebar/_sidebar.scss

@@ -10,6 +10,8 @@
   --#{$prefix}sidebar-brand-color: #{$sidebar-brand-color};
   --#{$prefix}sidebar-brand-height: #{$sidebar-brand-height};
   --#{$prefix}sidebar-brand-bg: #{$sidebar-brand-bg};
+  --#{$prefix}sidebar-close-button-width: #{$sidebar-close-button-width};
+  --#{$prefix}sidebar-close-button-height: #{$sidebar-close-button-height};
   --#{$prefix}sidebar-header-height: #{$sidebar-header-height};
   --#{$prefix}sidebar-header-bg: #{$sidebar-header-bg};
   --#{$prefix}sidebar-header-padding-x: #{$sidebar-header-padding-x};
@@ -214,8 +216,8 @@
   position: absolute;
   top: 0;
   @include ltr-rtl("right", 0);
-  width: var(--#{$prefix}sidebar-width);
-  height: var(--#{$prefix}sidebar-header-height);
+  width: var(--#{$prefix}sidebar-close-button-width);
+  height: var(--#{$prefix}sidebar-close-button-height);
   color: var(--#{$prefix}sidebar-color);
   background: transparent;
   border: 0;