It's a todo list.
implement navbar and theme toggle
+57
-10
+1
-1
src/lib/stores.svelte.ts
+1
-1
src/lib/stores.svelte.ts
+54
-8
src/routes/+layout.svelte
+54
-8
src/routes/+layout.svelte
···
1
1
<script lang="ts">
2
2
import "../app.css";
3
+
import { fade } from "svelte/transition";
3
4
import { theme } from "$lib/stores.svelte";
4
5
6
+
let is_menu_open = $state(false);
5
7
let theme_style = $derived(theme.value === "light"
6
8
? "text-black absolute inset-0 -z-10 h-full w-full bg-white bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px]"
7
9
: "text-white absolute top-0 z-[-2] h-screen w-screen bg-[#000000] bg-[radial-gradient(#ffffff33_1px,#00091d_1px)] bg-[size:20px_20px]"
···
12
14
}
13
15
</script>
14
16
15
-
<div class={theme_style}>
16
-
<slot />
17
-
<button onclick={() => { theme.value = getTheme("dark", "light") }}>
18
-
<img
19
-
src={getTheme("/moon.svg", "/light-bulb.svg")}
20
-
alt="Theme toggle button"
21
-
/>
22
-
</button>
17
+
<div class={`${theme_style} flex flex-col w-full h-full min-w-screen min-h-screen p-8`}>
18
+
<main class="p-4 w-full h-full">
19
+
<slot />
20
+
</main>
21
+
22
+
<aside class="z-50 absolute inset-x-0 bottom-0 !text-black flex w-full h-fit items-end justify-between p-8">
23
+
<div class="flex flex-col justify-start gap-4">
24
+
{#if is_menu_open}
25
+
<menu
26
+
transition:fade={{ duration: 150 }}
27
+
class={`${getTheme("border-black", "border-[#00091d]")} w-fit border z-50 flex flex-col items-start gap-2 h-fit p-2 rounded-xl bg-white`}
28
+
>
29
+
<button class="line-through 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">
30
+
<img src="/shooting-star.svg" alt="Item 1" class="w-8 h-8" />
31
+
Try a new list
32
+
</button>
33
+
<button class="line-through 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">
34
+
<img src="/sparkles-line.svg" alt="Item 2" class="w-8 h-8" />
35
+
AI Suggestions
36
+
</button>
37
+
</menu>
38
+
{/if}
39
+
<nav class={`${getTheme("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`}>
40
+
<button
41
+
onclick={() => is_menu_open = !is_menu_open}
42
+
class="w-full h-fit hover:bg-slate-500/10 rounded-full"
43
+
>
44
+
<img src="/menu-line.svg" alt="Menu" class="w-12 h-12" />
45
+
</button>
46
+
47
+
<a href="/explore" class="items-center h-fit w-full hover:bg-slate-500/10 rounded-full">
48
+
<img src="/planet-rocket.svg" alt="Explore Page" class="w-12 h-12"/>
49
+
</a>
50
+
51
+
<a href="/login" class="items-center h-fit w-full hover:bg-slate-500/10 rounded-full">
52
+
<img src="/login-line.svg" alt="Login" class="w-12 h-12"/>
53
+
</a>
54
+
</nav>
55
+
</div>
56
+
57
+
58
+
<button
59
+
onclick={() => { theme.value = getTheme("dark", "light") }}
60
+
class={`${getTheme("border-black", "border-[#00091d]")} border w-fit h-fit p-2 bg-white rounded-xl`}
61
+
>
62
+
<img
63
+
src={getTheme("/moon.svg", "/light-bulb.svg")}
64
+
alt="Theme toggle button"
65
+
class="w-12 h-12 hover:bg-slate-500/10 rounded-full"
66
+
/>
67
+
</button>
68
+
</aside>
23
69
</div>
+1
static/link-line.svg
+1
static/link-line.svg
···
1
+
<svg width="512" height="512" viewBox="0 0 512 512" style="color:currentColor" xmlns="http://www.w3.org/2000/svg" class="h-full w-full"><rect width="512" height="512" x="0" y="0" rx="30" fill="transparent" stroke="transparent" stroke-width="0" stroke-opacity="100%" paint-order="stroke"></rect><svg width="256px" height="256px" viewBox="0 0 24 24" fill="currentColor" x="128" y="128" role="img" style="display:inline-block;vertical-align:middle" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 8h2c1.333 0 4 .8 4 4s-2.667 4-4 4h-2M9 8H7c-1.333 0-4 .8-4 4s2.667 4 4 4h2m-1-4h8"/></g></svg></svg>
+1
-1
static/moon.svg
+1
-1
static/moon.svg
···
1
-
<svg width="512" height="512" viewBox="0 0 512 512" style="color:currentColor" xmlns="http://www.w3.org/2000/svg" class="h-full w-full"><rect width="512" height="512" x="0" y="0" rx="30" fill="transparent" stroke="transparent" stroke-width="0" stroke-opacity="100%" paint-order="stroke"></rect><svg width="256px" height="256px" viewBox="0 0 24 24" fill="currentColor" x="128" y="128" role="img" style="display:inline-block;vertical-align:middle" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.353 3C5.849 4.408 3 7.463 3 11.47A9.53 9.53 0 0 0 12.53 21c4.007 0 7.062-2.849 8.47-6.353C8.17 17.065 8.14 8.14 9.353 3z"/></g></svg></svg>
1
+
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="fill-inherit h-full w-full"><rect width="512" height="512" x="0" y="0" rx="30" fill="transparent" stroke="transparent" stroke-width="0" stroke-opacity="100%" paint-order="stroke"></rect><svg width="256px" height="256px" viewBox="0 0 24 24" fill="currentColor" x="128" y="128" role="img" style="display:inline-block;vertical-align:middle" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.353 3C5.849 4.408 3 7.463 3 11.47A9.53 9.53 0 0 0 12.53 21c4.007 0 7.062-2.849 8.47-6.353C8.17 17.065 8.14 8.14 9.353 3z"/></g></svg></svg>
