123 lines
3.7 KiB
Vue
123 lines
3.7 KiB
Vue
<template>
|
|
<div class="min-h-12 w-full z-10 top-0 fixed bg-neutral-800 flex justify-between items-center pe-2">
|
|
<div v-if="isHome" @click="$router.push({ path: '/' })"
|
|
class="bg-neutral-800 h-12 flex items-center shadow">
|
|
<Logo dark class="h-8 mx-3" />
|
|
</div>
|
|
<div v-else class="text-sm opacity-80 h-12 flex items-center">
|
|
<div class="ms-3 flex gap-2 items-center text-white" @click="$router.back()">
|
|
<i class="pi pi-arrow-left text-red-500"></i> vissza
|
|
</div>
|
|
</div>
|
|
<div v-if="props.menu">
|
|
<Drawer v-model:visible="menuShow" header=" " position="right" :pt="{ root: 'border-0' }">
|
|
<template #header>
|
|
<div class="flex flex-col">
|
|
<div>{{ auth.user.nev }}</div>
|
|
<div class="text-xs">{{ auth.user.email }}</div>
|
|
</div>
|
|
|
|
</template>
|
|
<div class="flex flex-col space-y-3 text-sm">
|
|
<NuxtLink to="/profile">Adataim</NuxtLink>
|
|
<Divider />
|
|
<NuxtLink :to="'/page/' + p.id" v-for="p in config?.config.menu">{{ p.label }}</NuxtLink>
|
|
<!-- <NuxtLink to="/page/72">GYIK</NuxtLink>
|
|
<NuxtLink to="/page/66">Autóbérlés feltételei</NuxtLink>
|
|
<NuxtLink to="/page/69">Általános Szerződési Feltételek</NuxtLink>
|
|
<NuxtLink to="/page/68">Adatvédelmi nyilatkozat</NuxtLink>
|
|
<NuxtLink to="/page/70">Lemondási és távolmaradási feltételek</NuxtLink>
|
|
<NuxtLink to="/page/65">Elérhetőség</NuxtLink> -->
|
|
<Divider />
|
|
<NuxtLink @click="logOut()">Kijelentketés</NuxtLink>
|
|
|
|
</div>
|
|
</Drawer>
|
|
<Button variant="link" icon="pi pi-calendar" @click="$router.push({ path: '/' })"></Button>
|
|
<Button variant="link" icon="pi pi-user" @click="$router.push({ path: '/profile' })"></Button>
|
|
<Button variant="link" icon="pi pi-bars" @click="menuShow = true"></Button>
|
|
</div>
|
|
<div v-if="props.title">
|
|
{{ props.title }}
|
|
</div>
|
|
</div>
|
|
<div class="h-12"></div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const props = defineProps({
|
|
home: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
menu: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
|
|
const route = useRoute()
|
|
const auth = useAuthStore()
|
|
const config = useMyConfigStore()
|
|
|
|
const token = useCookie('_auth')
|
|
const menuShow = ref(false)
|
|
const router = useRouter()
|
|
|
|
const isHome = computed(()=>{
|
|
return (route.fullPath === '/')
|
|
})
|
|
|
|
// Swipe gesture handling
|
|
const touchStartX = ref(0)
|
|
const touchEndX = ref(0)
|
|
const minSwipeDistance = 50
|
|
|
|
function handleTouchStart(e: TouchEvent) {
|
|
touchStartX.value = e.touches[0].clientX
|
|
}
|
|
|
|
function handleTouchEnd(e: TouchEvent) {
|
|
touchEndX.value = e.changedTouches[0].clientX
|
|
handleSwipe()
|
|
}
|
|
|
|
function handleSwipe() {
|
|
const swipeDistance = touchEndX.value - touchStartX.value
|
|
const screenWidth = window.innerWidth
|
|
|
|
// Swipe left (from right edge) -> open menu
|
|
if (swipeDistance < -minSwipeDistance && touchStartX.value > screenWidth - 50) {
|
|
if (props.menu) {
|
|
menuShow.value = true
|
|
}
|
|
}
|
|
|
|
// Swipe right -> close menu (if open)
|
|
if (swipeDistance > minSwipeDistance && menuShow.value) {
|
|
menuShow.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
document.addEventListener('touchstart', handleTouchStart, { passive: true })
|
|
document.addEventListener('touchend', handleTouchEnd, { passive: true })
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
document.removeEventListener('touchstart', handleTouchStart)
|
|
document.removeEventListener('touchend', handleTouchEnd)
|
|
})
|
|
|
|
function logOut(){
|
|
token.value = null
|
|
auth.user = null
|
|
router.push({path:'/login'})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss"></style> |