hrms-user/src/views/MainLayout.vue

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useQuasar } from "quasar";

const route = useRoute();
const router = useRouter();

const $q = useQuasar();
const link = ref<string>("");

const fullname = ref<string>("นางสาวธัญลักษณ์ รอดกูล");
const	notiList = [
    {
    id: 1,
    sender: "นัดหมาย",
    body: "เพิ่มการนัดหมาย",
    timereceive: "13/06/2566",
    },
    {
    id: 1,
    sender: "นัดหมาย",
    body: "เพิ่มการนัดหมาย",
    timereceive: "14/06/2566",
    },
];
const notiTrigger = ref(false);
const currentRouteName = router.currentRoute.value.name
const tab = ref(currentRouteName);

</script>
<!-- โครงเว็บ -->
<template>
	<q-layout view="hHh LpR fFr">
		<!-- header -->
		<q-header flat class="text-dark col-12 bg-top header-br" height-hint="7">
			<q-toolbar class="q-my-xs items-center" :style="$q.screen.gt.xs ? 'padding: 1% 2%;': 'padding: 1% 4%;'">
				<div class="row items-center no-wrap" v-if="$q.screen.gt.xs">
					<q-img src="@/assets/logo.png" spinner-color="white" style="height: 35px; max-width: 35px" />
					<div class="row q-ml-md items-center q-pt-xs">
						<div
							style="color: #ffffff; letter-spacing: 1px; line-height:10px;"
							class="text-body2 text-weight-bolder col-12"
						>
							ระบบ<span class="text-primary">ทรัพยากรบุคคล</span>
						</div>
						<div class="text-caption text-white">กรุงเทพมหานคร</div>
					</div>
				</div>
				<div v-else class="row items-center">
					<img src="@/assets/logo.png" style="height: 35px; max-width: 35px" />
				</div>
				<div v-if="$q.screen.gt.xs">
					<q-tabs
						v-model="tab"
						align="justify"
						indicator-color="transparent"
        				active-color="white bg-white-btn border-100"
						dense
						inline-label
						class="text-grey-5 tabsHome"
					>
						<q-tab class="border-100"  name="dashboard" label="หน้าแรก" icon="mdi-view-dashboard-outline" @click="router.push(`/`)" />
						<q-tab class="border-100" name="time" label="ลงเวลางาน" icon="mdi-map-marker-check-outline" />
						<q-tab class="border-100" name="leave" label="การลา" icon="mdi-calendar-blank-outline" />
					</q-tabs>
				</div>
				<q-space />
				<!-- Notification -->
				<q-btn
					round
					dense
					flat
					size="13px"
					:class="$q.screen.gt.xs ? 'bg-white-btn q-mx-md': 'q-mr-sm'"
					:color="notiList.length === 0 ? 'grey-6' : 'grey-8'"
					:disable="notiList.length === 0"
					>
					<q-icon name="mdi-bell-outline" size="22px" color="white" />
					<q-badge
						rounded
						v-show="notiList.length > 0"
						color="negative"
						text-color="white"
						floating
						>{{ notiList.length }}</q-badge
					>
					<q-menu v-model="notiTrigger" max-width="480px" :offset="[0, 10]">
						<div class="q-px-md q-py-sm row col-12 items-center">
							<div class="text-subtitle1 text-weight-medium">การแจ้งเตือน</div>
							<q-space />
							<q-btn label="ล้างข้อมูล" color="pink" dense class="text-caption" flat />

						</div>

						<q-list style="min-width: 300px" v-for="(n, index) in notiList" :key="index">
							<q-item v-ripple class="mytry q-py-sm" dense>
								<q-item-section avatar top style="min-width: 40px">
									<q-avatar rounded color="primary" size="25px" text-color="white">
										<span class="text-weight-medium text-uppercase">{{n.sender[0]}}</span>
									</q-avatar>
								</q-item-section>
								<q-item-section>
									<q-item-label caption class="text-black">{{n.body}}</q-item-label>
									<q-item-label caption class="row items-center text-grey-7"  style="font-size: 12px;">{{ n.timereceive }}</q-item-label>
								</q-item-section>
								<div>
									<q-btn
										size="sm"
										unelevated
										dense
										icon="mdi-close"
										class="mybtn q-mx-xs"
										v-close-popup
									></q-btn>
								</div>
							</q-item>
							<q-separator class="q-my-xs" color="grey-2"  v-if="index + 1 < notiList.length" :key="index" />
						</q-list>
					</q-menu>
				</q-btn>

				<!-- User -->
				<q-btn-dropdown 
					v-if="$q.screen.gt.xs" 
					rounded 
					dense 
					flat 
					:class="$q.screen.gt.xs ? 'bg-white-btn': ''" 
					color="white"
					class="q-pr-sm border-10"
					dropdown-icon="mdi-chevron-down">
					<template v-slot:label>
						<q-item dense v-close-popup class="q-pa-none q-pl-xs">
							<q-item-section avatar class="q-pa-none " style="min-width:30px;">
								<q-img src="@/assets/avatar_user.jpg" class="border-100" spinner-color="white" style="height: 30px; max-width: 30px;" />
							</q-item-section>
							<q-item-section class="text-left text-white q-pa-none q-pl-sm" >
								<q-item-label class="text-caption text-weight-medium">{{fullname}}</q-item-label>
							</q-item-section>
						</q-item>
					</template>
					<q-list>
						<q-item clickable v-close-popup >
							<q-item-section avatar style="min-width:30px;">
								<q-icon color="orange-9" size="18px" name="mdi-lock-outline" />
							</q-item-section>
							<q-item-section><q-item-label>เปลี่ยนรหัสผ่าน</q-item-label></q-item-section>
						</q-item>

						<q-item clickable v-close-popup >
							<q-item-section avatar style="min-width:30px;">
								<q-icon color="primary" size="18px" name="mdi-logout-variant" />
							</q-item-section>
							<q-item-section><q-item-label>ออกจากระบบ</q-item-label></q-item-section>
						</q-item>
					</q-list>
				</q-btn-dropdown>
				<div v-else class="q-ml-sm" style="width: 30px;">
					<q-img src="@/assets/avatar_user.jpg" class="border-100" spinner-color="white" style="height: 30px; max-width: 30px;" />
				</div>
			</q-toolbar>
		</q-header>
		<div class="bg-top" :style="$q.screen.gt.xs ? 'height: 200px;': 'height: 200px;'" />
		<!-- end header -->

		<q-footer class="bg-top" v-if="!$q.screen.gt.xs">
			<q-toolbar style="padding: 2% 2%;">
				<div class="row col-12 justify-around">
					<q-btn flat round class="bg-white-btn" color="white" icon="mdi-view-dashboard-outline" />
					<q-btn flat round color="white" icon="mdi-map-marker-check-outline" />
					<q-btn flat round color="white" icon="mdi-calendar-blank-outline"/>
					<q-btn flat round color="white" icon="mdi-account-outline" />
				</div>
			</q-toolbar>
		</q-footer>

		<q-page-container class="bg-grey-2 q-pb-md">
			<q-page :style="$q.screen.gt.xs ? 'padding: 1.8% 2%; margin-top: -200px;': 'padding: 5% 4%; margin-top: -200px;'">
				<router-view :key="$route.fullPath" />
			</q-page>
			</q-page-container>
	</q-layout>
</template>

<style>
.bg-drawer{
  background: #242a3d;
}
.menu {
  padding-bottom: 5px;
  padding-top: 5px;
}
.tabsHome .q-tab__icon{
	font-size: 18px;
}
.border-100{
	border-radius: 100px;
}
.bg-top{
	background: #273238;
}
.header-br{
	border-bottom: 1px solid #fdfdfd31;
}
.menuActive {
  background: #1e2234;
  border-radius: 0 100px 100px 0;
  margin-right: 4%;
}
.q-card {
  box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) !important;
	border: 1px solid #eeeded;
}
.q-menu {
  box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
}
.toptitle {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 1.2%;
}
.q-field--outlined .q-field__control{
	border-radius: 5px;
}
.q-field--outlined .q-field__control:before {
  border-color: #C8D3DB;
}
.q-field--outlined .q-icon{
	color: #7474747f;
}
</style>