tethys.backend/resources/js/Components/AsideMenu.vue

<script lang="ts" setup>
import { computed } from 'vue';
// import { usePage } from '@inertiajs/vue3'
// import { usePage } from '@inertiajs/inertia-vue3';
import { LayoutService } from '@/Stores/layout';
import { MainService } from '@/Stores/main';
// import menu from '@/menu';
import AsideMenuLayer from '@/Components/AsideMenuLayer.vue';
// import OverlayLayer from '@/Components/OverlayLayer.vue';

// let menu = reactive({});
// menu = computed(() => usePage().props.navigation?.menu);


const layoutService = LayoutService();
const mainService =MainService();
// let menu = reactive({});
let menu = computed(() => mainService.menu);

</script>

<template>
    <AsideMenuLayer
        v-if="menu && Object.keys(menu).length"
        :menu="menu"
        :class="[
            layoutService.isAsideMobileExpanded ? 'left-0' : '-left-60 lg:left-0',
            { 'lg:hidden xl:flex': !layoutService.isAsideLgActive },
        ]"
    />
    <!-- <OverlayLayer
		v-show="layoutService.isAsideLgActive"
		z-index="z-30"
		@overlay-click="layoutService.isAsideLgActive = false"
	/> -->
</template>