mirror of https://github.com/TZGyn/shortener
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
2.0 KiB
Svelte
71 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import Sidebar from '$lib/components/sidebar.svelte'
|
|
import type { PageData } from './$types'
|
|
import * as Sheet from '$lib/components/ui/sheet'
|
|
import { Button } from '$lib/components/ui/button'
|
|
import { Menu } from 'lucide-svelte'
|
|
import UserIcon from '$lib/components/UserIcon.svelte'
|
|
import { Separator } from '$lib/components/ui/separator'
|
|
|
|
export let data: PageData
|
|
|
|
let sheetOpen = false
|
|
|
|
const closeSheet = () => {
|
|
sheetOpen = false
|
|
}
|
|
</script>
|
|
|
|
<div class="flex h-screen w-full">
|
|
<Sidebar email={data.user.email} class="hidden lg:flex" />
|
|
<div
|
|
class="flex h-full max-h-screen w-full flex-col overflow-hidden">
|
|
<div
|
|
class="bg-background block w-full border-b px-4 py-2 lg:hidden">
|
|
<Sheet.Root bind:open={sheetOpen}>
|
|
<Sheet.Trigger asChild let:builder>
|
|
<Button builders={[builder]} variant="ghost" class="p-2">
|
|
<Menu />
|
|
</Button>
|
|
</Sheet.Trigger>
|
|
<Sheet.Content side="left" class="flex flex-col">
|
|
<Sheet.Header class="pb-16">
|
|
<Sheet.Title>Shortener</Sheet.Title>
|
|
</Sheet.Header>
|
|
<div class="flex grow flex-col gap-4">
|
|
<Button
|
|
on:click={closeSheet}
|
|
variant="ghost"
|
|
href="/"
|
|
class="justify-start text-base">Home</Button>
|
|
<Button
|
|
on:click={closeSheet}
|
|
variant="ghost"
|
|
href="/links"
|
|
class="justify-start text-base">Links</Button>
|
|
<Button
|
|
on:click={closeSheet}
|
|
variant="ghost"
|
|
href="/projects"
|
|
class="justify-start text-base ">Projects</Button>
|
|
</div>
|
|
<div class="flex flex-col justify-between">
|
|
<div></div>
|
|
<div class="flex flex-col gap-4">
|
|
<Separator />
|
|
<div class="flex items-center justify-between">
|
|
<UserIcon
|
|
email={data.user.email}
|
|
onClick={closeSheet} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Sheet.Content>
|
|
</Sheet.Root>
|
|
</div>
|
|
<div class="flex h-full w-full flex-col overflow-hidden">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</div>
|