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.
118 lines
3.2 KiB
Svelte
118 lines
3.2 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'
|
|
import ThemeToggle from '$lib/components/theme-toggle.svelte'
|
|
import * as Breadcrumb from '$lib/components/ui/breadcrumb'
|
|
import { page } from '$app/stores'
|
|
|
|
export let data: PageData
|
|
|
|
let sheetOpen = false
|
|
|
|
const closeSheet = () => {
|
|
sheetOpen = false
|
|
}
|
|
</script>
|
|
|
|
<div
|
|
class="max-w-screen flex h-screen max-h-screen w-full flex-col overflow-hidden">
|
|
<div class="bg-muted/40 flex border-b">
|
|
<div
|
|
class="flex w-full items-center justify-between gap-2 px-4 py-2">
|
|
<Sheet.Root bind:open={sheetOpen}>
|
|
<Sheet.Trigger asChild let:builder>
|
|
<Button
|
|
builders={[builder]}
|
|
variant="ghost"
|
|
class="p-2 lg:hidden">
|
|
<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>
|
|
<Button
|
|
on:click={closeSheet}
|
|
variant="ghost"
|
|
href="/settings"
|
|
class="justify-start text-base">Settings</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>
|
|
<UserIcon email={data.user.email} />
|
|
|
|
<div class="w-full">
|
|
<Breadcrumb.Root>
|
|
<Breadcrumb.List>
|
|
{#if $page.data.breadcrumbs}
|
|
{#each $page.data.breadcrumbs as breadcrumb, index}
|
|
{#if index == $page.data.breadcrumbs.length - 1}
|
|
<Breadcrumb.Item>
|
|
<Breadcrumb.Page href={breadcrumb.path}>
|
|
{breadcrumb.name}
|
|
</Breadcrumb.Page>
|
|
</Breadcrumb.Item>
|
|
{:else}
|
|
<Breadcrumb.Item>
|
|
<Breadcrumb.Link href={breadcrumb.path}>
|
|
{breadcrumb.name}
|
|
</Breadcrumb.Link>
|
|
</Breadcrumb.Item>
|
|
{/if}
|
|
{#if index != $page.data.breadcrumbs.length - 1}
|
|
<Breadcrumb.Separator />
|
|
{/if}
|
|
{/each}
|
|
{:else}
|
|
<Breadcrumb.Item>
|
|
<Breadcrumb.Link href={'/'}>Home</Breadcrumb.Link>
|
|
</Breadcrumb.Item>
|
|
{/if}
|
|
</Breadcrumb.List>
|
|
</Breadcrumb.Root>
|
|
</div>
|
|
<ThemeToggle />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-grow overflow-hidden">
|
|
<Sidebar class="hidden lg:flex" />
|
|
<div class="flex h-auto w-full flex-col">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</div>
|