tethys.backend/resources/js/Layouts/LayoutAuthenticated.vue

<script lang="ts" setup>
import { LayoutService } from '@/Stores/layout';
import { StyleService } from '@/Stores/style.service';
import NavBar from '@/Components/NavBar.vue';
import AsideMenu from '@/Components/AsideMenu.vue';
import FooterBar from '@/Components/FooterBar.vue';
import NotificationToast from '@/Components/NotificationToast.vue';

const styleService = StyleService();

const layoutService = LayoutService();

const props = defineProps({
    showAsideMenu: {
      type: Boolean,
      default: true // Set default value to true
    }
	// user: {
	// 	type: Object,
	// 	default: () => ({}),
	// }
});
</script>

<template>
    <div :class="{
        'dark': styleService.darkMode,
        'overflow-hidden lg:overflow-visible': layoutService.isAsideMobileExpanded,
    }">
        <div :class="{ 
            'ml-60 lg:ml-0': layoutService.isAsideMobileExpanded,
            'xl:pl-60': props.showAsideMenu==true }"
            class="pt-14  min-h-screen w-screen transition-position lg:w-auto bg-gray-50 dark:bg-slate-800 dark:text-slate-100">
            <NavBar :class="{ 'ml-60 lg:ml-0': layoutService.isAsideMobileExpanded }" :showBurger="props.showAsideMenu" />
            <!-- Conditionally render AsideMenu based on showAsideMenu prop -->
            <template v-if="showAsideMenu">
                <AsideMenu />
            </template>
            <!-- slot for main content -->
            <slot></slot>
            <FooterBar />
        </div>
    </div>
    <NotificationToast></NotificationToast>
</template>