refactor: responsive (#180)

* refactor: can open one dropdown whe lt.md

* style: update MainLayout background color and fix avatar border class name

* feat: add touch position binding for dropdown in ProfileMenu

* refactor: enhance icon styling in DrawerComponent

* fix: update screen size conditions

* feat: add responsive search and filter functionality in MainPage

* feat: update styling and functionality in BasicInformation and MainPage components

* feat: package view mode improve layout and responsiveness

* feat: improve layout and responsiveness of ProfileBanner component

* feat: enhance TreeView component with improved icon layout and cursor pointer styling

* feat: update DialogForm component to prevent text wrapping in the center column

* feat: enhance FormDocument, PriceDataComponent, and BasicInfoProduct components with layout and styling improvements

* feat: enhance ProfileBanner dark tab

* feat: 02 => responsive & responsibleArea type

* fix: layout header bg condition & 02 filter col

* feat: 04 flow => add AddButton component and enhance layout in FormFlow and FlowDialog

* feat: 07 => enhance layout and responsiveness

* refactor: simplify header structure and improve layout consistency

* fix: improve text color in ItemCard and adjust responsive breakpoints in product service group

* refactor: 05 => enhance layout responsiveness and improve class bindings in quotation components

* refactor: enhance styling and improve props flexibility in dialog and select components

* refactor: 05 => enhance layout responsiveness in quotation components

* refactor: 05 => enhance layout responsiveness

* refactor: 05 => formWorkerAdd

* refactor: 05 => formWorkerAdd Product table

* refactor: 05 => improve layout responsiveness and enhance component structure

* refactor: enhance grid view handling and improve component imports

* refactor: improve column classes for better layout consistency

* refactor: 09 => enhance layout structure and improve responsiveness in task order views

* refactor: 10 => enhance invoice main page layout and improve component interactions

* refactor: 13 => enhance receipt main page layout and improve component interactions

* refactor: 11 => enhance layout and improve responsiveness in credit note pages

* refactor: 01 => screen.sm search & filter

* refactor: 01 => improve layout responsiveness and fix variable naming in branch management forms

---------

Co-authored-by: puriphatt <puriphat@frappet.com>

src/layouts/DrawerComponent.vue

@@ -5,6 +5,7 @@ import { storeToRefs } from 'pinia';
 import { Icon } from '@iconify/vue';
 import useMyBranch from 'stores/my-branch';
 import { getUserId, getRole } from 'src/services/keycloak';
+import { useQuasar } from 'quasar';
 
 type Menu = {
   label: string;
@@ -17,6 +18,8 @@ type Menu = {
 };
 
 const router = useRouter();
+const $q = useQuasar();
+
 const userBranch = useMyBranch();
 const { currentMyBranch } = storeToRefs(userBranch);
 
@@ -35,17 +38,6 @@ const currentPath = computed(() => {
   return router.currentRoute.value.path;
 });
 
-// const labelMenu = ref<
-//   {
-//     label: string;
-//     icon: string;
-//     route: string;
-//     hidden?: boolean;
-//     disabled?: boolean;
-//     isax?: boolean;
-//   }[]
-// >([]);
-
 function navigateTo(label: string, destination?: string) {
   if (!destination) return;
   router.push(`${destination}`);
@@ -57,6 +49,8 @@ function reActiveMenu() {
   );
 
   const currMenuIndex = menuData.value.findIndex((m) => m === currMenu);
+
+  if ($q.screen.lt.sm) menuActive.value.fill(false);
   menuActive.value[currMenuIndex] = true;
 }
 
@@ -204,7 +198,6 @@ onMounted(async () => {
     :width="mini ? 80 : 256"
     show-if-above
   >
-    <!-- :width="$q.screen.lt.sm ? $q.screen.width - 16 : 256" -->
     <section
       class="scroll"
       style="overflow-x: hidden; scrollbar-gutter: stable"
@@ -236,7 +229,6 @@ onMounted(async () => {
             :disable="menu.disabled"
             :header-class="{
               row: true,
-              'justify-between': !mini,
               'no-padding justify-center': mini,
               'active-menu text-weight-bold': menuActive[i],
               'text-weight-medium': !menu.disabled,
@@ -254,7 +246,12 @@ onMounted(async () => {
                   :class="`isax ${menu.icon}`"
                   style="font-size: 24px"
                 />
-                <Icon v-else :icon="menu.icon || ''" width="24px" />
+                <Icon
+                  v-else
+                  :icon="menu.icon || ''"
+                  width="24px"
+                  :class="{ 'fix-icon': !menuActive[i] }"
+                />
                 <span
                   v-if="!mini"
                   class="q-pl-sm"
@@ -514,4 +511,12 @@ onMounted(async () => {
     border-bottom-right-radius: var(--radius-2);
   }
 }
+
+.fix-icon {
+  color: var(--text-mute-2) !important;
+}
+
+:deep(.q-item.q-item-type.row.no-wrap.q-item--dense.disabled) {
+  opacity: 30% !important;
+}
 </style>

src/layouts/MainLayout.vue

@@ -208,6 +208,9 @@ onMounted(async () => {
         <div
           class="q-px-lg row items-center justify-start q-pb-md q-pt-lg"
           style="position: sticky; top: 0; z-index: 8"
+          :style="`
+            background: ${$q.screen.lt.md ? ($q.dark.isActive ? '#1c1d21' : '#ecedef') : 'transparent'};
+          `"
         >
           <q-btn
             v-if="$q.screen.lt.sm"
@@ -530,7 +533,7 @@ onMounted(async () => {
   }
 }
 
-.avartar-border {
+.avatar-border {
   margin-top: 24px;
   border: 5px solid var(--surface-1);
   border-radius: 50%;

src/layouts/ProfileMenu.vue

@@ -317,6 +317,7 @@ onMounted(async () => {
                     max-width="200"
                     :offset="[10, 0]"
                     style="width: 160px"
+                    :touch-position="$q.screen.lt.sm"
                   >
                     <div v-for="(mode, index) in themeMode" :key="index">
                       <q-item clickable @click="theme = setTheme(mode.value)">