แก้ toolbar

src/views/HomeView.vue

@@ -1,4 +1,3 @@
-
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
@@ -327,7 +326,118 @@ onMounted(async () => {
   <div class="col-12 row justify-center">
     <div class="col-xs-12 col-sm-12 col-md-12">
       <q-card flat class="row col-12 cardNone">
-        <div :class="getClass(stetusCheckin)">
+        <!-- <q-header elevated class="bg-purple"> -->
+        <q-toolbar :class="getClass(stetusCheckin)">
+          <q-btn
+            icon="history"
+            unelevated
+            rounded
+            dense
+            flat
+            color="white"
+            :label="$q.screen.gt.xs ? 'ประวัติการลงเวลา' : ''"
+            :class="$q.screen.gt.xs ? 'q-px-md' : ''"
+            @click="router.push('/history')"
+          />
+          <q-space />
+
+          <strong v-if="stetusCheckin" style="font-size: 1rem;">
+            ลงเวลาเข้างาน
+          </strong>
+          <strong v-else style="font-size: 1rem;">ลงเวลาออกงาน</strong>
+          <q-space />
+          <q-btn
+            round
+            dense
+            flat
+            size="13px"
+            class="q-mx-md"
+            :disable="notiList.length === 0"
+          >
+            <q-icon name="notifications" size="24px" color="white" />
+
+            <q-badge
+              rounded
+              v-show="notiList.length > 0"
+              color="negative"
+              text-color="white"
+              floating
+              >{{ notiList.length }}</q-badge
+            >
+            <q-menu v-model="notiTrigger" max-width="480px" :offset="[0, 10]">
+              <div class="q-px-md q-py-sm row col-12 items-center">
+                <div class="text-subtitle1 text-weight-medium">
+                  การแจ้งเตือน
+                </div>
+              </div>
+
+              <q-list
+                style="min-width: 300px"
+                v-for="n in notiList"
+                :key="n.id"
+              >
+                <q-item v-ripple class="mytry q-py-xs" dense>
+                  <q-item-section avatar top style="min-width: 40px">
+                    <q-avatar color="primary" size="22px" text-color="white">
+                      <span class="text-weight-medium text-uppercase">{{
+                        n.sender
+                      }}</span>
+                    </q-avatar>
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label caption class="text-black">{{
+                      n.body
+                    }}</q-item-label>
+                    <q-item-label
+                      caption
+                      class="row items-center text-grey-7"
+                      >{{ date2Thai(n.timereceive) }}</q-item-label
+                    >
+                  </q-item-section>
+                  <q-btn
+                    size="sm"
+                    unelevated
+                    dense
+                    icon="mdi-close"
+                    class="mybtn q-mx-xs"
+                    @click="onClickDelete(n.id)"
+                  ></q-btn>
+                </q-item>
+                <q-separator color="grey-2" />
+              </q-list>
+            </q-menu>
+          </q-btn>
+          <q-btn round dense flat icon="account_circle" style="font-size: 16px">
+            <q-menu>
+              <div class="q-pa-md" style="max-width: 500px">
+                <q-list>
+                  <q-item>
+                    <q-item-section avatar>
+                      <q-icon color="primary" name="account_circle" />
+                    </q-item-section>
+
+                    <q-item-section>{{ fullName }}</q-item-section>
+                  </q-item>
+
+                  <q-item class="text-center">
+                    <q-item-section>
+                      <q-item-label>
+                        <q-btn
+                          color="primary"
+                          label="ออกจากระบบ"
+                          push
+                          size="sm"
+                          @click="onClickLogout"
+                      /></q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </div> </q-menu
+          ></q-btn>
+        </q-toolbar>
+
+        <!-- </q-header> -->
+        <!-- <div :class="getClass(stetusCheckin)">
           <div class="col-2">
             <q-btn
               icon="history"
@@ -441,7 +551,7 @@ onMounted(async () => {
                 </div> </q-menu
             ></q-btn>
           </div>
-        </div>
+        </div> -->
         <div class="col-12 q-pa-md text-grey-9">
           <div class="col-12 row justify-center">
             <div class="col-12 row q-py-sm justify-center">
@@ -723,4 +833,4 @@ onMounted(async () => {
   width: 100%;
   height: 100%;
 }
-</style>
+</style>