Sidebar layout fix (#49)

* fix: sidebar animation when hiding

* fix: rendering of sidebar on safari

Author: lamATnginx

assets/css/f5-hugo.css

@@ -1099,7 +1099,7 @@ main a:hover {
 }
 
 #sidebar-wrapper.sidebar-toggle-animate {
-  transition: transform 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
+  transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
 }
 
 #sidebar-toggle-button {
@@ -1146,10 +1146,6 @@ main a:hover {
   display: none;
 }
 
-.sidebar-col-collapsed-width {
-  max-width: 2.4rem;
-}
-
 .content-no-toc {
   max-width: 100%;
 }

assets/js/sidebar.js

@@ -8,15 +8,16 @@ function handleInitialCollapse() {
       "aria-expanded": "false",
       title: "Show sidebar navigation",
     });
+    $(".sidenav").css("max-width", "2.4rem");
     $("#sidebar-wrapper").addClass("sidebar-toggle-collapsed");
-    $(".sidenav").addClass("sidebar-col-collapsed-width");
     $(".content").addClass("sidebar-content-collapsed-width");
     $(".nginx-docs-api-container").addClass("sidebar-redoc-collapsed-width");
   } else {
     $("#sidebar-toggle-button").attr({
       "aria-expanded": "true",
       title: "Hide sidebar navigation",
     });
+    $(".sidenav").css("max-width", "100%");
     $("#sidebar-wrapper").addClass("hide-sidebar-border");
   }
 }
@@ -32,7 +33,6 @@ function handleSetCollapse() {
       title: "Show sidebar navigation",
     });
     $("#sidebar-wrapper").addClass("sidebar-toggle-collapsed");
-    $(".sidenav").addClass("sidebar-col-collapsed-width");
     $(".content").addClass("sidebar-content-collapsed-width");
     $(".nginx-docs-api-container").addClass("sidebar-redoc-collapsed-width");
     localStorage.setItem(LOCAL_STORAGE_COLLAPSE_KEY, true);
@@ -41,20 +41,28 @@ function handleSetCollapse() {
       "aria-expanded": "true",
       title: "Hide sidebar navigation",
     });
+    $(".sidenav").css("max-width", "100%");
     $("#sidebar-wrapper").addClass("hide-sidebar-border");
     $("#sidebar-wrapper").removeClass("sidebar-toggle-collapsed");
-    $(".sidenav").delay(500).removeClass("sidebar-col-collapsed-width");
     $(".content").removeClass("sidebar-content-collapsed-width");
     $(".nginx-docs-api-container").removeClass("sidebar-redoc-collapsed-width");
     localStorage.setItem(LOCAL_STORAGE_COLLAPSE_KEY, false);
   }
 }
 
+function handleAnimationEnd(event) {
+  const collapsed = localStorage.getItem(LOCAL_STORAGE_COLLAPSE_KEY);
+  if (collapsed === "true") {
+    $(this).css("max-width", "2.4rem");
+  }
+}
+
 // This code makes the sidebar remember which sections has been clicked when using the sidebar
 $(document).ready(function () {
   // sidebar toggle navigation logic
   handleInitialCollapse();
   $("#sidebar-toggle-button").on("click", handleSetCollapse);
+  $(".sidenav").on("transitionend", handleAnimationEnd);
 
   $(".sidebar .nginx-toc-link a").each(function (i, item) {
     if (item.dataset.menuId == $(".main").data("menuId")) {