<script lang="ts">
  import ChatApp from './lib/ChatApp.svelte';
    import BackButton from "./lib/BackButton.svelte";
  import "./assets/app.css"
    import { onMount } from 'svelte';

  let isKeyboardActive = false;

  function handleResize() {
    const isVirtualKeyboardActive = window.innerHeight < window.outerHeight;
    isKeyboardActive = isVirtualKeyboardActive;
  }

  onMount(() => {
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  });

</script>

<main>
  <div>
    <header id="header"  class={isKeyboardActive ? 'sticky-header' : ''}><BackButton /><span id="ramiza-ime">Ramiza</span><span id="threedotsmenu"> ⋮ </span></header>

  <div class="card">
    <ChatApp />
  </div>
  </div>
</main>

<style>
  .sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background-color: #fff;
  }

</style>
