fix: menu item first page responsive

src/components/ProfileMenu.vue

@@ -149,32 +149,38 @@ onMounted(async () => {
 </script>
 <template>
   <div>
-    <q-btn-dropdown
+    <q-btn
       rounded
       dense
       flat
       no-caps
-      content-style="border: 1px solid var(--border-color)"
-      :menu-offset="[0, 10]"
       color="dark"
       class="q-pa-none account-menu-down dropdown-menu"
     >
-      <template v-slot:label>
+      <div class="row items-center">
-        <q-item dense class="q-pa-none">
+        <div class="q-pa-none">
-          <q-item-section avatar class="q-pa-none" style="min-width: 30px">
+          <q-avatar
-            <q-avatar class="surface-1 bordered">
+            class="surface-1 bordered"
-              <img :src="userImage" v-if="userImage" />
+            :size="$q.screen.lt.sm ? '30px' : '40px'"
-              <q-icon name="mdi-account" v-else size="sm" />
-            </q-avatar>
-          </q-item-section>
-          <q-item-section
-            v-if="$q.screen.gt.xs"
-            class="text-left q-pa-none q-px-md"
           >
-            <q-item-label class="text-caption column">
+            <img :src="userImage" v-if="userImage" />
+            <q-icon
+              name="mdi-account"
+              v-else
+              :size="$q.screen.lt.sm ? 'xs' : 'sm'"
+            />
+          </q-avatar>
+        </div>
+
+        <div
+          class="text-left q-px-md"
+          v-if="$q.screen.gt.sm"
+          style="color: var(--foreground)"
+        >
+          <div class="text-caption column">
             <span
               v-if="isLoggedIn()"
-                class="text-weight-bold q-pb-xs ellipsis"
+              class="text-weight-bold ellipsis"
               style="max-width: 9vw"
             >
               {{ getName() }}
@@ -193,17 +199,28 @@ onMounted(async () => {
               </q-tooltip>
             </span>
 
-              <div style="font-size: 11px; color: var(--surface)">
+            <div style="font-size: 11px">
               {{ filterRole?.join(' | ') }}
             </div>
-            </q-item-label>
+          </div>
-          </q-item-section>
+        </div>
-        </q-item>
-      </template>
 
-      <div no-padding class="row justify-center" style="width: 273.797px">
+        <div v-if="$q.screen.gt.sm" class="text-right">
+          <q-icon name="mdi-chevron-down" />
+        </div>
+      </div>
+
+      <q-menu :offset="[5, 10]">
+        <div
+          no-padding
+          class="row justify-center bordered rounded"
+          style="overflow: hidden"
+        >
           <div class="column col-12 items-center">
-          <div class="full-width row justify-center" style="position: relative">
+            <div
+              class="full-width row justify-center"
+              style="position: relative"
+            >
               <div
                 class="full-width account-cover"
                 :class="{ dark: $q.dark.isActive }"
@@ -342,7 +359,8 @@ onMounted(async () => {
             />
           </div>
         </div>
-    </q-btn-dropdown>
+      </q-menu>
+    </q-btn>
   </div>
 </template>
 <style scoped lang="scss">

src/components/home/MenuItem.vue

@@ -33,7 +33,10 @@ function navigateTo(destination: string) {
 </script>
 
 <template>
-  <div class="menu-container">
+  <div
+    class="menu-container"
+    :style="`grid-template-columns: repeat(${$q.screen.gt.sm ? 4 : $q.screen.gt.xs ? 2 : 1}, 1fr)`"
+  >
     <AppBox
       class="column inline-flex items-center"
       :class="{ disabled: !!v.disabled }"
@@ -61,7 +64,7 @@ function navigateTo(destination: string) {
 <style scoped>
 .menu-container {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+
   gap: var(--size-6);
   & > * {
     transition: 100ms border-color ease-in-out;

src/layouts/MainLayout.vue

@@ -175,7 +175,7 @@ onMounted(async () => {
       <!-- drawer control -->
       <div
         style="position: relative"
-        :style="$q.screen.gt.xs ? 'z-index: 1000' : 'z-index: 1'"
+        :style="$q.screen.gt.xs ? 'z-index: 1000' : 'z-index: 10'"
       >
         <q-avatar
           size="36px"
@@ -209,20 +209,25 @@ onMounted(async () => {
       </div>
 
       <div
-        class="surface-3 bordered rounded q-px-lg q-pb-lg scroll column"
+        class="surface-3 bordered rounded q-pb-lg scroll column"
         style="height: calc(100vh - 32px); flex-wrap: nowrap"
       >
         <!-- header -->
         <div
-          class="row items-center justify-between q-pb-md surface-3 q-pt-lg"
+          class="q-px-lg 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">
+            <span
+              class="title-gradient text-weight-bold"
+              :class="{ 'text-h6': $q.screen.gt.xs }"
+            >
               {{
                 utilsStore.currentTitle?.title
                   ? $t(utilsStore.currentTitle?.title)
-                  : 'Welcome to Jobs Worker Service'
+                  : $q.screen.gt.xs
+                    ? 'Welcome to Jobs Worker Service'
+                    : 'Jobs Worker Service'
               }}
             </span>
             <span class="text-caption">
@@ -241,6 +246,7 @@ onMounted(async () => {
               dense
               flat
               class="noti-circle"
+              :size="$q.screen.lt.sm ? 'sm' : ''"
               :class="{ bordered: $q.dark.isActive, dark: $q.dark.isActive }"
               style="color: var(--surface-1)"
               @click="notiOpen = !notiOpen"
@@ -254,7 +260,6 @@ onMounted(async () => {
                 :offset="[0, 10]"
                 anchor="bottom middle"
                 self="top middle"
-                style="width: 300px"
                 @before-hide="notiOpen = false"
               >
                 <div class="q-px-md q-py-sm row col-12 items-center">
@@ -334,19 +339,19 @@ onMounted(async () => {
             <q-btn
               round
               unelevated
+              :size="$q.screen.lt.sm ? 'sm' : ''"
               v-model="currentLanguage"
               class="no-uppercase"
-              size="md"
             >
               <Icon
                 v-if="currentLanguage === 'English'"
                 icon="circle-flags:us"
-                style="width: 36px; height: 35px"
+                :width="$q.screen.lt.sm ? '28px' : '36px'"
               />
               <Icon
                 v-else
                 icon="circle-flags:th"
-                style="width: 36px; height: 35px"
+                :width="$q.screen.lt.sm ? '28px' : '36px'"
               />
 
               <q-menu
@@ -393,7 +398,7 @@ onMounted(async () => {
           </div>
         </div>
 
-        <q-page class="col">
+        <q-page class="col q-px-lg">
           <router-view />
         </q-page>
       </div>