File "AwookaMobileHeader.vue"
Full path: /home/oviigi/public_html/awooka.com/.awooka-backups/compact-mobile-20261005/AwookaMobileHeader.vue
File size: 17.66 KiB (18083 bytes)
MIME-type: text/plain
Charset: utf-8
Download Open Edit Advanced Edit Back
<template>
<header class="md:hidden sticky top-0 z-40 bg-white dark:bg-slate-900 border-b border-slate-100 dark:border-slate-800">
<div class="px-4 pt-3 pb-3">
<!-- Top row -->
<div class="flex items-center justify-between gap-3">
<!-- Logo sur l'accueil / Retour sur les autres pages -->
<button
v-if="route.name === 'home'"
type="button"
class="shrink-0 cursor-pointer"
aria-label="Accueil"
@click="router.push({ name: 'home' })"
>
<img
:src="currentLogo"
alt="Awooka"
class="h-10 w-auto max-w-[165px] object-contain"
/>
</button>
<button
v-else
type="button"
class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-slate-100 bg-slate-50 text-slate-800 transition active:scale-95 dark:border-slate-700 dark:bg-slate-800 dark:text-white"
aria-label="Retour"
@click="goBack"
>
<ArrowLeftIcon class="h-6 w-6" />
</button>
<div class="flex items-center gap-2">
<button
type="button"
class="relative flex h-10 w-10 items-center justify-center rounded-xl border border-slate-100 bg-slate-50 dark:border-slate-700 dark:bg-slate-800"
@click="master.basketCanvas = true"
>
<ShoppingBagIcon class="h-5 w-5 text-slate-800 dark:text-white" />
<span
v-if="basketStore.total"
class="absolute -right-1 -top-1 flex h-5 min-w-[20px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-bold text-white"
>
{{ basketStore.total }}
</span>
</button>
<button
type="button"
class="flex h-10 w-10 items-center justify-center rounded-xl border border-slate-100 bg-slate-50 dark:border-slate-700 dark:bg-slate-800"
@click="openMenu"
>
<Bars3Icon class="h-6 w-6 text-slate-800 dark:text-white" />
</button>
</div>
</div>
<!-- Search -->
<form
class="mt-3 flex h-12 items-center overflow-hidden rounded-xl border border-slate-200 bg-slate-50 dark:border-slate-700 dark:bg-slate-800"
@submit.prevent="searchProducts"
>
<MagnifyingGlassIcon class="ml-4 h-5 w-5 shrink-0 text-slate-400" />
<input
v-model="search"
type="search"
:placeholder="$t('Search for products, brands and more...')"
class="min-w-0 flex-1 border-0 bg-transparent px-3 text-sm text-slate-800 outline-none placeholder:text-slate-400 dark:text-white"
/>
<button
type="submit"
class="mr-1 flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[#0969DA] text-white shadow-sm active:bg-[#0759BA]"
:aria-label="$t('Search')"
>
<MagnifyingGlassIcon class="h-5 w-5" />
</button>
</form>
</div>
</header>
<!-- Awooka Premium Mobile Menu -->
<TransitionRoot as="template" :show="mobileMenuOpen">
<Dialog as="div" class="relative z-[70] md:hidden" @close="closeMenu">
<TransitionChild
as="template"
enter="ease-out duration-300"
enter-from="opacity-0"
enter-to="opacity-100"
leave="ease-in duration-200"
leave-from="opacity-100"
leave-to="opacity-0"
>
<div class="fixed inset-0 bg-slate-950/40 backdrop-blur-[2px]" />
</TransitionChild>
<div class="fixed inset-0 overflow-hidden">
<div class="absolute inset-0 overflow-hidden">
<div
class="pointer-events-none fixed top-0 flex max-w-full"
:class="master.langDirection === 'rtl' ? 'left-0' : 'right-0'"
>
<TransitionChild
as="template"
enter="transform transition ease-out duration-300"
:enter-from="master.langDirection === 'rtl' ? '-translate-x-full' : 'translate-x-full'"
enter-to="translate-x-0"
leave="transform transition ease-in duration-250"
leave-from="translate-x-0"
:leave-to="master.langDirection === 'rtl' ? '-translate-x-full' : 'translate-x-full'"
>
<DialogPanel
class="pointer-events-auto w-[82vw] max-w-[340px] bg-[#F6F8FB] dark:bg-slate-900 shadow-2xl rounded-bl-2xl overflow-hidden"
>
<div class="flex flex-col">
<!-- Drawer header -->
<div
class="flex items-center justify-between border-b border-slate-200/80 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-900"
>
<img
:src="currentLogo"
alt="Awooka"
class="h-8 w-auto max-w-[135px] object-contain"
/>
<button
type="button"
class="flex h-8 w-8 items-center justify-center rounded-lg bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-white"
@click="closeMenu"
>
<XMarkIcon class="h-5 w-5" />
</button>
</div>
<div class="flex-1 overflow-y-auto px-4 py-4">
<!-- Account -->
<button
v-if="!AuthStore.user"
type="button"
class="flex w-full items-center justify-between rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-slate-800 shadow-sm dark:border-slate-700 dark:bg-slate-800 dark:text-white"
@click="showLoginDialog"
>
<div class="flex items-center gap-3">
<div class="flex h-9 w-9 items-center justify-center rounded-lg bg-[#EAF3FF] text-[#0969DA] dark:bg-slate-700 dark:text-blue-400">
<UserIcon class="h-5 w-5" />
</div>
<div class="text-left">
<div class="text-sm font-bold">
{{ $t('Login') }}
</div>
<div class="mt-0.5 text-[11px] font-normal text-slate-400">
{{ $t('My Account') }}
</div>
</div>
</div>
<ChevronRightIcon class="h-5 w-5" />
</button>
<div
v-else
class="rounded-xl border border-slate-200 bg-white p-3 dark:border-slate-700 dark:bg-slate-800"
>
<AuthUserDropdown />
</div>
<!-- Quick actions -->
<div class="mt-3 grid grid-cols-3 gap-2">
<button
type="button"
class="flex min-w-0 flex-col items-center justify-center rounded-xl border border-slate-200 bg-white px-2 py-2.5 text-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200"
@click="goToCategories"
>
<Squares2X2Icon class="h-5 w-5 text-[#0969DA] dark:text-[#60A5FA]" />
<span class="mt-1 text-[10px] font-semibold">
{{ $t('Categories') }}
</span>
</button>
<button
type="button"
class="relative flex min-w-0 flex-col items-center justify-center rounded-xl border border-slate-200 bg-white px-2 py-2.5 text-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200"
@click="showWishlist"
>
<HeartIcon class="h-5 w-5 text-[#0969DA] dark:text-[#60A5FA]" />
<span class="mt-1 text-[10px] font-semibold">
{{ $t('Wishlist') }}
</span>
<span
v-if="AuthStore.favoriteProducts"
class="absolute right-2 top-2 flex h-5 min-w-[20px] items-center justify-center rounded-full bg-[#F97316] px-1 text-[10px] font-bold text-white"
>
{{ AuthStore.favoriteProducts }}
</span>
</button>
<button
type="button"
class="relative flex min-w-0 flex-col items-center justify-center rounded-xl border border-slate-200 bg-white px-2 py-2.5 text-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200"
@click="showMyCart"
>
<ShoppingBagIcon class="h-5 w-5 text-[#0969DA] dark:text-[#60A5FA]" />
<span class="mt-1 text-[10px] font-semibold">
{{ $t('My Cart') }}
</span>
<span
v-if="basketStore.total"
class="absolute right-2 top-2 flex h-5 min-w-[20px] items-center justify-center rounded-full bg-[#F97316] px-1 text-[10px] font-bold text-white"
>
{{ basketStore.total }}
</span>
</button>
</div>
<!-- Navigation -->
<div class="mt-4">
<div
class="mb-1.5 px-1 text-[10px] font-bold uppercase tracking-[0.12em] text-slate-400"
>
{{ $t('Menu') }}
</div>
<div
class="overflow-hidden rounded-xl border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-800"
>
<template
v-for="(menu, index) in master.menus"
:key="menu.id"
>
<router-link
v-if="!menu.is_external"
:to="menu.url"
class="flex items-center justify-between px-3.5 py-2.5 text-sm font-medium text-slate-700 transition active:bg-slate-50 dark:text-slate-200 dark:active:bg-slate-700"
:class="index ? 'border-t border-slate-100 dark:border-slate-700' : ''"
@click="closeMenu"
>
<span>{{ menu.name }}</span>
<ChevronRightIcon class="h-4 w-4 text-slate-400" />
</router-link>
<a
v-else
:href="menu.url"
:target="menu.target"
class="flex items-center justify-between px-3.5 py-2.5 text-sm font-medium text-slate-700 transition active:bg-slate-50 dark:text-slate-200 dark:active:bg-slate-700"
:class="index ? 'border-t border-slate-100 dark:border-slate-700' : ''"
@click="closeMenu"
>
<span>{{ menu.name }}</span>
<ChevronRightIcon class="h-4 w-4 text-slate-400" />
</a>
</template>
</div>
</div>
</div>
</div>
</DialogPanel>
</TransitionChild>
</div>
</div>
</div>
</Dialog>
</TransitionRoot>
</template>
<script setup>
import { computed, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
Dialog,
DialogPanel,
TransitionChild,
TransitionRoot
} from '@headlessui/vue'
import {
ArrowLeftIcon,
Bars3Icon,
ChevronRightIcon,
HeartIcon,
MagnifyingGlassIcon,
ShoppingBagIcon,
Squares2X2Icon,
UserIcon,
XMarkIcon
} from '@heroicons/vue/24/outline'
import { useBasketStore } from '../stores/BasketStore'
import { useAuth } from '../stores/AuthStore'
import { useMaster } from '../stores/MasterStore'
import AuthUserDropdown from './AuthUserDropdown.vue'
import { useTheme } from '../composables/useTheme'
const route = useRoute()
const router = useRouter()
const master = useMaster()
const basketStore = useBasketStore()
const AuthStore = useAuth()
const mobileMenuOpen = ref(false)
const { isDark } = useTheme()
const search = ref('')
const currentLogo = computed(() => {
if (isDark.value && master.darkLogo) {
return master.darkLogo
}
return master.logo
})
const searchProducts = () => {
master.search = search.value
router.push({
name: 'products'
})
}
const goBack = () => {
if (window.history.length > 1) {
router.back()
return
}
router.push({ name: 'home' })
}
const openMenu = () => {
mobileMenuOpen.value = true
}
const closeMenu = () => {
mobileMenuOpen.value = false
}
const showMyCart = () => {
closeMenu()
master.basketCanvas = true
}
const showWishlist = () => {
closeMenu()
if (!AuthStore.token) {
return AuthStore.showLoginModal()
}
router.push('/wishlist')
}
const showLoginDialog = () => {
closeMenu()
AuthStore.showLoginModal()
}
const goToCategories = () => {
closeMenu()
router.push({ name: 'categories' })
}
watch(() => route.fullPath, () => {
closeMenu()
})
</script>