<template>

  <div id="app" class="flex flex-col h-screen bg-gray-100 gap-4">
    <!-- MenuBar всегда фиксирован сверху -->
    <MenuBar  class="w-full sticky  hidden lg:block top-0 z-10"/>
    <ToolBar class=" fixed  visible lg:invisible bottom-0 z-10"/>

    <!-- Контентная часть заполняет оставшееся пространство -->
    <div class="flex-grow  ">

      <router-view class="w-full h-full mt-4 lg:mt-0"/>
    </div>
      <OverlayView class="w-full sticky  invisible lg:visible top-0 z-10"/>
  </div>
</template>

<script setup lang="ts">
import MenuBar from "./components/MenuBar.vue";
import OverlayView from "@/components/OverlayView.vue";
import ToolBar from "@/components/ToolBar.vue";

// @Options({
//   components: {
//     TransactionEditDrawer, SpeedDial,
//     MenuBar,
//   },
// })
// export default class App extends Vue {}
</script>

<style scoped>
/* Пример настройки высоты для поддержки flexbox */
#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
</style>
