ISMAIL MASSERAN
55 lines
1.5 KiB
Vue
55 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { Lucide } from '@/components/ui/lucide'
|
|
import { useRouter } from 'vue-router'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
/** Vertical offset from vertical center, in rem (matches Layout side tabs). */
|
|
offsetRem?: number
|
|
/** Open feedback form in a new tab instead of navigating in place. */
|
|
openInNewTab?: boolean
|
|
}>(),
|
|
{
|
|
offsetRem: 3.5,
|
|
openInNewTab: true,
|
|
},
|
|
)
|
|
|
|
const router = useRouter()
|
|
|
|
function openHelpdesk(event: MouseEvent) {
|
|
event.preventDefault()
|
|
|
|
const { href } = router.resolve({ name: 'feedback-submit' })
|
|
|
|
if (props.openInNewTab) {
|
|
window.open(href, '_blank', 'noopener,noreferrer')
|
|
return
|
|
}
|
|
|
|
router.push({ name: 'feedback-submit' })
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<button type="button" aria-label="Helpdesk" :style="{
|
|
top: `calc(50% + ${offsetRem}rem)`,
|
|
['--color' as string]: 'var(--color-primary)',
|
|
}" :class="[
|
|
'group fixed right-0 z-50 flex h-12 cursor-pointer items-center overflow-hidden rounded-l-full border border-(--color)/50 bg-background/80 shadow-lg transition-all',
|
|
'w-14 hover:w-44',
|
|
'before:absolute before:inset-0 before:bg-(--color)/20',
|
|
]" @click="openHelpdesk">
|
|
<span class="relative z-10 flex items-center gap-2 px-5">
|
|
<Lucide icon="MessageCircle" />
|
|
<span :class="[
|
|
'whitespace-nowrap text-sm',
|
|
'max-w-0 overflow-hidden transition-[max-width] duration-200 ease-out',
|
|
'group-hover:max-w-40',
|
|
]">
|
|
Maklum Balas
|
|
</span>
|
|
</span>
|
|
</button>
|
|
</template>
|