comicinfo-editor-v2/src/App.svelte

<script lang="ts">
  import Greet from './lib/Greet.svelte'
    import MetadataInput from './lib/MetadataInput.svelte';
  import Sidebar from "./lib/Sidebar.svelte";

  let selectedTab: string = "input";

</script>

<main class="window">
  <Sidebar bind:selectedTab />

  <div class="main">
    {#if selectedTab == "input"}
      <MetadataInput />
    {:else if selectedTab == "generate"}
      <p>
        Generate Mask is Showing here
      </p>
    {:else if selectedTab == "settings"}
      <p>
        Settings go here
      </p>

      <p>
        Default ComicInfo.xml save location
      </p>

      <p>
        Default Metadata Settings (genre, age rating)
      </p>
    {/if}
  
  </div>



</main>

<style>
  .window {
    display: grid;
    grid-template-areas: "Nav Main";
    grid-template-columns: 66px calc(100% - 66px);
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;

    overflow: hidden;
  }

  .main {
    grid-area: Main;
    overflow: hidden;
  }

  .main p {
    text-align: center;
  }

  .settings {

  }
</style>