From 75da3daf7124f4f7cf6c5b31c87d593e5f8e6b13 Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Fri, 15 Dec 2023 14:58:12 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/MainLayout.vue | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 714d554..57ccb3a 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -52,11 +52,11 @@ const onScroll = (info: any) => { scrollInfo.value = info}
 </script>
 <!-- โครงเว็บ -->
 <template>
-	<q-layout view="hHh LpR fFr">
-    	<q-scroll-observer @scroll="onScroll" />
+	<q-layout view="hHh LpR fFr" @scroll="onScroll" >
+		
 		<!-- header -->
-		<q-header flat class="text-dark col-12 bg-transparent" height-hint="7">
-			<q-toolbar class="q-my-xs items-center" :style="$q.screen.gt.xs ? 'padding: 1% 2%;': 'padding: 1% 4%;'">
+		<q-header flat :class="scrollInfo.position >= 10 ? 'text-dark col-12 bgHeader': 'text-dark col-12 bg-transparent'" height-hint="7">
+			<q-toolbar class="items-center" :style="$q.screen.gt.xs ? 'padding: 1% 2%;': 'padding: 1% 4%;'">
 				<div class="row items-center no-wrap cursor-pointer" @click="goHome" v-if="$q.screen.gt.xs">
 					<q-img src="@/assets/logo.png" spinner-color="white" style="height: 35px; max-width: 35px"/>
 					<q-separator vertical inset class="q-ml-md" />
@@ -130,7 +130,7 @@ const onScroll = (info: any) => { scrollInfo.value = info}
 									</div>
 
 									<div class="col-12 row" v-if="currentRouteName != 'contact'">
-										<q-page-scroller position="bottom-center" :scroll-offset="300" :offset="[18, 18]" >
+										<q-page-scroller  :scroll-offset="300" :offset="[18, 18]" >
 											<q-tabs content-class="red" no-caps active-color="primary" indicator-color="transparent" class="text-grey-8" v-model="tab">
 												<q-tab name="metadata" label="ข้อมูลหลัก" @click="router.push({ path: '/metadata' })"/>
 												<q-tab name="organizational" label="โครงสร้างอัตรากำลัง" @click="router.push({ path: '/organizational' })" />
@@ -221,4 +221,7 @@ const onScroll = (info: any) => { scrollInfo.value = info}
 	overflow-y:auto;
 }
 
+.bgHeader{
+	background: #1e2234e5;
+}
 </style>