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

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

<div class="layout" class:no-topbar={hideTopBar}>
  {#if !hideTopBar}
    <TopBar {screen} {onNavigate} />
  {/if}
  <main class="main">
    {@render children()}
  </main>
</div>

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

  .main {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
  }
</style>
