<script lang="ts">
  import {
    Sidebar,
    SidebarGroup,
    SidebarItem,
    SidebarWrapper,
  } from "flowbite-svelte";
  import { CurrentPage } from "./nav";
  import { onMount } from "svelte";

  export let sidebarOpen = false;
  export let sidebarOpenVisible = false;

  $: open = !sidebarOpenVisible || sidebarOpen;

  onMount(() => {
    const mq = window.matchMedia("(max-width: 768px)");
    const onChange = (e: MediaQueryListEvent) => {
      sidebarOpenVisible = e.matches;
    };
    mq.addEventListener("change", onChange);

    onChange({ matches: mq.matches } as MediaQueryListEvent);

    return () => {
      mq.removeEventListener("change", onChange);
    };
  });
</script>

<Sidebar class="h-screen" style={open ? "display: block" : "display: none"}>
  <SidebarWrapper class="h-full">
    <SidebarGroup>
      <SidebarItem
        label="Personal Data"
        active={$CurrentPage == "personal-info"}
        href="#personal-info"
      >
        <svelte:fragment slot="icon">
          <span class="material-icons-outlined"> account_circle </span>
        </svelte:fragment>
      </SidebarItem>
      <SidebarItem
        label="Security"
        active={$CurrentPage == "security"}
        href="#security"
      >
        <svelte:fragment slot="icon">
          <span class="material-icons-outlined"> lock </span>
        </svelte:fragment>
      </SidebarItem>
    </SidebarGroup>
  </SidebarWrapper>
</Sidebar>
