tethys.backend/resources/js/Layouts/LayoutAuthenticated.vue
Arno Kaimbacher cefd9081ae - add AvatarController.ts
- adapted menu.ts, NavBar.vue, NavBarItem.vue for highlighting active nav item
- NavBarItemLabel.vue for app menu highlighting
- adapted routes.ts
- adapted app.edge for new favicon
- adapted LayoutAuthenticated.vue (:showAsideMenu="false") for showing AsideMenu optional
- new material icons: BriefcaseCheck.vue, SwapHorizontal.vue, AccountGroup.vue, Lock.vue
- started with FirstRunWizard
2023-12-15 17:17:33 +01:00

46 lines
1.5 KiB
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();
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>