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

  let sidebarOpen = false;
  let sidebarOpenVisible = false;

  onMount(() => {
    const unsub = CurrentPage.subscribe(() => {
      sidebarOpen = false;
    });

    return unsub;
  });
</script>

<div class="grid main-grid min-h-screen overflow-hidden">
  <div class="col-span-2">
    <MainNavbar bind:sidebarOpen bind:sidebarOpenVisible />
  </div>
  <div>
    <Sidebar bind:sidebarOpen bind:sidebarOpenVisible />
  </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;
    grid-template-rows: auto 1fr;
  }
</style>
