From a91faf358b5b9eb4164130d964482cf7280ed0c5 Mon Sep 17 00:00:00 2001
From: Tanya Fomina <fomina.tatianaaa@yandex.ru>
Date: Fri, 10 Jun 2022 16:11:30 +0800
Subject: [PATCH] Fix animation

---
 src/frontend/js/modules/sidebar.js          | 19 +++++++++++++++++++
 src/frontend/styles/components/sidebar.pcss | 11 ++++++-----
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/frontend/js/modules/sidebar.js b/src/frontend/js/modules/sidebar.js
index 36cb87d..b64e675 100644
--- a/src/frontend/js/modules/sidebar.js
+++ b/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`;
   }
 
   /**
diff --git a/src/frontend/styles/components/sidebar.pcss b/src/frontend/styles/components/sidebar.pcss
index 29181c4..d4d816c 100644
--- a/src/frontend/styles/components/sidebar.pcss
+++ b/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 {