It's a todo list.
1<script lang="ts">
2 import "../app.css";
3 import { onMount } from "svelte";
4 import { page } from "$app/stores";
5 import { goto } from "$app/navigation";
6 import { fade } from "svelte/transition";
7 import toast, { Toaster } from "svelte-french-toast";
8 import { persisted, pinned_list } from "$lib/stores.svelte";
9
10 let theme = persisted<string>("theme", "dark");
11 let is_menu_open = $state(false);
12 let theme_style = $derived(theme.value === "dark"
13 ? "text-white absolute top-0 z-[-2] h-screen w-screen bg-[#000000] bg-[radial-gradient(#ffffff33_1px,#00091d_1px)] bg-[size:20px_20px]"
14 : "text-black absolute inset-0 -z-10 h-full w-full bg-white bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px]"
15 );
16
17 function comingSoon() {
18 toast("Coming soon!", { icon: "🙈", position: "top-center" });
19 }
20
21 onMount(() => {
22 if ($page.url.pathname === "/") {
23 goto(`/${pinned_list.value}`);
24 }
25 });
26</script>
27
28<div class={`${theme_style} font-apfel flex flex-col w-full h-full min-w-screen min-h-screen p-8`}>
29 <section class="p-4 w-full h-full">
30 <slot />
31 </section>
32
33 <aside class="z-50 absolute inset-x-0 bottom-0 !text-black flex w-full h-fit items-end justify-between p-8">
34 <div class="flex flex-col justify-start gap-4">
35 {#if is_menu_open}
36 <menu
37 transition:fade={{ duration: 150 }}
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" />
52 AI Suggestions
53 </button>
54 </menu>
55 {/if}
56
57 <nav class={`${theme.value === "light" ? "border-black" : "border-[#00091d]"} border z-50 flex self-center items-center gap-4 mx-auto w-fit h-fit p-2 rounded-xl bg-white`}>
58 <button
59 onclick={() => is_menu_open = !is_menu_open}
60 class="w-full h-fit hover:bg-slate-500/10 rounded-full"
61 >
62 <img src="/menu-line.svg" alt="Menu" class="w-12 h-12" />
63 </button>
64
65 <!-- TODO: change to <a href='/explore'> -->
66 <button
67 onclick={comingSoon}
68 class="items-center h-fit w-full hover:bg-slate-500/10 rounded-full"
69 >
70 <img src="/planet-rocket.svg" alt="Explore Page" class="w-12 h-12"/>
71 </button>
72
73 <!-- TODO: change to <a href='/login'> -->
74 <button
75 onclick={comingSoon}
76 class="items-center h-fit w-full hover:bg-slate-500/10 rounded-full"
77 >
78 <img src="/login-line.svg" alt="Login" class="w-12 h-12"/>
79 </button>
80 </nav>
81 </div>
82
83
84 <button
85 onclick={() => { theme.value = theme.value === "light" ? "dark" : "light" }}
86 class={`${theme.value === "light" ? "border-black" : "border-[#00091d]"} border w-fit h-fit p-2 bg-white rounded-xl`}
87 >
88 <img
89 src="/light-bulb.svg"
90 alt="Theme toggle button"
91 class="w-12 h-12 hover:bg-slate-500/10 rounded-full"
92 />
93 </button>
94 </aside>
95 <Toaster />
96</div>