left menu toggle scenario
This commit is contained in:
parent
8723d58d95
commit
18bee00a0a
10
public/css/app.css
vendored
10
public/css/app.css
vendored
@ -35773,12 +35773,20 @@ html[dir='rtl'] .el-input__suffix {
|
||||
text-overflow: unset;
|
||||
}
|
||||
|
||||
.disabled-link {
|
||||
.disabled-link{
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
[dir="ltr"] .ltr\:-right-57 {
|
||||
right: -14.5rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .rtl\:-right-59 {
|
||||
right: 16.5rem;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.small-table-width {
|
||||
width: 450px;
|
||||
|
8
resources/assets/sass/app.css
vendored
8
resources/assets/sass/app.css
vendored
@ -499,6 +499,14 @@ html[dir='rtl'] .el-input__suffix {
|
||||
@apply cursor-default pointer-events-none opacity-50;
|
||||
}
|
||||
|
||||
[dir="ltr"] .ltr\:-right-57 {
|
||||
right: -14.5rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .rtl\:-right-59 {
|
||||
right: 16.5rem;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.small-table-width {
|
||||
width: 450px;
|
||||
|
@ -222,7 +222,7 @@
|
||||
<span class="material-icons text-lg text-purple transform ltr:rotate-90 rtl:-rotate-90">expand_circle_down</span>
|
||||
</button>
|
||||
|
||||
<span data-menu-close id="menu-cancel" class="material-icons absolute ltr:-right-2 rtl:right-12 top-8 text-lg text-purple cursor-pointer z-10 hidden">cancel</span>
|
||||
<span data-menu-close id="menu-cancel" class="material-icons absolute ltr:-right-2 rtl:right-12 transition-all top-8 text-lg text-purple cursor-pointer z-10 hidden">cancel</span>
|
||||
|
||||
<div class="fixed w-full h-full invisible lg:hidden js-menu-background" style="background-color: rgba(0, 0, 0, 0.5); z-index: -1;"></div>
|
||||
</div>
|
||||
|
@ -150,9 +150,18 @@
|
||||
mainContent.classList.add("hidden");
|
||||
toggleButton.classList.add("invisible");
|
||||
menuClose.classList.remove("hidden");
|
||||
|
||||
//for hidden menu, show close icon scenario
|
||||
if (sideBar.classList.contains("menu-list-hidden")) {
|
||||
menuClose.classList.add("ltr:-right-57", "rtl:right-59");
|
||||
menuClose.classList.remove("ltr:-right-2", "rtl:right-12");
|
||||
} else {
|
||||
menuClose.classList.add("ltr:-right-2", "rtl:right-12");
|
||||
}
|
||||
|
||||
unHiddenSidebar();
|
||||
contentTransitionRight();
|
||||
sectionContent.classList.remove("xl:ltr:ml-0", "xl:rtl:mr-0");
|
||||
sectionContent.classList.add("xl:ltr:ml-64", "xl:rtl:mr-64");
|
||||
//for hidden menu, show close icon scenario
|
||||
|
||||
notificationCount("none");
|
||||
|
||||
|
@ -169,7 +169,7 @@
|
||||
<span class="material-icons text-lg text-purple transform ltr:rotate-90 rtl:-rotate-90">expand_circle_down</span>
|
||||
</button>
|
||||
|
||||
<span data-menu-close class="material-icons absolute ltr:-right-2 rtl:right-12 top-8 text-lg text-purple cursor-pointer z-10 hidden">cancel</span>
|
||||
<span data-menu-close class="material-icons absolute ltr:-right-2 rtl:right-12 transition-all top-8 text-lg text-purple cursor-pointer z-10 hidden">cancel</span>
|
||||
|
||||
<div class="fixed w-full h-full invisible lg:hidden js-menu-background" style="background-color: rgba(0, 0, 0, 0.5); z-index: -1;"></div>
|
||||
</div>
|
||||
|
@ -137,8 +137,18 @@
|
||||
mainContent.classList.add("hidden");
|
||||
toggleButton.classList.add("invisible");
|
||||
menuClose.classList.remove("hidden");
|
||||
unHiddenSidebar();
|
||||
contentTransitionRight();
|
||||
|
||||
//for hidden menu, show close icon scenario
|
||||
if (sideBar.classList.contains("menu-list-hidden")) {
|
||||
menuClose.classList.add("ltr:-right-57", "rtl:right-59");
|
||||
menuClose.classList.remove("ltr:-right-2", "rtl:right-12");
|
||||
} else {
|
||||
menuClose.classList.add("ltr:-right-2", "rtl:right-12");
|
||||
}
|
||||
|
||||
sectionContent.classList.remove("xl:ltr:ml-0", "xl:rtl:mr-0");
|
||||
sectionContent.classList.add("xl:ltr:ml-64", "xl:rtl:mr-64");
|
||||
//for hidden menu, show close icon scenario
|
||||
|
||||
//remove active (cancel text) class form target icon
|
||||
} else if (menu.classList.contains(menuRef) && iconButton.children[0].textContent == "cancel") {
|
||||
|
Loading…
x
Reference in New Issue
Block a user