File size: 1,840 Bytes
4dae10f
 
 
 
 
a03d289
4dae10f
 
 
a03d289
4dae10f
 
9db9b26
4dae10f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2e48863
a03d289
2e48863
4dae10f
 
a03d289
4dae10f
 
 
 
b2387f6
a03d289
 
 
 
4dae10f
 
 
332d815
4dae10f
 
 
b2387f6
4dae10f
 
a03d289
4dae10f
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<script lang="ts">
	import { navigating } from "$app/stores";
	import { createEventDispatcher } from "svelte";
	import { browser } from "$app/environment";
	import { base } from "$app/paths";
	import { page } from "$app/stores";

	import CarbonClose from "~icons/carbon/close";
	import CarbonTextAlignJustify from "~icons/carbon/text-align-justify";
	import IconNew from "$lib/components/icons/IconNew.svelte";

	export let isOpen = false;
	export let title: string | undefined;

	$: title = title || "New Chat";

	let closeEl: HTMLButtonElement;
	let openEl: HTMLButtonElement;

	const dispatch = createEventDispatcher();

	$: if ($navigating) {
		dispatch("toggle", false);
	}

	$: if (isOpen && closeEl) {
		closeEl.focus();
	} else if (!isOpen && browser && document.activeElement === closeEl) {
		openEl.focus();
	}
</script>

<nav
	class="flex h-12 items-center justify-between border-b bg-gray-50 px-3 md:hidden dark:border-gray-800 dark:bg-gray-800/70"
>
	<button
		type="button"
		class="-ml-3 flex size-12 shrink-0 items-center justify-center text-lg"
		on:click={() => dispatch("toggle", true)}
		aria-label="Open menu"
		bind:this={openEl}><CarbonTextAlignJustify /></button
	>
	<span class="truncate px-4">{title}</span>
	<a
		class:invisible={!$page.params.id}
		href="{base}/"
		class="-mr-3 flex size-12 shrink-0 items-center justify-center text-lg"><IconNew /></a
	>
</nav>
<nav
	class="fixed inset-0 z-30 grid max-h-screen grid-cols-1 grid-rows-[auto,auto,1fr,auto] bg-white dark:bg-gray-900 {isOpen
		? 'block'
		: 'hidden'}"
>
	<div class="flex h-12 items-center px-4">
		<button
			type="button"
			class="-mr-3 ml-auto flex size-12 items-center justify-center text-lg"
			on:click={() => dispatch("toggle", false)}
			aria-label="Close menu"
			bind:this={closeEl}><CarbonClose /></button
		>
	</div>
	<slot />
</nav>