It's a todo list.
add transition to menus, update background
+8
-4
+3
-3
src/routes/+layout.svelte
+3
-3
src/routes/+layout.svelte
···
3
3
import { onMount, type Snippet } from "svelte";
4
4
import { page } from "$app/state";
5
5
import { goto } from "$app/navigation";
6
-
import { fade } from "svelte/transition";
6
+
import { fade, slide } from "svelte/transition";
7
7
import toast, { Toaster } from "svelte-french-toast";
8
8
import { persisted, pinned_list } from "$lib/stores.svelte";
9
9
···
16
16
let theme = persisted<string>("theme", "dark");
17
17
let is_menu_open = $state(false);
18
18
let theme_style = $derived(theme.value === "dark"
19
-
? "text-white absolute top-0 z-[-2] h-screen w-screen bg-[#000000] bg-[radial-gradient(#ffffff33_1px,#00091d_1px)] bg-size-[20px_20px]"
19
+
? "text-white absolute top-0 z-[-2] h-screen w-screen bg-[#000000] bg-[radial-gradient(#1e293b_1px,#00091d_1px)] bg-size-[20px_20px]"
20
20
: "text-black absolute inset-0 -z-10 h-full w-full bg-white bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] bg-size-[16px_16px]"
21
21
);
22
22
···
40
40
<div class="flex flex-col justify-start gap-4 pointer-events-auto">
41
41
{#if is_menu_open}
42
42
<menu
43
-
transition:fade={{ duration: 150 }}
43
+
transition:slide|global={{ duration: 250 }}
44
44
class={`${theme.value === "light" ? "border-black" : "border-[#00091d]"} w-fit border z-50 flex flex-col items-start gap-2 h-fit p-2 rounded-xl bg-white`}
45
45
>
46
46
<button
+5
-1
src/routes/[id]/+page.svelte
+5
-1
src/routes/[id]/+page.svelte
···
5
5
import toast from "svelte-french-toast";
6
6
import { formatSecondsToDuration, generateId } from "$lib/utils";
7
7
import { local_lists, pinned_list, type List, type Task } from "$lib/stores.svelte";
8
+
import { slide } from "svelte/transition";
8
9
9
10
let is_menu_open = $state(false);
10
11
let list : List | undefined = $state(local_lists.value!.find((l) => l.id === page.params.id));
···
130
131
</div>
131
132
132
133
{#if is_menu_open}
133
-
<menu class="absolute flex flex-col gap-2 w-fit h-fit top-20 p-2 bg-white border border-black rounded-lg text-black! text-lg!">
134
+
<menu
135
+
transition:slide|global={{ duration: 250 }}
136
+
class="absolute flex flex-col gap-2 w-fit h-fit top-20 p-2 bg-white border border-black rounded-lg text-black! text-lg!"
137
+
>
134
138
{#each user_lists as user_list : List (user_list.id)}
135
139
<button
136
140
onclick={() => {