Fix sidebar right rotation

ColorlibHQ · May 16, 2021 · 5b3e1ed · 5b3e1ed
1 parent 51f1deb
commit 5b3e1ed
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 17 deletions.
diff --git a/scss/_nav-sidebar.scss b/scss/_nav-sidebar.scss
@@ -38,8 +38,6 @@
 .nav-sidebar {
   // All levels
   .nav-item {
-    width: 100%;
-
     > .nav-link {
       margin-bottom: .2rem;
 
@@ -48,10 +46,6 @@
         transform: none #{"/*rtl:rotate(-180deg)*/"};
       }
     }
-
-    &:not(.menu-open) .nav-treeview {
-      display: none;
-    }
   }
 
   // All levels
@@ -84,11 +78,17 @@
 
   // Tree view menu
   .nav-treeview {
-    // display: none;
+    display: none;
     list-style: none;
     padding: 0;
   }
 
+  .menu-open {
+    > .nav-treeview {
+      display: block;
+    }
+  }
+
   .menu-open,
   .menu-is-opening {
     > .nav-link {

diff --git a/ts/treeview.ts b/ts/treeview.ts
@@ -38,24 +38,28 @@ class Treeview {
 
     const height: number = childNavItem?.scrollHeight ?? 0
 
+    childNavItem?.style.setProperty('transition', `height ${Defaults.transitionDuration}ms ${Defaults.transitionTimingFuntion}`)
     childNavItem?.style.setProperty('overflow', 'hidden')
     childNavItem?.style.setProperty('height', '0px')
+    childNavItem?.style.setProperty('display', 'block')
 
     setTimeout(() => {
       childNavItem?.style.setProperty('height', `${height}px`)
     }, 1)
 
     setTimeout(() => {
       childNavItem?.style.removeProperty('overflow')
-      childNavItem?.style.setProperty('height', 'auto')
       childNavItem?.style.removeProperty('height')
     }, Defaults.transitionDuration)
   }
 
   close(navItem: Element, childNavItem: HTMLElement | null | undefined): void {
     navItem.classList.remove(CLASS_NAME_MENU_IS_OPEN)
+    navItem.classList.remove(CLASS_NAME_MENU_OPEN)
+
     const height: number = childNavItem?.scrollHeight ?? 0
 
+    childNavItem?.style.setProperty('transition', `height ${Defaults.transitionDuration}ms ${Defaults.transitionTimingFuntion}`)
     childNavItem?.style.setProperty('overflow', 'hidden')
     childNavItem?.style.setProperty('height', `${height}px`)
 
@@ -66,21 +70,19 @@ class Treeview {
     setTimeout(() => {
       childNavItem?.style.removeProperty('overflow')
       childNavItem?.style.removeProperty('height')
-      navItem.classList.remove(CLASS_NAME_MENU_OPEN)
+      childNavItem?.style.removeProperty('display')
     }, Defaults.transitionDuration)
   }
 
   toggle(treeviewMenu: Element): void {
     const navItem: HTMLElement | null = treeviewMenu.closest(SELECTOR_NAV_ITEM)
     const childNavItem: HTMLElement | null | undefined = navItem?.querySelector('.nav-treeview')
-    childNavItem?.style.setProperty('transition', `height ${Defaults.transitionDuration}ms ${Defaults.transitionTimingFuntion}`)
-    setTimeout(() => {
-      if (navItem?.classList.contains(CLASS_NAME_MENU_OPEN)) {
-        this.close(navItem, childNavItem)
-      } else {
-        this.open(navItem, childNavItem)
-      }
-    }, 1)
+
+    if (navItem?.classList.contains(CLASS_NAME_MENU_OPEN)) {
+      this.close(navItem, childNavItem)
+    } else {
+      this.open(navItem, childNavItem)
+    }
   }
 }