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

<script lang="ts" setup>
import { LayoutService } from '@/Stores/layout';
import { StyleService } from '@/Stores/style';
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();

// defineProps({
// 	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 }"
            class="pt-14 xl:pl-60 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 }" />
            <AsideMenu />
            <slot></slot>
            <FooterBar />
        </div>
    </div>
    <NotificationToast></NotificationToast>
</template>