It's a todo list.
Add menu close onclick inline
+16
-4
+8
-2
src/routes/+layout.svelte
+8
-2
src/routes/+layout.svelte
···
38
38
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`}
39
39
>
40
40
<button
41
-
onclick={comingSoon}
41
+
onclick={() => {
42
+
comingSoon();
43
+
is_menu_open = false;
44
+
}}
42
45
class="flex gap-2 text-start w-full h-full rounded-xl pl-2 pr-5 py-2 hover:bg-slate-500/10 transition-all duration-150 items-center"
43
46
>
44
47
<img src="/shooting-star-line.svg" alt="Item 1" class="w-8 h-8" />
45
48
Try a new list
46
49
</button>
47
50
<button
48
-
onclick={comingSoon}
51
+
onclick={() => {
52
+
comingSoon();
53
+
is_menu_open = false;
54
+
}}
49
55
class="flex gap-2 text-start w-full h-full rounded-xl pl-2 pr-5 py-2 hover:bg-slate-500/10 transition-all duration-150 items-center"
50
56
>
51
57
<img src="/sparkles-line.svg" alt="Item 2" class="w-8 h-8" />
+8
-2
src/routes/[id]/+page.svelte
+8
-2
src/routes/[id]/+page.svelte
···
103
103
<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">
104
104
{#each user_lists as user_list : List (user_list.id)}
105
105
<button
106
-
onclick={() => switchToList(user_list.id)}
106
+
onclick={() => {
107
+
switchToList(user_list.id)
108
+
is_menu_open = false;
109
+
}}
107
110
class="flex gap-2 justify-between text-start w-full h-full rounded-xl pl-2 pr-5 py-2 hover:bg-slate-500/10 transition-all duration-150 items-center"
108
111
>
109
112
{user_list.title.length > 0 ? user_list.title : "Untitled"}
···
113
116
</button>
114
117
{/each}
115
118
<button
116
-
onclick={createList}
119
+
onclick={() => {
120
+
createList();
121
+
is_menu_open = false;
122
+
}}
117
123
class="flex gap-2 justify-between text-start w-full h-full rounded-xl pl-2 pr-5 py-2 hover:bg-slate-500/10 transition-all duration-150 items-center"
118
124
>
119
125
Create new list