left menu toggle scenario

This commit is contained in:
Burak Civan 2022-06-28 12:05:06 +03:00
parent 8723d58d95
commit 18bee00a0a
6 changed files with 42 additions and 7 deletions

10
public/css/app.css vendored
View File

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

View File

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

View File

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

View File

@ -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");

View File

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

View File

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