49 lines
1.7 KiB
Svelte
49 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import MessagesSquare from 'lucide-svelte/icons/messages-square';
|
|
import type { Snippet } from 'svelte';
|
|
import type { PageData } from '../../routes/(main)/$types';
|
|
import Channel from './channel.svelte';
|
|
import ChannelDialog from './forms/channelDialog.svelte';
|
|
import ModeSwitcher from './modeSwitcher.svelte';
|
|
import User from './user.svelte';
|
|
|
|
interface Props {
|
|
data: PageData;
|
|
children: Snippet;
|
|
}
|
|
|
|
let sidebarWidth = $state(0);
|
|
const { data, children }: Props = $props();
|
|
const channels = data.channels;
|
|
</script>
|
|
|
|
<div class="w-screen">
|
|
<div class="grid h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
|
|
<div class="hidden border-r bg-muted/40 md:block" bind:clientWidth={sidebarWidth}>
|
|
<div class="flex h-full max-h-screen flex-col gap-2">
|
|
<div class="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
|
|
<a href="/" class="flex items-center gap-2 font-semibold">
|
|
<MessagesSquare class="h-6 w-6" />
|
|
<span class="">SVChat</span>
|
|
</a>
|
|
<ModeSwitcher />
|
|
</div>
|
|
<div class="h-full flex-1 overflow-scroll">
|
|
<nav class="grid items-start px-2 text-sm font-medium lg:px-4">
|
|
{#each channels as channelName}
|
|
<Channel {channelName} />
|
|
{/each}
|
|
</nav>
|
|
</div>
|
|
<div class="mt-auto border-t p-4">
|
|
<User {data} />
|
|
<ChannelDialog data={data.form} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative max-h-screen p-2" style={`max-width: calc(100vw - 1px - ${sidebarWidth}px)`}>
|
|
{@render children()}
|
|
</div>
|
|
</div>
|
|
</div>
|