fix: layout and utilsStore

src/components/DrawerComponent.vue

@@ -87,11 +87,10 @@ function navigateTo(label: string, destination: string) {
 <template>
   <!-- Drawer -->
   <q-drawer
-    :breakpoint="500"
     v-model="leftDrawerOpen"
-    behavior="mobile"
     side="left"
-    show-if-above
+    :breakpoint="599"
+    :width="$q.screen.lt.md ? 200 : 300"
   >
     <div class="main-bar">
       <div
@@ -155,4 +154,8 @@ function navigateTo(label: string, destination: string) {
     }
   }
 }
+
+:deep(.q-drawer) {
+  z-index: 5 !important;
+}
 </style>

src/layouts/MainLayout.vue

@@ -2,13 +2,7 @@
 import { ref, onMounted, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useQuasar } from 'quasar';
-import {
+import { getUserId, getUsername, logout } from 'src/services/keycloak';
-  getName,
-  getRole,
-  getUserId,
-  getUsername,
-  logout,
-} from 'src/services/keycloak';
 import { Icon } from '@iconify/vue';
 import { useI18n } from 'vue-i18n';
 
@@ -19,9 +13,9 @@ import ProfileMenu from 'components/ProfileMenu.vue';
 import useUserStore from 'src/stores/user';
 import FormDialog from 'components/FormDialog.vue';
 import useOptionStore from 'src/stores/options';
-import { Option } from 'src/stores/user/types';
 import { dialog } from 'src/stores/utils';
 import { setLocale } from 'src/utils/datetime';
