ledgerrz/resources/js/layouts/AppLayout.vue

32 lines
1004 B
Vue

<script setup lang="ts">
import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
import type { BreadcrumbItem } from '@/types';
import { usePushNotifications } from '@/composables/usePushNotifications';
import { computed } from 'vue';
import { usePage } from '@inertiajs/vue3';
const props = defineProps<{
breadcrumbs?: BreadcrumbItem[];
}>();
const resolvedBreadcrumbs = computed(() => {
return props.breadcrumbs || (usePage().props.breadcrumbs as BreadcrumbItem[]) || [];
});
const { isSubscribed, subscribe, unsubscribe } = usePushNotifications();
</script>
<template>
<AppLayout :breadcrumbs="resolvedBreadcrumbs">
<slot />
<div class="fixed bottom-4 right-4">
<button
@click="isSubscribed ? unsubscribe() : subscribe()"
class="rounded-full bg-blue-500 px-4 py-2 text-white"
>
{{ isSubscribed ? 'Unsubscribe' : 'Subscribe' }}
</button>
</div>
</AppLayout>
</template>