Mobile responsive

packages/Webkul/Admin/src/Config/menu.php

@@ -41,7 +41,7 @@
         'key'        => 'mail',
         'name'       => 'admin::app.layouts.mail.title',
         'route'      => 'admin.mail.index',
-        'params'     => ['route' => 'compose'],
+        'params'     => ['route' => 'inbox'],
         'sort'       => 4,
         'icon-class' => 'icon-mail',
     ], [

packages/Webkul/Admin/src/Http/Controllers/Mail/EmailController.php

@@ -45,17 +45,11 @@ public function index(): View|JsonResponse|RedirectResponse
             abort(401, 'This action is unauthorized');
         }
 
-        switch (request('route')) {
-            case 'compose':
-                return view('admin::mail.compose');
-
-            default:
-                if (request()->ajax()) {
-                    return datagrid(EmailDataGrid::class)->process();
-                }
-
-                return view('admin::mail.index');
+        if (request()->ajax()) {
+            return datagrid(EmailDataGrid::class)->process();
         }
+
+        return view('admin::mail.index');
     }
 
     /**

packages/Webkul/Admin/src/Resources/assets/css/app.css

@@ -300,6 +300,10 @@
         content: "\e911";
     }
 
+    .icon-hamburger-menu:before {
+        content: "\e955";
+    }
+
     .icon-mail:before {
         content: "\e912";
     }

packages/Webkul/Admin/src/Resources/views/activities/edit.blade.php

@@ -49,12 +49,12 @@ class="primary-button"
             <div class="flex gap-2.5 max-xl:flex-wrap">
                 <!-- Left sub-component -->
                 <div class="flex flex-1 flex-col gap-2 max-xl:flex-auto">
-                    <div class="box-shadow rounded-lg border border-gray-200 bg-white p-4 dark:bg-gray-900 dark:border-gray-800">
+                    <div class="box-shadow rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900">
                         {!! view_render_event('admin.activities.edit.form_controls.before') !!}
 
                         <!-- Schedule Date -->
                         <x-admin::form.control-group>
-                            <div class="flex gap-2"> 
+                            <div class="flex flex-col gap-2 lg:flex-row"> 
                                 <div class="w-full">
                                     <x-admin::form.control-group.label class="required">
                                         @lang('admin::app.activities.edit.schedule_from')

packages/Webkul/Admin/src/Resources/views/components/activities/index.blade.php

@@ -39,7 +39,7 @@
             {!! view_render_event('admin.components.activities.content.before') !!}
 
             <div class="w-full rounded-md border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
-                <div class="flex gap-2 border-b border-gray-200 dark:border-gray-800">
+                <div class="flex gap-2 overflow-x-scroll border-b border-gray-200 dark:border-gray-800 lg:overflow-hidden">
                     {!! view_render_event('admin.components.activities.content.types.before') !!}
 
                     <div
@@ -83,7 +83,7 @@ class="mt-2 flex h-9 min-h-9 w-9 min-w-9 items-center justify-center rounded-ful
 
                                 <!-- Activity Details -->
                                 <div
-                                    class="flex w-full justify-between gap-4 rounded-md p-4"
+                                    class="flex w-full justify-between gap-4 overflow-x-scroll rounded-md p-4 md:overflow-hidden lg:overflow-hidden"
                                     :class="{'bg-gray-100 dark:bg-gray-950': index % 2 != 0 }"
                                 >
                                     <div class="flex flex-col gap-2">

packages/Webkul/Admin/src/Resources/views/components/attributes/edit/address.blade.php

@@ -13,7 +13,7 @@
         type="text/x-template"
         id="v-address-component-template"
     >
-        <div class="flex gap-4">
+        <div class="flex flex-col gap-4 lg:flex-row">
             <div class="w-full">
                 <!-- Address (Textarea field) -->
                 <x-admin::form.control-group>

packages/Webkul/Admin/src/Resources/views/components/breadcrumbs/index.blade.php

@@ -4,7 +4,7 @@
     'route'  => null,
 ])
 
-<div class="flex justify-start max-lg:hidden">
+<div class="flex justify-start">
     <div class="flex items-center gap-x-3.5">        
         @if($route)
             {{ Breadcrumbs::view('admin::partials.breadcrumbs', $name, $route, $entity) }}
@@ -13,3 +13,6 @@
         @endif
     </div>
 </div>
+
+
+<div class="table-auto"></div>

packages/Webkul/Admin/src/Resources/views/components/datagrid/table.blade.php

@@ -17,7 +17,7 @@
         id="v-datagrid-table-template"
     >
         <div class="w-full">
-            <div class="table-responsive box-shadow rounded-t-0 grid w-full overflow-hidden border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
+            <div class="table-responsive box-shadow rounded-t-0 grid w-full overflow-x-auto border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
                 <slot
                     name="header"
                     :is-loading="isLoading"
@@ -34,7 +34,7 @@
                     <template v-else>
                         <div
                             class="row grid min-h-[47px] items-center gap-2.5 border-b bg-gray-50 px-4 py-2.5 text-black dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300"
-                            :style="`grid-template-columns: repeat(${gridsCount}, minmax(0, 1fr))`"
+                            :style="gridStyle"
                         >
                             <!-- Mass Actions -->
                             <p v-if="available.massActions.length">
@@ -107,7 +107,7 @@ class="place-self-end"
                             <div
                                 class="row grid items-center gap-2.5 border-b px-4 py-4 text-black transition-all hover:bg-gray-50 dark:border-gray-800 dark:text-gray-300 dark:hover:bg-gray-950"
                                 v-for="record in available.records"
-                                :style="`grid-template-columns: repeat(${gridsCount}, minmax(0, 1fr))`"
+                                :style="gridStyle"
                             >
                                 <!-- Mass Actions -->
                                 <p v-if="available.massActions.length">
@@ -186,9 +186,32 @@ class="cursor-pointer rounded-md p-1.5 text-2xl transition-all hover:bg-gray-200
 
                     return count;
                 },
+
+                gridStyle() {
+                    const minmaxValue = this.isMobile ? '150px' : '0';
+
+                    return `grid-template-columns: repeat(${this.gridsCount}, minmax(${minmaxValue}, 1fr))`;
+                },
+            },
+
+            mounted() {
+                this.checkIfMobile();
+
+                window.addEventListener("resize", this.checkIfMobile);
+            },      
+
+            beforeDestroy() {
+                window.removeEventListener("resize", this.checkIfMobile);
             },
 
             methods: {
+                /**
+                 * Check if the current device is mobile.
+                 */
+                checkIfMobile() {
+                    this.isMobile = window.matchMedia("(max-width: 768px)").matches;
+                },
+
                 /**
                  * Select all records in the datagrid.
                  *

packages/Webkul/Admin/src/Resources/views/components/datagrid/toolbar.blade.php

@@ -3,7 +3,7 @@
 </template>
 
 <template v-else>
-    <div class="flex h-[58px] items-center justify-between gap-4 rounded-t-lg border border-b-0 border-gray-200 bg-white pl-2 pr-4 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 max-md:flex-wrap">
+    <div class="flex flex-col items-center justify-between gap-4 rounded-t-lg border border-b-0 border-gray-200 bg-white py-2 pl-2 pr-4 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 md:flex-row lg:flex-row">
         <!-- Left Toolbar -->
         <div class="flex gap-x-1">
             {{ $toolbarLeftBefore }}
@@ -66,7 +66,7 @@ class='fixed bottom-10 left-1/2 z-[10003] grid -translate-x-1/2 justify-items-en
         </div>
 
         <!-- Right Toolbar -->
-        <div class="flex gap-x-4">
+        <div class="flex flex-col gap-4 gap-x-4 md:flex-row md:gap-0 lg:flex-row lg:gap-0">
             {{ $toolbarRightBefore }}
 
             <!-- Pagination Panel -->

packages/Webkul/Admin/src/Resources/views/components/datagrid/toolbar/filter.blade.php

@@ -34,6 +34,7 @@
             <template v-else>
                 <x-admin::drawer
                     width="350px"
+                    class="[&>div:nth-child(3)]:rounded-none [&>div:nth-child(3)]:m-0 lg:[&>div:nth-child(3)]:rounded-lg lg:[&>div:nth-child(3)]:m-3"
                     ref="filterDrawer"
                 >
                     <x-slot:toggle>
@@ -1535,4 +1536,4 @@ class="cursor-pointer p-2 text-sm text-gray-600 hover:bg-gray-100 dark:text-gray
             }
         });
     </script>
-@endpushOnce
+@endpushOnce

packages/Webkul/Admin/src/Resources/views/components/datagrid/toolbar/pagination.blade.php

@@ -26,7 +26,7 @@
 
             <template v-else>
                 <div class="flex items-center gap-x-2">
-                    <p class="whitespace-nowrap text-gray-600 dark:text-gray-300 max-sm:hidden">
+                    <p class="whitespace-nowrap text-gray-600 dark:text-gray-300">
                         @lang('admin::app.components.datagrid.toolbar.per-page')
                     </p>