changes

app/components/orders/Orders.vue

@@ -3,6 +3,7 @@ import OrderHighlightCard from '@/components/orders/OrderHighlightCard.vue';
 import OrderPipeline from '@/components/orders/OrderPipeline.vue';
 import OrdersTable from '@/components/orders/OrdersTable.vue';
 
+const { $store } = useNuxtApp();
 const highlights = [
   {
     name: 'Nháp',
@@ -45,30 +46,36 @@ const viewMode = ref('list');
 </script>
 <template>
   <div>
-    <div class="content is-flex is-gap-2 is-justify-content-flex-end is-align-items-center">
-      <div class="tabs is-toggle m-0">
-        <ul class="is-flex-grow-0 ml-auto">
-          <li
-            v-for="mode in viewModes"
-            :key="mode.name"
-            :class="[mode.name === viewMode && 'is-active']"
-            @click="viewMode = mode.name"
-          >
-            <a class="px-3 py-1">
-              <span class="icon m-0">
-                <Icon :name="mode.icon" :size="18" />
-              </span>
-            </a>
-          </li>
-        </ul>
+    <Teleport
+      defer
+      to="#header-right-slot"
+      v-if="$store.tabinfo.tab.code === 'orders'"
+      >
+      <div class="is-flex is-gap-2 is-justify-content-flex-end is-align-items-center">
+        <div class="tabs is-toggle m-0">
+          <ul class="is-flex-grow-0 ml-auto">
+            <li
+              v-for="mode in viewModes"
+              :key="mode.name"
+              :class="[mode.name === viewMode && 'is-active']"
+              @click="viewMode = mode.name"
+            >
+              <a class="px-3 py-1">
+                <span class="icon m-0">
+                  <Icon :name="mode.icon" :size="18" />
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+        <button class="button fs-14 is-primary">
+          <span class="icon">
+            <Icon :size="18" name="material-symbols:add-2-rounded" />
+          </span>
+          <span>Tạo đơn hàng</span>
+        </button>
       </div>
-      <button class="button fs-14 is-primary">
-        <span class="icon">
-          <Icon :size="18" name="material-symbols:add-2-rounded" />
-        </span>
-        <span>Tạo đơn hàng</span>
-      </button>
-    </div>
+    </Teleport>
     <div class="fixed-grid has-2-cols-mobile has-5-cols">
       <div class="grid">
         <OrderHighlightCard