<template>
    <AppPopups />
    <div id="app" class="app-container d-flex flex-column flex-md-row">
        <!-- Desktop Sidebar -->
        <AppSidebar v-if="!isMobile" />
        <!-- Main content area -->
        <div class="d-flex flex-column flex-grow-1 min-vh-100">
            <!-- Mobile Menu -->
            <AppMobileMenu v-if="isMobile" />
            <!-- Header -->
            <AppHeader v-if="!isMobile" />
            <!-- Main content -->
            <main class="flex-grow-1 overflow-auto px-3 py-2">
                <router-view />
            </main>
            <!-- Footer -->
            <AppFooter />
        </div>
    </div>
</template>
<script>
import AppHeader from "./components/AppHeader.vue";
import AppSidebar from "./components/AppSidebar.vue";
import AppFooter from "./components/AppFooter.vue";
import AppMobileMenu from "./components/AppMobileMenu.vue";
import AppPopups from "./components/AppPopups.vue"
import { isMobileOnly } from "mobile-device-detect";

export default {
    name: "App",
    components: {
        AppHeader,
        AppSidebar,
        AppFooter,
        AppMobileMenu,
        AppPopups
    },
    data() {
        return {
            isMobile: isMobileOnly,
        };
    }
};
</script>
<style scoped>
.app-container {
    min-height: 100vh;
    overflow-x: hidden;
}

/* Optional: hide scrollbars on mobile */
@media (max-width: 768px) {
    main {
        padding: 0.5rem 1rem;
    }
}
</style>