<script lang="ts">
  import Sidebar from "./Sidebar.svelte";
  import { CurrentPage } from "./nav";
  import PersonalInfo from "./pages/PersonalInfo.svelte";
  import Security from "./pages/Security.svelte";
</script>

<div class="grid main-grid min-h-screen overflow-hidden">
  <div>
    <Sidebar />
  </div>
  <div class="overflow-auto p-4">
    {#if $CurrentPage == "personal-info"}
      <PersonalInfo />
    {:else if $CurrentPage == "security"}
      <Security />
    {/if}
  </div>
</div>

<style>
  .main-grid {
    grid-template-columns: auto 1fr;
  }
</style>
