55 lines
1.4 KiB
Svelte
55 lines
1.4 KiB
Svelte
<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>
|