<template>
  <div
    class="app-root"
    :class="{
      'with-dev-sidebar': showDevSidebar,
      'sidebar-expanded': showDevSidebar && !appStore.devSidebarCollapsed,
    }"
  >
    <DevSidebar v-if="showDevSidebar" v-model:collapsed="appStore.devSidebarCollapsed" />
    <div class="app-content">
      <AssistantFabs v-if="!hideGlobalOverlays" />
      <ModelCenter v-if="!hideGlobalOverlays" />
      <RouterView />
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { RouterView, useRoute } from "vue-router";
import AssistantFabs from "./components/assistant-fabs/index.vue";
import DevSidebar from "./components/dev/DevSidebar.vue";
import ModelCenter from "./components/model-center/index.vue";
import { useAppStore } from "./stores/app.js";

const appStore = useAppStore();
const route = useRoute();
const showDevSidebar = import.meta.env.DEV;
const hideGlobalOverlays = computed(() => route.path === "/progress/binding");
</script>

<style>
.app-root {
  width: 100%;
  height: 100%;
}

.app-content {
  position: relative;
  width: 100%;
  height: 100%;
  transition: margin-left 0.22s ease, width 0.22s ease;
}

.app-root.with-dev-sidebar .app-content {
  margin-left: 44px;
  width: calc(100% - 44px);
}

.app-root.sidebar-expanded .app-content {
  margin-left: 220px;
  width: calc(100% - 220px);
}
</style>
