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

<Sidebar class="h-screen">
  <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>
