<script>
  import TopBar from './TopBar.svelte';
  import Footer from './Footer.svelte';

  let { screen, onNavigate, children } = $props();
</script>

<div class="layout">
  <TopBar {screen} {onNavigate} />
  <main class="main">
    {@render children()}
  </main>
  <Footer />
</div>

<style>
  .layout {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
  }

  .main {
    overflow: hidden;
    position: relative;
  }
</style>
