<script setup lang="ts">
import { ref, watch } from "vue";

import SidebarNav from "./SidebarNav.vue";
import TopBar from "./TopBar.vue";

const SIDEBAR_COLLAPSED_KEY = "financial-system-sidebar-collapsed";

const sidebarOpen = ref(false);
const sidebarCollapsed = ref(readSidebarCollapsed());

watch(sidebarCollapsed, (value) => {
  localStorage.setItem(SIDEBAR_COLLAPSED_KEY, value ? "1" : "0");
});

function readSidebarCollapsed(): boolean {
  return localStorage.getItem(SIDEBAR_COLLAPSED_KEY) === "1";
}
</script>

<template>
  <div class="app-shell" :class="{ 'is-sidebar-collapsed': sidebarCollapsed }">
    <SidebarNav
      :collapsed="sidebarCollapsed"
      :open="sidebarOpen"
      @close="sidebarOpen = false"
      @toggle-collapse="sidebarCollapsed = !sidebarCollapsed"
    />
    <Transition name="fade">
      <div v-if="sidebarOpen" class="sidebar-scrim" @click="sidebarOpen = false" />
    </Transition>

    <div class="main-shell">
      <TopBar @toggle-sidebar="sidebarOpen = true" />
      <main class="page-shell">
        <RouterView />
      </main>
    </div>
  </div>
</template>
