Add sidebar animation when collapsing

2 files changed, 9 insertions, 5 deletions

diff --git a/docs/_static/sidebar.js b/docs/_static/sidebar.js
index c44518f5..d9291a26 100644
--- a/docs/_static/sidebar.js
+++ b/docs/_static/sidebar.js
@@ -64,19 +64,17 @@ class Sidebar {
   collapseSection(icon) {
     icon.classList.remove('expanded');
     icon.classList.add('collapsed');
-    icon.innerText = 'chevron_right';
     let children = icon.nextElementSibling.nextElementSibling;
     // <arrow><heading>
     // --> <square><children>
-    children.style.display = "none";
+    setTimeout(() => children.style.display = "none", 75)
   }
 
   expandSection(icon) {
     icon.classList.remove('collapse');
     icon.classList.add('expanded');
-    icon.innerText = 'expand_more';
     let children = icon.nextElementSibling.nextElementSibling;
-    children.style.display = "block";
+    setTimeout(() => children.style.display = "block", 75)
   }
 
   setActiveLink(section) {
@@ -127,4 +125,3 @@ document.addEventListener('DOMContentLoaded', () => {
     sidebar.resize();
   });
 });
-
diff --git a/docs/_static/style.css b/docs/_static/style.css
index 99553296..6cd061fa 100644
--- a/docs/_static/style.css
+++ b/docs/_static/style.css
@@ -361,6 +361,13 @@ aside h3 {
   user-select: none;
   position: relative;
   line-height: 0.5em;
+  transition: transform 0.4s;
+  transform: rotate(0deg);
+}
+
+.expanded {
+  transition: transform 0.4s;
+  transform: rotate(-90deg);
 }
 
 .ref-internal-padding {