Merge pull request #5343 from AmooAti/rtl_admin_menu

fix admin menu does not appear in rtl langs

packages/Webkul/Admin/publishable/assets/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/js/admin.js": "/js/admin.js?id=8bcdcf3b86191d1739a5",
-    "/css/admin.css": "/css/admin.css?id=4ed7566377c765482303"
+    "/js/admin.js": "/js/admin.js?id=801cb84493a16f6b05a4",
+    "/css/admin.css": "/css/admin.css?id=d86c39d330f34c3249ad"
 }

packages/Webkul/Admin/src/Resources/assets/js/components/navigation/nav-slide-button.vue

@@ -5,11 +5,16 @@
 </template>
 
 <style scoped>
-    .toggle-aside-nav {
-        position: absolute;
-        top: 50px;
-        right: -12px;
-    }
+.toggle-aside-nav {
+    position: absolute;
+    top: 50px;
+    right: -12px;
+}
+
+.rtl .toggle-aside-nav {
+    left: -12px;
+    right: unset;
+}
 </style>
 
 <script>
@@ -20,7 +25,7 @@ export default {
 
     methods: {
         toggle: function () {
-            if ($('.aside-nav').is(':visible')) {
+            if ($('.aside-nav').hasClass('active')) {
                 this.hide();
             } else {
                 this.show();
@@ -28,26 +33,16 @@ export default {
         },
 
         hide: function () {
-            let self = this;
-
+            $('#nav-expand-button').show();
             $('.aside-nav').hide(function () {
-                $('.content-wrapper').css({
-                    marginLeft: 'unset'
-                });
-
-                $('#nav-expand-button').show();
+                $(this).removeClass('active');
             });
         },
 
         show: function () {
-            let self = this;
-
             $('#nav-expand-button').hide();
-
             $('.aside-nav').show(function () {
-                $('.content-wrapper').css({
-                    marginLeft: '280px'
-                });
+                $(this).addClass('active');
             });
         }
     }

packages/Webkul/Admin/src/Resources/assets/sass/partials/_default.scss

@@ -187,6 +187,12 @@ body {
         }
     }
 
+    .aside-nav:not(.active) {
+        + .content-wrapper {
+            margin-left: 0px;
+        }
+    }
+
     .content-wrapper {
         padding: 25px 25px 25px 15px;
         margin-left: 280px;

packages/Webkul/Admin/src/Resources/assets/sass/partials/_rtl.scss

@@ -23,7 +23,6 @@
     .navbar-left {
         border-left: 1px solid rgba(162, 162, 162, 0.2);
         border-right: none;
-        left: calc(100% - 90px);
         background-color: $white;
     }
 
@@ -51,7 +50,8 @@
         }
 
         .content-wrapper {
-            padding: 25px 305px 25px 25px;
+            padding: 25px 25px 25px 25px;
+            margin-right: 280px;
             margin-left: 0px;
         }
 
@@ -59,6 +59,12 @@
             float: left;
             transform: rotate(180deg);
         }
+
+        .aside-nav:not(.active) {
+            + .content-wrapper {
+                margin-right: 0px;
+            }
+        }
     }
 
     .dashboard {
@@ -181,4 +187,12 @@
     .pagination .page-item .icon {
         transform: rotate(180deg);
     }
+
+    .accordian-left-icon {
+        transform: rotate(180deg);
+    }
+
+    .accordian-right-icon {
+        transform: rotate(180deg);
+    }
 }

packages/Webkul/Admin/src/Resources/views/layouts/master.blade.php

@@ -130,8 +130,6 @@
                             countKeyUp = countKeyUp + pageUp;
 
                             $('.navbar-left').css("top", countKeyUp + "px");
-                        } else {
-                            $('.navbar-left').css("position", "fixed");
                         }
                     });
 

packages/Webkul/Admin/src/Resources/views/layouts/nav-aside.blade.php

@@ -1,4 +1,4 @@
-<div class="aside-nav">
+<div class="aside-nav active">
 
     {{-- button for collapsing aside nav --}}
     <nav-slide-button icon-class="accordian-left-icon"></nav-slide-button>