Fix animation

src/frontend/js/modules/sidebar.js

@@ -5,6 +5,12 @@ import { Storage } from '../utils/storage';
  */
 const LOCAL_STORAGE_KEY = 'docs_sidebar_state';
 
+
+/**
+ * Section list item height in px
+ */
+const ITEM_HEIGHT = 31;
+
 /**
  * Sidebar module
  */
@@ -85,6 +91,19 @@ export default class Sidebar {
     if (this.sectionsState[id]) {
       this.setSectionCollapsed(section, true, false);
     }
+
+    /**
+     * Calculate and set sections list max height for smooth animation
+     */
+    const sectionList = section.querySelector('.' + Sidebar.CSS.sectionList);
+
+    if (!sectionList) {
+      return;
+    }
+
+    const itemsCount = sectionList.children.length;
+
+    sectionList.style.maxHeight = `${ itemsCount * ITEM_HEIGHT }px`;
   }
 
   /**

src/frontend/styles/components/sidebar.pcss

@@ -1,14 +1,16 @@
 .docs-sidebar {
-  width: 100vw;
+  --sidebar-width: 100vw;
+
+  width: var(--sidebar-width);
     
   @media (--desktop) {
-    width: 344px;
+    --sidebar-width: 344px;
   }
 
   &__content {
     border-bottom: 1px solid var(--color-line-gray);
     box-sizing: border-box;
-    padding: 30px 22px;
+    padding: var(--layout-padding-vertical) 22px;
     position: sticky;
     top: var(--layout-height-header);
     display: flex;
@@ -46,7 +48,7 @@
 
     &--collapsed {
       .docs-sidebar__section-list {
-        max-height: 0;
+        max-height: 0 !important;
       }
 
       .docs-sidebar__section-toggler {
@@ -127,7 +129,6 @@
     margin: 0;
     z-index: 1;
     position: relative;
-    max-height: 1000px;
   }
 
   &__section-toggler {