Make use of slot

src/layouts/MainLayout.vue

@@ -1,36 +1,26 @@
 <script setup>
-import { ref } from 'vue';
+// import { ref } from 'vue';
 import Navbar from 'src/components/Navbar.vue';
-import LeftMenu from 'src/components/LeftMenu.vue';
-const drawer = ref(false);
-const miniState = ref(true);
+//import LeftMenu from 'src/components/LeftMenu.vue';
+// const drawer = ref(false);
+// const miniState = ref(true);
 
-function onToggleDrawer() {
-    drawer.value = !drawer.value;
-}
+// function onToggleDrawer() {
+//     drawer.value = !drawer.value;
+// }
 </script>
 
 <template>
     <q-layout view="hHh lpR fFf">
         <Navbar @toggle-drawer="onToggleDrawer()" />
-        <q-drawer
-            v-model="drawer"
-            show-if-above
-            :mini="miniState"
-            @mouseover="miniState = false"
-            @mouseout="miniState = true"
-            mini-to-overlay
-            :width="200"
-            :breakpoint="500"
-        >
-            <q-scroll-area class="fit text-grey-8">
-                <LeftMenu />
-            </q-scroll-area>
-        </q-drawer>
+        <slot name="drawer"></slot>
         <q-page-container>
-            <router-view></router-view>
+
+            <router-view>
+            </router-view>
         </q-page-container>
     </q-layout>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+</style>

src/pages/Customer/Card/CustomerCard.vue

@@ -1,15 +1,15 @@
+
+
 <template>
-    <div class="row fit fixed">
-        <div class="col-2">
-            <q-card square>
+    <slot name="drawer">
+        <q-drawer v-model="drawer" show-if-above :width="200" :breakpoint="500">
+            <q-scroll-area class="fit text-grey-8">
                 <router-link :to="{ path: '/customer/list' }">
                     <q-icon name="arrow_back" size="md" color="primary" />
                 </router-link>Descriptor
-            </q-card>
-        </div>
+            </q-scroll-area>
+        </q-drawer>
 
-        <div class="col">
-            <router-view></router-view>
-        </div>
-    </div>
+    </slot>
+    <router-view></router-view>
 </template>

src/pages/Customer/CustomerLayout.vue

@@ -1,3 +1,18 @@
+<script setup>
+import { ref } from 'vue';
+import LeftMenu from 'src/components/LeftMenu.vue';
+const drawer = ref(false);
+const miniState = ref(true);
+</script>
 <template>
+    <slot name="drawer">
+        <q-drawer v-model="drawer" show-if-above :mini="miniState" @mouseover="miniState = false"
+            @mouseout="miniState = true" mini-to-overlay :width="200" :breakpoint="500">
+            <q-scroll-area class="fit text-grey-8">
+                <LeftMenu />
+            </q-scroll-area>
+        </q-drawer>
+
+    </slot>
     <router-view></router-view>
 </template>

src/pages/Dashboard/DashboardLayout.vue

@@ -0,0 +1,17 @@
+<script setup>
+import { ref } from 'vue';
+import LeftMenu from 'src/components/LeftMenu.vue';
+const drawer = ref(false);
+const miniState = ref(true);
+</script>
+<template>
+    <slot name="drawer">
+        <q-drawer v-model="drawer" show-if-above :mini="miniState" @mouseover="miniState = false"
+            @mouseout="miniState = true" mini-to-overlay :width="200" :breakpoint="500">
+            <q-scroll-area class="fit text-grey-8">
+                <LeftMenu />
+            </q-scroll-area>
+        </q-drawer>
+    </slot>
+    <router-view></router-view>
+</template>

src/router/routes.js

@@ -1,4 +1,4 @@
-import customer from './modules/customer';
+//import customer from './modules/customer';
 import ticket from './modules/ticket';
 
 const routes = [
@@ -18,7 +18,43 @@ const routes = [
                 path: '/dashboard',
                 name: 'Dashboard',
                 meta: { title: 'dashboard', icon: 'dashboard' },
-                component: () => import('../pages/Dashboard/Dashboard.vue'),
+                component: () => import('../pages/Dashboard/DashboardLayout.vue'),
+            },
+            {
+                path: '/customer',
+                name: 'Customer',
+                meta: {
+                    title: 'customers',
+                    icon: 'vn:client',
+                    roles: ['salesPerson'],
+                },
+                component: () => import('src/pages/Customer/CustomerLayout.vue'),
+                redirect: { name: 'CustomerList' },
+                children: [
+                    {
+                        path: 'list',
+                        name: 'CustomerList',
+                        meta: {
+                            title: 'list'
+                        },
+                        component: () => import('src/pages/Customer/CustomerList.vue'),
+                    },
+                    {
+                        path: ':id',
+                        component: () => import('src/pages/Customer/Card/CustomerCard.vue'),
+                        redirect: { name: 'CustomerBasicData' },
+                        children: [
+                            {
+                                path: 'basic-data',
+                                name: 'CustomerBasicData',
+                                meta: {
+                                    title: 'basicData'
+                                },
+                                component: () => import('src/pages/Customer/Card/CustomerBasicData.vue'),
+                            }
+                        ]
+                    },
+                ]
             },
             /*             {
                             path: '/:pathMatch(.*)*',
@@ -26,7 +62,7 @@ const routes = [
                             component: () => import('../pages/NotFound.vue'),
                         }, */
             // Module routes
-            customer,
+            //customer,
             ticket,
         ],
     },