+import useUtilsStore from 'src/stores/utils';
 
 interface NotificationButton {
   item: string;
@@ -38,6 +32,7 @@ interface Notification {
 
 const $q = useQuasar();
 const loaderStore = useLoader();
+const utilsStore = useUtilsStore();
 const optionStore = useOptionStore();
 
 const { visible } = storeToRefs(loaderStore);
@@ -46,10 +41,10 @@ const userStore = useUserStore();
 
 const rawOption = ref();
 const canvasModal = ref(false);
-const leftDrawerOpen = ref(false);
+const leftDrawerOpen = ref(true);
 const filterUnread = ref(false);
 const unread = ref<number>(1);
-const filterRole = ref<string[]>();
+// const filterRole = ref<string[]>();
 const userImage = ref<string>();
 const canvasRef = ref();
 const currentLanguage = ref<string>('ไทย');
@@ -174,102 +169,153 @@ onMounted(async () => {
 
 <template>
   <q-layout view="lHh Lpr lFf">
-    <q-header style="background-color: var(--background)">
+    <drawer-component v-model:leftDrawerOpen="leftDrawerOpen" />
-      <div class="row items-center justify-between q-py-md q-px-lg">
-        <q-btn
-          round
-          unelevated
-          id="drawer-toggler"
-          :icon="leftDrawerOpen ? 'mdi-backburger' : 'mdi-forwardburger'"
-          :class="{ bordered: $q.dark.isActive }"
-          class="surface-2"
-          style="color: var(--gray-6)"
-          @click="leftDrawerOpen = !leftDrawerOpen"
-        />
 
-        <div class="row q-gutter-x-md items-center">
+    <q-page-container class="surface-1 q-pa-md">
-          <!-- notification -->
+      <!-- drawer control -->
+      <div style="position: relative; z-index: 10">
+        <q-avatar
+          size="36px"
+          style="
+            position: absolute;
+            top: 28px;
+            left: -18px;
+            background-color: var(--surface-1);
+          "
+        >
           <q-btn
-            round
-            dense
             flat
-            class="noti-circle"
+            dense
-            :class="{ bordered: $q.dark.isActive, dark: $q.dark.isActive }"
+            round
-            style="color: var(--surface-1)"
+            size="12px"
-            @click="notiOpen = !notiOpen"
+            aria-label="Menu"
+            id="btn-open-drawer"
+            style="
+              background-color: hsl(var(--negative-bg) / 0.1);
+              overflow: hidden;
+            "
+            @click="leftDrawerOpen = !leftDrawerOpen"
           >
-            <q-icon name="mdi-bell" size="20px" />
+            <q-icon
-            <q-badge v-if="unread !== 0" rounded floating color="negative">
+              :name="leftDrawerOpen ? 'mdi-backburger' : 'mdi-forwardburger'"
-              {{ unread }}
+              size="16px"
-            </q-badge>
+              style="color: hsl(var(--negative-bg))"
+            />
+          </q-btn>
+        </q-avatar>
+      </div>
 
-            <q-menu
+      <div
-              :offset="[0, 10]"
+        class="surface-3 bordered rounded q-px-lg q-pb-lg scroll column"
-              anchor="bottom middle"
+        style="height: calc(100vh - 32px); flex-wrap: nowrap"
-              self="top middle"
+      >
-              style="width: 300px"
+        <!-- header -->
-              @before-hide="notiOpen = false"
+        <div
+          class="row items-center justify-between q-pb-md surface-3 q-pt-lg"
+          style="position: sticky; top: 0; z-index: 8"
+        >
+          <div class="column">
+            <span class="title-gradient text-h6 text-weight-bold">
+              {{
+                utilsStore.currentTitle?.title
+                  ? $t(utilsStore.currentTitle?.title)
+                  : 'Welcome to Jobs Worker Service'
+              }}
+            </span>
+            <span class="text-caption">
+              {{
+                utilsStore.currentTitle?.caption
+                  ? $t(utilsStore.currentTitle?.caption)
+                  : ''
+              }}
+            </span>
+          </div>
+
+          <div class="row q-gutter-x-md items-center">
+            <!-- notification -->
+            <q-btn
+              round
+              dense
+              flat
+              class="noti-circle"
+              :class="{ bordered: $q.dark.isActive, dark: $q.dark.isActive }"
+              style="color: var(--surface-1)"
+              @click="notiOpen = !notiOpen"
             >
-              <div class="q-px-md q-py-sm row col-12 items-center">
+              <q-icon name="mdi-bell" size="20px" />
-                <div class="text-subtitle1 text-weight-bold">แจ้งเตือน</div>
+              <q-badge v-if="unread !== 0" rounded floating color="negative">
-                <q-space />
+                {{ unread }}
-              </div>
+              </q-badge>
-              <div class="q-px-md q-pb-md q-gutter-x-md">
-                <q-btn
-                  rounded
-                  padding="0px 10px"
-                  class="text-weight-medium"
-                  v-for="(btn, index) in notiMenu"
-                  :flat="!btn.active"
-                  :unelevated="btn.active"
-                  :key="index"
-                  :label="btn.item"
-                  :class="btn.color"
-                  @click="setActive(btn)"
-                />
-              </div>
-              <q-infinite-scroll :offset="250">
-                <div class="caption cursor-pointer">
-                  <q-item
-                    dense
-                    clickable
-                    class="q-py-sm"
-                    v-ripple
-                    v-for="item in !filterUnread
-                      ? notification
-                      : notification.filter((v) => !v.read)"
-                    :key="item.id"
-                  >
-                    <q-avatar
-                      color="positive"
-                      style="height: 30px; width: 30px"
-                    >
-                      <q-icon color="white" name="mdi-check" />
-                    </q-avatar>
 
-                    <div class="col-6 column text-caption q-pl-md ellipsis">
+              <q-menu
-                      <span class="block ellipsis full-width text-weight-bold">
+                :offset="[0, 10]"
-                        {{ item.title }}
+                anchor="bottom middle"
-                      </span>
+                self="top middle"
-                      <span class="block ellipsis full-width text-stone">
+                style="width: 300px"
-                        {{ item.content }}
+                @before-hide="notiOpen = false"
-                      </span>
+              >
-                    </div>
+                <div class="q-px-md q-py-sm row col-12 items-center">
-                    <span align="right" class="col text-caption text-stone">
+                  <div class="text-subtitle1 text-weight-bold">แจ้งเตือน</div>
-                      <!-- {{ moment(item.createdAt).fromNow() }} -->
+                  <q-space />
-                      5 s
-                    </span>
-                    <q-tooltip
-                      anchor="top middle"
-                      self="bottom middle"
-                      :delay="1000"
-                      :offset="[10, 10]"
-                    >
-                      {{ item.content }}
-                    </q-tooltip>
-                  </q-item>
                 </div>
-                <!-- <template v-slot:loading>
+                <div class="q-px-md q-pb-md q-gutter-x-md">
+                  <q-btn
+                    rounded
+                    padding="0px 10px"
+                    class="text-weight-medium"
+                    v-for="(btn, index) in notiMenu"
+                    :flat="!btn.active"
+                    :unelevated="btn.active"
+                    :key="index"
+                    :label="btn.item"
+                    :class="btn.color"
+                    @click="setActive(btn)"
+                  />
+                </div>
+                <q-infinite-scroll :offset="250">
+                  <div class="caption cursor-pointer">
+                    <q-item
+                      dense
+                      clickable
+                      class="q-py-sm"
+                      v-ripple
+                      v-for="item in !filterUnread
+                        ? notification
+                        : notification.filter((v) => !v.read)"
+                      :key="item.id"
+                    >
+                      <q-avatar
+                        color="positive"
+                        style="height: 30px; width: 30px"
+                      >
+                        <q-icon color="white" name="mdi-check" />
+                      </q-avatar>
+
+                      <div class="col-6 column text-caption q-pl-md ellipsis">
+                        <span
+                          class="block ellipsis full-width text-weight-bold"
+                        >
+                          {{ item.title }}
+                        </span>
+                        <span class="block ellipsis full-width text-stone">
+                          {{ item.content }}
+                        </span>
+                      </div>
+                      <span align="right" class="col text-caption text-stone">
+                        <!-- {{ moment(item.createdAt).fromNow() }} -->
+                        5 s
+                      </span>
+                      <q-tooltip
+                        anchor="top middle"
+                        self="bottom middle"
+                        :delay="1000"
+                        :offset="[10, 10]"
+                      >
+                        {{ item.content }}
+                      </q-tooltip>
+                    </q-item>
+                  </div>
+                  <!-- <template v-slot:loading>
                   <div
                     class="text-center q-my-md"
                     v-if="noti && noti?.result.length < noti?.total"
@@ -277,91 +323,79 @@ onMounted(async () => {
                     <q-spinner-dots color="primary" size="40px" />
                   </div>
                 </template> -->
-              </q-infinite-scroll>
+                </q-infinite-scroll>
-            </q-menu>
+              </q-menu>
-          </q-btn>
+            </q-btn>
 
-          <!-- เปลี่นนภาษา -->
+            <!-- เปลี่นนภาษา -->
-          <q-btn
+            <q-btn
-            round
+              round
-            unelevated
+              unelevated
-            v-model="currentLanguage"
+              v-model="currentLanguage"
-            class="no-uppercase"
+              class="no-uppercase"
-            size="md"
+              size="md"
-          >
-            <Icon
-              v-if="currentLanguage === 'English'"
-              icon="circle-flags:us"
-              style="width: 36px; height: 35px"
-            />
-            <Icon
-              v-else
-              icon="circle-flags:th"
-              style="width: 36px; height: 35px"
-            />
-
-            <q-menu
-              :offset="[0, 10]"
-              fit
-              anchor="bottom left"
-              self="top left"
-              auto-close
             >
-              <q-list v-for="v in language" :key="v.value">
+              <Icon
-                <q-item
+                v-if="currentLanguage === 'English'"
-                  v-if="!v.label.includes(currentLanguage)"
+                icon="circle-flags:us"
-                  clickable
+                style="width: 36px; height: 35px"
-                  @click="
+              />
-                    locale = v.value;
+              <Icon
-                    currentLanguage = v.label;
+                v-else
-                    setLocale(v.date);
+                icon="circle-flags:th"
-                  "
+                style="width: 36px; height: 35px"
-                >
+              />
-                  <q-item-section>
-                    <div class="row items-center">
-                      <Icon :icon="`circle-flags:${v.icon}`" class="q-mr-md" />
-                      {{ v.label }}
-                    </div>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
 
-          <!-- User -->
+              <q-menu
-          <ProfileMenu
+                :offset="[0, 10]"
-            @logout="doLogout"
+                fit
-            @edit-personal-info="console.log('edit')"
+                anchor="bottom left"
-            @signature="
+                self="top left"
-              () => {
+                auto-close
-                canvasModal = true;
+              >
-              }
+                <q-list v-for="v in language" :key="v.value">
-            "
+                  <q-item
-          />
+                    v-if="!v.label.includes(currentLanguage)"
+                    clickable
+                    @click="
+                      locale = v.value;
+                      currentLanguage = v.label;
+                      setLocale(v.date);
+                    "
+                  >
+                    <q-item-section>
+                      <div class="row items-center">
+                        <Icon
+                          :icon="`circle-flags:${v.icon}`"
+                          class="q-mr-md"
+                        />
+                        {{ v.label }}
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
 
-          <!-- theme -->
+            <!-- User -->
-          <!-- <q-btn
+            <ProfileMenu
-            round
+              @logout="doLogout"
-            unelevated
+              @edit-personal-info="console.log('edit')"
-            id="drawer-toggler"
+              @signature="
-            icon="mdi-switch"
+                () => {
-            :class="{ bordered: $q.dark.isActive }"
+                  canvasModal = true;
-            class="surface-2"
+                }
-            style="color: var(--gray-6)"
+              "
-            @click="$q.dark.toggle()"
+            />
-          /> -->
+          </div>
         </div>
+
+        <q-page class="col">
+          <router-view />
+        </q-page>
       </div>
-    </q-header>
-
-    <q-page-container style="background-color: transparent">
-      <q-page class="q-px-lg q-pb-lg">
-        <router-view />
-      </q-page>
     </q-page-container>
 
-    <drawer-component v-model:leftDrawerOpen="leftDrawerOpen" />
-
     <FormDialog
       width="800px"
       height="550px"
@@ -458,4 +492,16 @@ onMounted(async () => {
     border: 1px solid hsl(var(--negative-bg));
   }
 }
+
+.title-gradient {
+  background: linear-gradient(to right, var(--brand-1), var(--brand-2));
+  background-clip: text; /* Standard property */
+  -webkit-background-clip: text; /* WebKit fallback */
+  -webkit-text-fill-color: transparent; /* WebKit fallback */
+  color: transparent; /* Fallback for browsers not supporting text-clip */
+}
+
+:deep(main.q-page) {
+  min-height: 0 !important;
+}
 </style>

src/stores/utils/index.ts

@@ -1,6 +1,8 @@
 import { Dialog } from 'quasar';
 import GlobalDialog from 'components/GlobalDialog.vue';
 import { ComposerTranslation, useI18n } from 'vue-i18n';
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
 
 export function dialog(opts: {
   title: string;
@@ -91,3 +93,16 @@ export function formatNumberDecimal(num: number, point: number): string {
     maximumFractionDigits: point,
   });
 }
+
+const useUtilsStore = defineStore('utilsStore', () => {
+  const currentTitle = ref<{ title: string; caption: string }>({
+    title: '',
+    caption: '',
+  });
+
+  return {
+    currentTitle,
+  };
+});
+
+export default useUtilsStore;