zeu.dev / easytodo.link
Superpowered to do lists. No signup required.
fork atom

implement navbar and theme toggle

zeu.dev b52867ba d99ae053

+57 -10
+1 -1
src/lib/stores.svelte.ts
··· 29 29 } 30 30 31 31 // Dark/Light Mode 32 - export const theme = persisted<string>("theme", "light"); 32 + export const theme = persisted<string>("theme", "dark");
+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 -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>