<template> <v-container> <v-row class="tw-m-auto tw-flex tw-items-center"> <v-col cols="2" class="pa-0 tw-h-[64px]"> <router-link to="/"><v-img src="/logo.jpg" alt="canrud" /></router-link> </v-col> <v-col cols="6" md="8" class="px-0"> <v-text-field label="Search keyword" hide-details="auto" variant="solo" append-inner-icon="mdi-magnify" @click:appendInner="handleClick" @keydown="handleKeyDown" v-model="input" > </v-text-field> </v-col> <v-col cols="4" md="2" class="px-0"> <v-btn variant="text" @click="dialogStore.updateDialog(true)" color="blue-darken-2 mt-4" >Concat Us </v-btn> </v-col> </v-row> </v-container> <div class="tabs"> <div class="tw-max-w-[1200px] tw-mx-auto"> <v-tabs mobile-breakpoint="580" v-model="tab" bg-color="blue-darken-1" slider-color="grey-lighten-3" tab-slider-size="6px" selected-class="active" :grow="screenWidth > 600 ? false : true" > <v-tab :value="1" to="/" ><span @click="handleTabClick" class="text-grey-lighten-3 tw-font-bold">Home</span> </v-tab> <v-tab :value="2" to="/products"> <span @click="handleTabClick" class="text-grey-lighten-3 tw-font-bold">Products</span> </v-tab> <v-tab :value="3" to="/about" ><span @click="handleTabClick" class="text-grey-lighten-3 tw-font-bold">About</span> </v-tab> <!-- <v-tab :value="4" to="/contact" ><span class="text-grey-lighten-3 tw-font-bold">Contact</span></v-tab > --> </v-tabs> </div> </div> <ContactDialog dialog /> </template> <script setup lang="ts"> import { ref, watchEffect } from 'vue' import ContactDialog from '@/components/ContactDialog.vue' import { useProductListStore } from '@/stores/product_list' import { useRouter } from 'vue-router' import { useDialogStore } from '@/stores/dialog' import { useCategoryStore } from '@/stores/category' import { useDisplay } from 'vuetify' const { width: screenWidth } = useDisplay() const dialogStore = useDialogStore() const productStore = useProductListStore() const categoryStore = useCategoryStore() const input = ref() const router = useRouter() const handleKeyDown = (e: any) => { if (e.keyCode == 13) { handleClick() } } const handleClick = () => { categoryStore.updateDisplay(!input.value) productStore.updateKeyword(input.value) productStore.updatePageNo(1) router.push('/products') } const tab = ref(1) const handleTabClick = () => { categoryStore.updateDisplay(true) productStore.updateKeyword('') } watchEffect(() => { input.value = productStore.keyword }) </script> <style lang="scss" scoped> .tabs { background-color: #1f88e5; } .active :deep { .v-tab__slider { bottom: 3px; } } </style>