เพิ่ม responsive

src/modules/00_support/components/FormChat.vue

@@ -20,7 +20,15 @@ function getOnlineStatus(option: "icon" | "status") {
     class="row q-py-md q-px-lg justify-between items-center"
     v-if="store.currentTitle && store.currentTitle.length > 0"
   >
-    <div class="col row">
+    <div class="col row items-center">
+      <q-btn
+        flat
+        padding="none"
+        class="q-mr-md"
+        icon="mdi-chevron-left"
+        @click="store.isOpen = false"
+        v-if="!$q.screen.gt.xs"
+      />
       <div style="border-radius: 50%; border: 1px solid teal">
         <q-avatar color="teal-1" text-color="white" size="40px">
           <q-icon :name="store.icon" size="24px" color="teal" />

src/modules/00_support/store/Main.ts

@@ -18,6 +18,7 @@ import { useCounterMixin } from "@/stores/mixin";
 export const useSupportStore = defineStore("supportServiceStore", () => {
   const { showLoader, hideLoader, messageError } = useCounterMixin();
   const $q = useQuasar();
+  const isOpen = ref<boolean>(false);
   const icon = ref<string>("mdi-account-check");
   const userId = ref<string | undefined>(keycloak.subject);
   const userStatus = ref<SupportUserStatus[]>([]);
@@ -227,6 +228,7 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
     sendMessage,
     newIssue,
     searchIssue,
+    isOpen,
     items,
     socket,
     scrollContainer,

src/modules/00_support/views/MainPage.vue

@@ -49,7 +49,7 @@ watch(searchData, () => {
         <q-card bordered>
           <div class="row">
             <!-- Left -->
-            <div class="col-xs-12 col-sm-4 col-md-3">
+            <div v-if="!store.isOpen" class="col-xs-12 col-sm-4 col-md-3">
               <!-- New -->
               <div class="q-pt-md bg-white">
                 <div class="q-px-md q-pb-md">
@@ -105,6 +105,7 @@ watch(searchData, () => {
                   <div
                     @click="
                       async () => {
+                        $q.screen.gt.xs ? '' : (store.isOpen = true);
                         store.currentIssue = item.id;
                         store.currentTitle = item.title;
                         store.issue
@@ -186,7 +187,7 @@ watch(searchData, () => {
             <q-separator vertical />
 
             <!-- Right -->
-            <div v-if="$q.screen.gt.xs" class="col-grow">
+            <div v-if="$q.screen.gt.xs || store.isOpen" class="col-grow">
               <form-chat v-if="store.currentIssue.length !== 0" />
             </div>
           </div>