From 92e62158b113b3e65cc38b6ec95990bb1cccca4c Mon Sep 17 00:00:00 2001
From: Tanya Fomina <fomina.tatianaaa@yandex.ru>
Date: Fri, 10 Jun 2022 15:37:09 +0800
Subject: [PATCH] Simplify css

---
 src/frontend/js/modules/sidebar.js          | 14 ++++++-------
 src/frontend/styles/components/sidebar.pcss | 22 +++++++++++----------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/frontend/js/modules/sidebar.js b/src/frontend/js/modules/sidebar.js
index a50c166..6f4fdf8 100644
--- a/src/frontend/js/modules/sidebar.js
+++ b/src/frontend/js/modules/sidebar.js
@@ -15,13 +15,12 @@ export default class Sidebar {
   static get CSS() {
     return {
       toggler: 'docs-sidebar__section-toggler',
-      togglerCollapsed: 'docs-sidebar__section-toggler--collapsed',
       section: 'docs-sidebar__section',
+      sectionCollapsed: 'docs-sidebar__section--collapsed',
       sectionAnimated: 'docs-sidebar__section--animated',
       sectionTitle: 'docs-sidebar__section-title',
       sectionTitleActive: 'docs-sidebar__section-title--active',
       sectionList: 'docs-sidebar__section-list',
-      sectionListCollapsed: 'docs-sidebar__section-list--collapsed',
       sectionListItemActive: 'docs-sidebar__section-list-item--active',
       sidebarToggler: 'docs-sidebar__toggler',
       sidebarContent: 'docs-sidebar__content',
@@ -61,7 +60,7 @@ export default class Sidebar {
         this.collapsed[id] = false;
       }
       if (this.collapsed[id]) {
-        this.setSectionCollapsed(section, togglerEl, true, false);
+        this.setSectionCollapsed(section, true, false);
       }
     });
     this.nodes.sidebarContent = moduleEl.querySelector('.' + Sidebar.CSS.sidebarContent);
@@ -83,7 +82,7 @@ export default class Sidebar {
     event.preventDefault();
     this.collapsed[sectionId] = !this.collapsed[sectionId];
     window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(this.collapsed));
-    this.setSectionCollapsed(sectionEl, togglerEl, this.collapsed[sectionId]);
+    this.setSectionCollapsed(sectionEl, this.collapsed[sectionId]);
   }
 
   /**
@@ -92,17 +91,16 @@ export default class Sidebar {
    * @param {HTMLElement} sectionEl - element of the section to toggle
    * @param {HTMLElement} togglerEl - section's toggler button element
    * @param {boolean} collapsed - new collapsed state
-   * @param {boolean} animated - true if state should change with animation
+   * @param {boolean} [animated] - true if state should change with animation
    */
-  setSectionCollapsed(sectionEl, togglerEl, collapsed, animated = true) {
-    togglerEl.classList.toggle(Sidebar.CSS.togglerCollapsed, collapsed);
+  setSectionCollapsed(sectionEl, collapsed, animated = true) {
     const sectionList = sectionEl.querySelector('.' + Sidebar.CSS.sectionList);
 
     if (!sectionList) {
       return;
     }
     sectionEl.classList.toggle(Sidebar.CSS.sectionAnimated, animated);
-    sectionList.classList.toggle(Sidebar.CSS.sectionListCollapsed, collapsed);
+    sectionEl.classList.toggle(Sidebar.CSS.sectionCollapsed, collapsed);
 
     /**
      * Highlight section item as active if active child item is collapsed.
diff --git a/src/frontend/styles/components/sidebar.pcss b/src/frontend/styles/components/sidebar.pcss
index 1b00935..29181c4 100644
--- a/src/frontend/styles/components/sidebar.pcss
+++ b/src/frontend/styles/components/sidebar.pcss
@@ -43,6 +43,18 @@
         }
       }
     }
+
+    &--collapsed {
+      .docs-sidebar__section-list {
+        max-height: 0;
+      }
+
+      .docs-sidebar__section-toggler {
+        svg {
+          transform: rotate(180deg);
+        }
+      }
+    }
   }
 
   &__section:not(:first-child) {
@@ -116,10 +128,6 @@
     z-index: 1;
     position: relative;
     max-height: 1000px;
-
-    &--collapsed {
-      max-height: 0;
-    }
   }
 
   &__section-toggler {
@@ -144,12 +152,6 @@
     svg {
       display: block;
     }
-
-    &--collapsed {
-      svg {
-        transform: rotate(180deg);
-      }
-    }
   }