<script setup lang="ts">
import { RouterView } from 'vue-router';
import SidebarComponent from '@components/sidebar/SidebarComponent.vue';
import {onMounted, provide, ref } from 'vue';


onMounted( ()=> { 
  switch( localStorage.theme ) {
    case "dark":{
      document.documentElement.classList.add('dark');
      break;
    }
    case "light":{
      document.documentElement.classList.remove('dark');
    }} 
    theme.value = localStorage.theme; 
})

  const theme = ref( getTheme() );
  provide('theme', theme );

  function setTheme(newTheme : string){
    theme.value = newTheme;
  }

  function getTheme(){
    return localStorage.theme;
  }
  

</script>

<template>
  <div id="layout" class="font-sans flex h-screen bg-gradient-to-br from-sky-200 to-indigo-200 dark:from-sky-950 dark:to-indigo-950">
    <SidebarComponent @theme:changed="setTheme" />
    <div class="relative p-4 w-full m-4 ml-0 bg-blue-50 dark:bg-gray-700 rounded-2xl overflow-hidden shadow-lg">
      <RouterView></RouterView>
    </div>
  </div>
  
</template>

<style scoped></style>
