Merge pull request #1258 from suraj-webkul/Issue#1146

Issue #1146 fixed.

Author: devansh-webkul

packages/Webkul/Admin/publishable/assets/css/admin.css

@@ -58,7 +58,7 @@
     "/images/user-icon.svg": "/images/user-icon.svg?id=5504788e912ea441b4ae0cb23d145341",
     "/images/workflow-icon.svg": "/images/workflow-icon.svg?id=0a8721c15a54790d1e85f288b9c79981",
     "/js/admin.js": "/js/admin.js?id=ded43dfc84d1a6b469709c56aeee570a",
-    "/css/admin.css": "/css/admin.css?id=a76eb6527b69d6d20e4a76eb0e69e28b",
+    "/css/admin.css": "/css/admin.css?id=db172314a860b84e52eec23d2988b36b",
     "/images/favicon/android-icon-144x144.png": "/images/favicon/android-icon-144x144.png?id=6faae4761ebf5164f34a9d3856a12f73",
     "/images/favicon/android-icon-192x192.png": "/images/favicon/android-icon-192x192.png?id=2c2ef56168f35218ab16f536a1f09beb",
     "/images/favicon/android-icon-36x36.png": "/images/favicon/android-icon-36x36.png?id=cb762fc1c3a4114a7322ff8e5ba01bdf",

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

@@ -194,6 +194,10 @@ body {
     }
 }
 
+.layout-container {
+    display: flex;
+}
+
 .navbar-left {
     left: 0;
     bottom: 0;
@@ -204,7 +208,6 @@ body {
     position: fixed;
     background-color: $dark-color;
     box-shadow: inset -1px 0px 0px #cdcecf;
-    // transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 
     ul.menubar {
         li.menu-item {
@@ -213,8 +216,10 @@ body {
             overflow: hidden;
 
             > a {
+                display: flex;
+                gap: 0.625rem;
+                align-items: center;
                 padding: 16px 12px;
-                display: block;
                 color: $secondary-font-color;
                 width: 100%;
 
@@ -292,7 +297,7 @@ body {
     }
 
     &.open {
-        width: 160px;
+        width: 250px;
         overflow-x: auto;
 
         ul.menubar {
@@ -316,7 +321,7 @@ body {
 
                     li.sub-menu-item {
                         a {
-                            padding-left: 45px;
+                            padding-left: 53px;
                         }
                     }
                 }
@@ -441,11 +446,10 @@ body {
     right: 0;
     top: 60px;
     bottom: 0px;
-    width: 100%;
+    // width: 100%;
     position: absolute;
     padding-left: 48px;
     height: calc(100% - 60px);
-    // transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 
     .inner-section {
         height: 100%;

packages/Webkul/Admin/src/Resources/assets/sass/app.scss

@@ -101,13 +101,21 @@
                 li.menu-item.active {
                     width: calc(100% - 0px);
                 }
+
+                ul.sub-menubar {
+                    li.sub-menu-item {
+                        a {
+                            padding-right: 40px;
+                        }
+                    }
+                }
             }
         }
     }
 
     .navbar-left.open + .content-container {
         padding-left: 0 !important;
-        padding-right: 160px;
+        padding-right: 250px;
     }
 
     .content-container {

packages/Webkul/Admin/src/Resources/assets/sass/rtl.scss

@@ -48,24 +48,24 @@
 
             {!! view_render_event('admin.layout.nav-top.after') !!}
 
+            <div class="layout-container">
+                {!! view_render_event('admin.layout.nav-left.before') !!}
 
-            {!! view_render_event('admin.layout.nav-left.before') !!}
+                @include ('admin::layouts.nav-left')
 
-            @include ('admin::layouts.nav-left')
+                {!! view_render_event('admin.layout.nav-left.after') !!}
 
-            {!! view_render_event('admin.layout.nav-left.after') !!}
 
+                <div class="content-container" :style="{ paddingLeft: isMenuOpen ? '250px' : ''}">
 
-            <div class="content-container" :style="{ paddingLeft: isMenuOpen ? '160px' : ''}">
+                    {!! view_render_event('admin.layout.content.before') !!}
 
-                {!! view_render_event('admin.layout.content.before') !!}
+                    @yield('content-wrapper')
 
-                @yield('content-wrapper')
-
-                {!! view_render_event('admin.layout.content.after') !!}
+                    {!! view_render_event('admin.layout.content.after') !!}
 
+                </div>
             </div>
-
         </div>
 
         <script type="text/javascript">