github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix sidebar right rotation

pull/3698/head
Daniel 2021-05-16 07:57:15 +05:30
parent 51f1debf4b
commit 5b3e1eddae
2 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
scss/_nav-sidebar.scss
View File

@ -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 {

22
ts/treeview.ts
View File

@ -38,8 +38,10 @@ 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`)
@ -47,15 +49,17 @@ class Treeview {
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)
}
}
}