122 lines
3.7 KiB
Vue
Executable File
122 lines
3.7 KiB
Vue
Executable File
<script setup lang="ts">
|
|
import { ref, watch, computed } from "vue";
|
|
import { useCustomizerStore } from "~/store/customizer";
|
|
|
|
import { Icon } from "@iconify/vue";
|
|
import Logo from "../logo/Logo.vue";
|
|
|
|
const customizer = useCustomizerStore();
|
|
const showSearch = ref(false);
|
|
const priority = ref(customizer.setHorizontalLayout ? 0 : 0);
|
|
function searchbox() {
|
|
showSearch.value = !showSearch.value;
|
|
}
|
|
watch(priority, (newPriority) => {
|
|
priority.value = newPriority;
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<v-app-bar
|
|
elevation="0"
|
|
:priority="priority"
|
|
height="70"
|
|
id="top"
|
|
class="main-head"
|
|
>
|
|
<v-btn
|
|
class="hidden-lg-and-up custom-hover-primary"
|
|
size="small"
|
|
variant="text"
|
|
color="primary"
|
|
icon
|
|
@click.stop="customizer.SET_SIDEBAR_DRAWER"
|
|
>
|
|
<Icon icon="solar:hamburger-menu-line-duotone" height="22" />
|
|
</v-btn>
|
|
|
|
<!-- ---------------------------------------------- -->
|
|
<!-- Search part -->
|
|
<!-- ---------------------------------------------- -->
|
|
<Searchbar />
|
|
|
|
<!-- ---------------------------------------------- -->
|
|
<!-- Mega menu -->
|
|
<!-- ---------------------------------------------- -->
|
|
<div class="hidden-sm-and-down">
|
|
<Navigations />
|
|
</div>
|
|
|
|
<v-spacer class="hidden-sm-and-down" />
|
|
|
|
<!-- ---------------------------------------------- -->
|
|
<!-- Mobile Logo -->
|
|
<!-- ---------------------------------------------- -->
|
|
<div class="hidden-md-and-up">
|
|
<Logo />
|
|
</div>
|
|
|
|
<ThemeToggler />
|
|
|
|
<!-- ---------------------------------------------- -->
|
|
<!-- translate -->
|
|
<!-- ---------------------------------------------- -->
|
|
<div class="hidden-sm-and-down">
|
|
<LanguageDD />
|
|
</div>
|
|
|
|
<!-- ---------------------------------------------- -->
|
|
<!-- ShoppingCart -->
|
|
<!-- ---------------------------------------------- -->
|
|
<!-- <v-btn icon class="custom-hover-primary hidden-sm-and-down" size="small" variant="text" color="primary" to="/ecommerce/checkout">
|
|
<v-badge color="error" :content="getCart?.length">
|
|
<Icon icon="solar:cart-large-2-outline" height="22" />
|
|
</v-badge>
|
|
</v-btn> -->
|
|
|
|
<!-- ---------------------------------------------- -->
|
|
<!-- Notification -->
|
|
<!-- ---------------------------------------------- -->
|
|
<div class="hidden-sm-and-down">
|
|
<NotificationDD />
|
|
</div>
|
|
|
|
<!-- ---------------------------------------------- -->
|
|
<!-- User Profile -->
|
|
<!-- ---------------------------------------------- -->
|
|
<div class="hidden-sm-and-down">
|
|
<ProfileDD />
|
|
</div>
|
|
|
|
<!----Mobile ----->
|
|
<v-menu :close-on-content-click="true" class="mobile_popup">
|
|
<template v-slot:activator="{ props }">
|
|
<v-btn
|
|
icon
|
|
class="hidden-md-and-up custom-hover-primary"
|
|
color="primary"
|
|
variant="text"
|
|
v-bind="props"
|
|
size="small"
|
|
>
|
|
<Icon icon="solar:menu-dots-bold-duotone" height="22" />
|
|
</v-btn>
|
|
</template>
|
|
<v-sheet rounded="lg" elevation="10" class="mt-4 dropdown-box px-4 py-3">
|
|
<div class="d-flex justify-space-between align-center">
|
|
<RightMobileSidebar />
|
|
<!-- <LanguageDD /> -->
|
|
<!-- <v-btn icon variant="text" class="mr-sm-3 mr-2 custom-hover-primary" to="/ecommerce/checkout" size="small">
|
|
<v-badge color="primary" :content="getCart?.length" offset-x="-4" offset-y="-6">
|
|
<Icon icon="solar:cart-large-2-outline" height="22" />
|
|
</v-badge>
|
|
</v-btn> -->
|
|
<NotificationDD />
|
|
<ProfileDD />
|
|
</div>
|
|
</v-sheet>
|
|
</v-menu>
|
|
</v-app-bar>
|
|
</template>
|