Some checks failed
Build and deploy updated apps / Build & deploy (push) Failing after 50s
62 lines
980 B
Vue
62 lines
980 B
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
class?: string
|
|
ux?: any
|
|
btnProps?: any
|
|
noClose?: boolean
|
|
}>()
|
|
|
|
const { g } = useContentInjected()
|
|
const isMenuOpen = useMobileMenuOpen()
|
|
|
|
let ignore = false
|
|
|
|
function down() {
|
|
if (props.noClose && isMenuOpen.value) {
|
|
ignore = true
|
|
}
|
|
}
|
|
|
|
function cancel() {
|
|
if (props.noClose) {
|
|
ignore = false
|
|
}
|
|
}
|
|
|
|
function toggle() {
|
|
if (ignore) {
|
|
ignore = false
|
|
return
|
|
}
|
|
|
|
isMenuOpen.value = !isMenuOpen.value
|
|
}
|
|
|
|
const icon = computed(() =>
|
|
isMenuOpen.value ? g.value.scaffold.mobile.close.icon : g.value.scaffold.mobile.open.icon
|
|
)
|
|
|
|
const classes = useStyling(
|
|
'scaffoldMenuToggleButton',
|
|
{
|
|
slots: {
|
|
base: 'p-0 cursor-pointer',
|
|
},
|
|
},
|
|
props
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<UButton
|
|
:class="classes.base"
|
|
:icon="icon"
|
|
variant="link"
|
|
@pointerdown="down"
|
|
@pointerleave="cancel"
|
|
@pointercancel="cancel"
|
|
@click="toggle"
|
|
v-bind="props.btnProps"
|
|
/>
|
|
</template>
|