feat: Header => logout & filter unread

src/layouts/MainLayout.vue

@@ -7,6 +7,7 @@ import { useI18n } from 'vue-i18n';
 
 import useLoader from 'stores/loader';
 import DrawerComponent from 'components/DrawerComponent.vue';
+import GlobalDialog from 'components/GlobalDialog.vue';
 
 interface NotificationButton {
   item: string;
@@ -27,6 +28,7 @@ const loaderStore = useLoader();
 const { visible } = storeToRefs(loaderStore);
 const { locale } = useI18n({ useScope: 'global' });
 
+const logoutModal = ref(false);
 const leftDrawerOpen = ref($q.screen.gt.sm);
 const filterUnread = ref(false);
 const unread = ref<number>(1);
@@ -56,8 +58,8 @@ const notiMenu = ref<NotificationButton[]>([
 const notification = ref<Notification[]>([
   {
     id: '1',
-    title: 'test',
-    content: 'test',
+    title: 'Unread',
+    content: 'Unread',
     read: false,
   },
   {
@@ -66,6 +68,12 @@ const notification = ref<Notification[]>([
     content: 'test',
     read: false,
   },
+  {
+    id: '3',
+    title: 'Read',
+    content: 'Already read',
+    read: true,
+  },
 ]);
 
 function setActive(button: NotificationButton) {
@@ -83,8 +91,12 @@ function setActive(button: NotificationButton) {
   }
 }
 
-function doLogout() {
-  logout();
+function doLogout(confirm?: boolean = false) {
+  logoutModal.value = true;
+  if (confirm) {
+    logoutModal.value = false;
+    logout();
+  }
 }
 </script>
 
@@ -112,6 +124,7 @@ function doLogout() {
             class="noti-circle"
             :class="{ bordered: $q.dark.isActive, dark: $q.dark.isActive }"
             style="color: var(--surface-1)"
+            @click="notiOpen = !notiOpen"
           >
             <q-icon name="mdi-bell" size="20px" />
             <q-badge v-if="unread !== 0" rounded floating color="negative">
@@ -150,7 +163,9 @@ function doLogout() {
                     clickable
                     class="q-py-sm"
                     v-ripple
-                    v-for="item in notification"
+                    v-for="item in !filterUnread
+                      ? notification
+                      : notification.filter((v) => !v.read)"
                     :key="item.id"
                   >
                     <q-avatar
@@ -200,6 +215,7 @@ function doLogout() {
             dense
             flat
             no-caps
+            :menu-offset="[0, 10]"
             color="dark"
             class="q-pa-none account-menu-down dropdown-menu"
           >
@@ -213,14 +229,14 @@ function doLogout() {
                   <q-avatar class="bg-primary" />
                 </q-item-section>
                 <q-item-section
-                  class="text-left text-dark q-pa-none q-px-md"
+                  class="text-left q-pa-none q-px-md"
                   v-if="$q.screen.gt.xs"
                 >
                   <q-item-label class="text-caption column">
                     <span class="text-weight-bold q-pb-xs text-primary">
                       {{ getName() }}
                     </span>
-                    <div style="font-size: 11px; color: var(--foreground)">
+                    <div style="font-size: 11px; color: var(--surface)">
                       {{ getRole()?.includes('admin') ? 'Admin' : 'User' }}
                     </div>
                   </q-item-label>
@@ -309,6 +325,14 @@ function doLogout() {
 
     <drawer-component v-model:leftDrawerOpen="leftDrawerOpen" />
 
+    <GlobalDialog
+      v-model="logoutModal"
+      title="ยืนยันการออกจากระบบ"
+      message="คุณต้องการออกจากระบบ ใช่หรือไม่"
+      icon="mdi-logout-variant"
+      :persistent="true"
+      :action="() => doLogout(true)"
+    />
     <global-loading :visibility="visible" />
   </q-layout>
 </template>
@@ -329,10 +353,9 @@ function doLogout() {
 }
 
 .noti-switch-on {
-  --_bg-color: var(--blue-0);
-  --_color: var(--blue-6);
-  background-color: var(--_bg-color);
-  color: var(--_color);
+  --_color: var(--blue-6-hsl);
+  background-color: hsla(var(--_color) / 0.1) !important;
+  color: hsl(var(--_color));
 }
 
 .noti-switch-off {