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={() => {
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" />
58 AI Suggestions
59 </button>
60 </menu>
61 {/if}
62
63 <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`}>
64 <button
65 onclick={() => is_menu_open = !is_menu_open}
66 class="w-full h-fit hover:bg-slate-500/10 rounded-full"
67 >
68 <img src="/menu-line.svg" alt="Menu" class="w-12 h-12" />
69 </button>
70
71 <!-- TODO: change to <a href='/explore'> -->
72 <button
73 onclick={comingSoon}
74 class="items-center h-fit w-full hover:bg-slate-500/10 rounded-full"
75 >
76 <img src="/planet-rocket.svg" alt="Explore Page" class="w-12 h-12"/>
77 </button>
78
79 <!-- TODO: change to <a href='/login'> -->
80 <button
81 onclick={comingSoon}
82 class="items-center h-fit w-full hover:bg-slate-500/10 rounded-full"
83 >
84 <img src="/login-line.svg" alt="Login" class="w-12 h-12"/>
85 </button>
86 </nav>
87 </div>
88
89
90 <button
91 onclick={() => { theme.value = theme.value === "light" ? "dark" : "light" }}
92 class={`${theme.value === "light" ? "border-black" : "border-[#00091d]"} border w-fit h-fit p-2 bg-white rounded-xl`}
93 >
94 <img
95 src="/light-bulb.svg"
96 alt="Theme toggle button"
97 class="w-12 h-12 hover:bg-slate-500/10 rounded-full"
98 />
99 </button>
100 </aside>
101 <Toaster />
102</div>