From 18bee00a0a0d70230c057e7f759218f8d0221f18 Mon Sep 17 00:00:00 2001
From: Burak Civan <burakcivan22@gmail.com>
Date: Tue, 28 Jun 2022 12:05:06 +0300
Subject: [PATCH] left menu toggle scenario

---
 public/css/app.css                                 | 10 +++++++++-
 resources/assets/sass/app.css                      |  8 ++++++++
 .../views/components/layouts/admin/menu.blade.php  |  2 +-
 .../components/layouts/admin/scripts.blade.php     | 13 +++++++++++--
 .../views/components/layouts/portal/menu.blade.php |  2 +-
 .../components/layouts/portal/scripts.blade.php    | 14 ++++++++++++--
 6 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/public/css/app.css b/public/css/app.css
index 38f359f57..d91150dc6 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -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;
diff --git a/resources/assets/sass/app.css b/resources/assets/sass/app.css
index 2a2590f19..85aa67cf2 100644
--- a/resources/assets/sass/app.css
+++ b/resources/assets/sass/app.css
@@ -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;
diff --git a/resources/views/components/layouts/admin/menu.blade.php b/resources/views/components/layouts/admin/menu.blade.php
index 1efa0dbc8..8c56a0157 100644
--- a/resources/views/components/layouts/admin/menu.blade.php
+++ b/resources/views/components/layouts/admin/menu.blade.php
@@ -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>
diff --git a/resources/views/components/layouts/admin/scripts.blade.php b/resources/views/components/layouts/admin/scripts.blade.php
index 84283cda8..3c9e6a982 100644
--- a/resources/views/components/layouts/admin/scripts.blade.php
+++ b/resources/views/components/layouts/admin/scripts.blade.php
@@ -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");
 
diff --git a/resources/views/components/layouts/portal/menu.blade.php b/resources/views/components/layouts/portal/menu.blade.php
index db8201d5d..7227ebd57 100644
--- a/resources/views/components/layouts/portal/menu.blade.php
+++ b/resources/views/components/layouts/portal/menu.blade.php
@@ -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>
diff --git a/resources/views/components/layouts/portal/scripts.blade.php b/resources/views/components/layouts/portal/scripts.blade.php
index 3d83c74f5..576a2b9b9 100644
--- a/resources/views/components/layouts/portal/scripts.blade.php
+++ b/resources/views/components/layouts/portal/scripts.blade.php
@@ -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") {