Fix sidebar toggle flickering on page load (#1868)

Author: simonprev

assets/css/layout.css

@@ -41,14 +41,15 @@ body {
 }
 
 .sidebar-button {
-  --sidebarButtonRightOpen: 4px;
   position: fixed;
   z-index: 200;
   top: 0;
   left: 0;
-  transition: all var(--sidebarTransitionDuration) ease-in-out;
   will-change: transform;
-  margin-top: 10px;
+}
+
+.sidebar-toggle--animated.sidebar-button {
+  transition: transform var(--sidebarTransitionDuration) ease-in-out;
 }
 
 .content {
@@ -73,7 +74,7 @@ body {
 }
 
 body:is(.sidebar-opening, .sidebar-opened) .sidebar-button {
-  transform: translateX(calc(var(--sidebarWidth) - 100% - var(--sidebarButtonRightOpen)));
+  transform: translateX(calc(var(--sidebarWidth) - 100%));
 }
 
 body.sidebar-opening-start .sidebar {
@@ -121,10 +122,6 @@ body.sidebar-closed .content {
   left: 0;
 }
 
-body.sidebar-closed .sidebar-button {
-  margin: 10px 8px;
-}
-
 @media screen and (max-width: 768px) {
   .content,
   body.sidebar-opening .content {

assets/css/sidebar.css

@@ -398,7 +398,7 @@
   cursor: pointer;
   background-color: transparent;
   border: none;
-  padding: 18px 8px 18px 11px;
+  padding: 28px 12px 18px 19px;
   font-size: var(--sidebarFontSize);
 }
 

assets/js/sidebar/sidebar-drawer.js

@@ -74,6 +74,9 @@ function setDefaultSidebarState () {
     setClass(SIDEBAR_CLASS.opened)
     qs(SIDEBAR_TOGGLE_SELECTOR).setAttribute('aria-expanded', 'true')
   }
+
+  // apply transition after the default state has been set so the animation does not show on initial page load
+  setTimeout(() => qs(SIDEBAR_TOGGLE_SELECTOR).classList.add('sidebar-toggle--animated'), ANIMATION_DURATION)
 }
 
 function isScreenSmall () {