mirror of https://github.com/ColorlibHQ/AdminLTE
Fix sidebar right rotation
parent
51f1debf4b
commit
5b3e1eddae
|
@ -38,8 +38,6 @@
|
||||||
.nav-sidebar {
|
.nav-sidebar {
|
||||||
// All levels
|
// All levels
|
||||||
.nav-item {
|
.nav-item {
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
> .nav-link {
|
> .nav-link {
|
||||||
margin-bottom: .2rem;
|
margin-bottom: .2rem;
|
||||||
|
|
||||||
|
@ -48,10 +46,6 @@
|
||||||
transform: none #{"/*rtl:rotate(-180deg)*/"};
|
transform: none #{"/*rtl:rotate(-180deg)*/"};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.menu-open) .nav-treeview {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// All levels
|
// All levels
|
||||||
|
@ -84,11 +78,17 @@
|
||||||
|
|
||||||
// Tree view menu
|
// Tree view menu
|
||||||
.nav-treeview {
|
.nav-treeview {
|
||||||
// display: none;
|
display: none;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.menu-open {
|
||||||
|
> .nav-treeview {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.menu-open,
|
.menu-open,
|
||||||
.menu-is-opening {
|
.menu-is-opening {
|
||||||
> .nav-link {
|
> .nav-link {
|
||||||
|
|
|
@ -38,8 +38,10 @@ class Treeview {
|
||||||
|
|
||||||
const height: number = childNavItem?.scrollHeight ?? 0
|
const height: number = childNavItem?.scrollHeight ?? 0
|
||||||
|
|
||||||
|
childNavItem?.style.setProperty('transition', `height ${Defaults.transitionDuration}ms ${Defaults.transitionTimingFuntion}`)
|
||||||
childNavItem?.style.setProperty('overflow', 'hidden')
|
childNavItem?.style.setProperty('overflow', 'hidden')
|
||||||
childNavItem?.style.setProperty('height', '0px')
|
childNavItem?.style.setProperty('height', '0px')
|
||||||
|
childNavItem?.style.setProperty('display', 'block')
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
childNavItem?.style.setProperty('height', `${height}px`)
|
childNavItem?.style.setProperty('height', `${height}px`)
|
||||||
|
@ -47,15 +49,17 @@ class Treeview {
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
childNavItem?.style.removeProperty('overflow')
|
childNavItem?.style.removeProperty('overflow')
|
||||||
childNavItem?.style.setProperty('height', 'auto')
|
|
||||||
childNavItem?.style.removeProperty('height')
|
childNavItem?.style.removeProperty('height')
|
||||||
}, Defaults.transitionDuration)
|
}, Defaults.transitionDuration)
|
||||||
}
|
}
|
||||||
|
|
||||||
close(navItem: Element, childNavItem: HTMLElement | null | undefined): void {
|
close(navItem: Element, childNavItem: HTMLElement | null | undefined): void {
|
||||||
navItem.classList.remove(CLASS_NAME_MENU_IS_OPEN)
|
navItem.classList.remove(CLASS_NAME_MENU_IS_OPEN)
|
||||||
|
navItem.classList.remove(CLASS_NAME_MENU_OPEN)
|
||||||
|
|
||||||
const height: number = childNavItem?.scrollHeight ?? 0
|
const height: number = childNavItem?.scrollHeight ?? 0
|
||||||
|
|
||||||
|
childNavItem?.style.setProperty('transition', `height ${Defaults.transitionDuration}ms ${Defaults.transitionTimingFuntion}`)
|
||||||
childNavItem?.style.setProperty('overflow', 'hidden')
|
childNavItem?.style.setProperty('overflow', 'hidden')
|
||||||
childNavItem?.style.setProperty('height', `${height}px`)
|
childNavItem?.style.setProperty('height', `${height}px`)
|
||||||
|
|
||||||
|
@ -66,21 +70,19 @@ class Treeview {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
childNavItem?.style.removeProperty('overflow')
|
childNavItem?.style.removeProperty('overflow')
|
||||||
childNavItem?.style.removeProperty('height')
|
childNavItem?.style.removeProperty('height')
|
||||||
navItem.classList.remove(CLASS_NAME_MENU_OPEN)
|
childNavItem?.style.removeProperty('display')
|
||||||
}, Defaults.transitionDuration)
|
}, Defaults.transitionDuration)
|
||||||
}
|
}
|
||||||
|
|
||||||
toggle(treeviewMenu: Element): void {
|
toggle(treeviewMenu: Element): void {
|
||||||
const navItem: HTMLElement | null = treeviewMenu.closest(SELECTOR_NAV_ITEM)
|
const navItem: HTMLElement | null = treeviewMenu.closest(SELECTOR_NAV_ITEM)
|
||||||
const childNavItem: HTMLElement | null | undefined = navItem?.querySelector('.nav-treeview')
|
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)) {
|
||||||
if (navItem?.classList.contains(CLASS_NAME_MENU_OPEN)) {
|
this.close(navItem, childNavItem)
|
||||||
this.close(navItem, childNavItem)
|
} else {
|
||||||
} else {
|
this.open(navItem, childNavItem)
|
||||||
this.open(navItem, childNavItem)
|
}
|
||||||
}
|
|
||||||
}, 1)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue