mohadese-nm
75 lines
1.6 KiB
Vue
75 lines
1.6 KiB
Vue
<template>
|
|
<NuxtLoadingIndicator />
|
|
<OverlayPanel ref="popup">
|
|
<component :is="popup.is" />
|
|
</OverlayPanel>
|
|
<Sidebar v-model:visible="sidebar.visible" position="right" class="ml-auto" :showCloseIcon="false">
|
|
<component :is="sidebar.is" v-bind="sidebar.props" />
|
|
</Sidebar>
|
|
<DynamicDialog />
|
|
<Toast position="bottom-right" class="!rtl" />
|
|
<Menu ref="menuRef" :model="menu.items" popup />
|
|
<NuxtPage :page-key="route => route.fullPath" />
|
|
</template>
|
|
|
|
<script setup>
|
|
const { t } = useI18n()
|
|
const popup = ref()
|
|
const menuRef = ref()
|
|
const menu = reactive({ ref: menuRef, items: [] })
|
|
const toast = useToast()
|
|
const dialog = useDialog()
|
|
const sidebar = reactive({})
|
|
|
|
const { isMobile } = useDevice()
|
|
const {
|
|
breakpoint: device = isMobile ? 'mobile' : 'desktop'
|
|
} = useViewport()
|
|
|
|
|
|
dialog.show = (component, data = {}, props = {}) => dialog.open(component, {
|
|
props: {
|
|
modal: true,
|
|
position: device.value == 'desktop' ? 'center' : 'bottom',
|
|
closable: false,
|
|
...props
|
|
},
|
|
data
|
|
})
|
|
|
|
provide('service', { device, popup, menu, toast, dialog, sidebar, t })
|
|
|
|
const categories = useCategoriesStore()
|
|
categories.get()
|
|
|
|
const user = useUserStore()
|
|
user.get()
|
|
|
|
const token = useCookie("token");
|
|
const cart = useCartStore();
|
|
if (import.meta.client && localStorage.getItem("cart"))
|
|
cart.items = JSON.parse(localStorage.getItem("cart") || "{}");
|
|
watch(
|
|
() => cart.items,
|
|
(value) => {
|
|
if (!token.value) {
|
|
localStorage.setItem("cart", JSON.stringify(value));
|
|
}
|
|
},
|
|
{ deep: true }
|
|
);
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.p-toast-message-text {
|
|
@apply ml-0 mr-4;
|
|
}
|
|
|
|
.p-sidebar {
|
|
@apply w-max;
|
|
|
|
&>* {
|
|
@apply p-0;
|
|
}
|
|
}
|
|
</style> |