zeu.dev
Superpowered to do lists. No signup required.
Merge pull request #9 from thomasmcinnis/feat/close-menus
✨ feat: close menus on item click
+16
-4
+8
-2
src/routes/+layout.svelte
+8
-2
src/routes/+layout.svelte
···
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
>
40
<button
41
-
onclick={comingSoon}
42
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
>
44
<img src="/shooting-star-line.svg" alt="Item 1" class="w-8 h-8" />
45
Try a new list
46
</button>
47
<button
48
-
onclick={comingSoon}
49
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
>
51
<img src="/sparkles-line.svg" alt="Item 2" class="w-8 h-8" />
···
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
>
40
<button
41
+
onclick={() => {
42
+
comingSoon();
43
+
is_menu_open = false;
44
+
}}
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"
46
>
47
<img src="/shooting-star-line.svg" alt="Item 1" class="w-8 h-8" />
48
Try a new list
49
</button>
50
<button
51
+
onclick={() => {
52
+
comingSoon();
53
+
is_menu_open = false;
54
+
}}
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"
56
>
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
<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
{#each user_lists as user_list : List (user_list.id)}
105
<button
106
-
onclick={() => switchToList(user_list.id)}
107
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
>
109
{user_list.title.length > 0 ? user_list.title : "Untitled"}
···
113
</button>
114
{/each}
115
<button
116
-
onclick={createList}
117
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
>
119
Create new list
···
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
{#each user_lists as user_list : List (user_list.id)}
105
<button
106
+
onclick={() => {
107
+
switchToList(user_list.id)
108
+
is_menu_open = false;
109
+
}}
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"
111
>
112
{user_list.title.length > 0 ? user_list.title : "Untitled"}
···
116
</button>
117
{/each}
118
<button
119
+
onclick={() => {
120
+
createList();
121
+
is_menu_open = false;
122
+
}}
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"
124
>
125
Create new list