Changes

src/layouts/MainLayout.vue

@@ -13,12 +13,7 @@ import Navbar from 'src/components/Navbar.vue';
 <template>
     <q-layout view="hHh lpR fFf">
         <Navbar @toggle-drawer="onToggleDrawer()" />
-        <slot name="drawer"></slot>
+        <router-view> </router-view>
-        <q-page-container>
-
-            <router-view>
-            </router-view>
-        </q-page-container>
     </q-layout>
 </template>
 

src/pages/Customer/CustomerLayout.vue

@@ -1,18 +1,3 @@
-<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/Customer/CustomerList.vue

@@ -25,9 +25,14 @@ const customers = [
 function navigate(id) {
     router.push({ path: `/customer/${id}` });
 }
+
+// function onToggleDrawer() {
+//     drawer.value = !drawer.value;
+// }
 </script>
 
 <template>
+
     <q-page class="q-pa-md">
         <div class="column items-center q-gutter-y-md">
             <q-card v-for="customer in customers" :key="customer.id" class="card">
@@ -67,24 +72,13 @@ function navigate(id) {
                     </q-btn>
                     <q-separator vertical />
                     <q-card-actions vertical class="justify-between">
-                        <q-btn
+                        <q-btn flat round color="orange" icon="arrow_circle_right" @click="navigate(customer.id)" />
-                            flat
-                            round
-                            color="orange"
-                            icon="arrow_circle_right"
-                            @click="navigate(customer.id)"
-                        />
                         <q-btn flat round color="accent" icon="preview" />
                         <q-btn flat round color="accent" icon="vn:ticket" />
                         <q-card-actions>
-                            <q-btn
+                            <q-btn color="grey" round flat dense
-                                color="grey"
-                                round
-                                flat
-                                dense
                                 :icon="customer.expanded.value ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
-                                @click="customer.expanded.value = !customer.expanded.value"
+                                @click="customer.expanded.value = !customer.expanded.value" />
-                            />
                         </q-card-actions>
                     </q-card-actions>
                 </q-item>

src/pages/Customer/CustomerMain.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { ref } from 'vue';
+import LeftMenu from 'src/components/LeftMenu.vue';
+
+const drawer = ref(false);
+const miniState = ref(true);
+
+</script>
+
+<template>
+    <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>
+    <q-page-container>
+
+        <router-view></router-view>
+    </q-page-container>
+</template>

src/router/routes.js

@@ -29,15 +29,23 @@ const routes = [
                     roles: ['salesPerson'],
                 },
                 component: () => import('src/pages/Customer/CustomerLayout.vue'),
-                redirect: { name: 'CustomerList' },
+                redirect: { name: 'CustomerMain' },
                 children: [
                     {
-                        path: 'list',
+                        path: '',
-                        name: 'CustomerList',
+                        name: 'CustomerMain',
-                        meta: {
+                        component: () => import('src/pages/Customer/CustomerMain.vue'),
-                            title: 'list'
+                        redirect: { name: 'CustomerList' },
-                        },
+                        children: [
-                        component: () => import('src/pages/Customer/CustomerList.vue'),
+                            {
+                                path: 'list',
+                                name: 'CustomerList',
+                                meta: {
+                                    title: 'list'
+                                },
+                                component: () => import('src/pages/Customer/CustomerList.vue'),
+                            },
+                        ]
                     },
                     {
                         path: ':id',