diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index abef142..a09266d 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -2,19 +2,100 @@ import "../app.pcss"; import { onMount, onDestroy } from "svelte"; import Logo from "../components/LogoWithTextHorizontal.svelte"; - import { CodeBranchOutline, DiscordSolid, DownloadOutline } from "flowbite-svelte-icons"; + import { CodeBranchOutline, DiscordSolid, BarsSolid, CloseSolid } from "flowbite-svelte-icons"; import { browser } from "$app/environment"; import { writable } from "svelte/store"; import { setContext } from "svelte"; - import type { PageData } from "./$types"; + + // TODO: refactor + interface NavItem { + name: string; + href: string; + } + + interface Animation { + duration: number; + delay: number; + property: string | string[]; + timingFunction: string; + } + + function generateTransition(animations: Animation[]) { + return animations + .map((animation) => + Array.isArray(animation.property) + ? animation.property + .map( + (property) => + `${property} ${animation.duration}ms ${animation.timingFunction} ${animation.delay * 50}ms`, + ) + .join(", ") + : `${animation.property} ${animation.duration}ms ${animation.timingFunction} ${animation.delay * 50}ms`, + ) + .join(", "); + } const token = writable(""); + const transition = + "linear(0,0.006,0.025 2.8%,0.101 6.1%,0.539 18.9%,0.721 25.3%,0.849 31.5%,0.937 38.1%,0.968 41.8%,0.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001)"; + // let dropdownOpen = false; + // let dropdownCloseFinished = true; + // let dropdownOpenFinished = false; + let dropdownOpen = true; + let dropdownCloseFinished = false; + let dropdownOpenFinished = true; let scrolled = false; let cookies: { [key: string]: string; } = {}; + const navItems: NavItem[] = [ + { + name: "Blog", + href: "/coming-soon", + }, + { + name: "Docs", + href: "/coming-soon", + }, + { + name: "FAQ", + href: "/coming-soon", + }, + { + name: "Discord", + href: "https://discord.gg/suyu", + }, + { + name: "GitLab", + href: "https://gitlab.com/suyu-emu/", + }, + ]; + + $: { + if (browser) { + const html = document.querySelector("html")!; + if (!dropdownOpen) { + dropdownCloseFinished = false; + setTimeout(() => { + html.style.overflowY = "auto"; + dropdownCloseFinished = true; + }, 360); + } else { + html.style.overflowY = "hidden"; + dropdownOpenFinished = false; + setTimeout(() => { + dropdownOpenFinished = true; + }, 360); + } + } + } + + function getTransition(i: number) { + return `${((i + 1) / 4) * 75}ms`; + } + if (browser) { cookies = Object.fromEntries( document.cookie.split("; ").map((c) => { @@ -26,6 +107,11 @@ $token = cookies.token; } } + + function openDropdown() { + dropdownOpen = !dropdownOpen; + } + setContext("token", token); onMount(() => { const handleScroll = () => { @@ -49,7 +135,9 @@ }); -
+
- Blog - Docs - FAQ + Blog + Docs + FAQ
-
- - - - - - - {$token ? "Account" : "Sign up"} +
+
+ + + + + + + {$token ? "Account" : "Sign up"} +
+
-
+
+
+ + {#each navItems as item, i} + +

{item.name}

+ + {/each} +
+
+ +
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 9ff9166..cc11ca7 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -60,13 +60,13 @@ />

- suyu is the open-source, non-profit Switch emulator + suyu is an open-source, non-profit Switch emulator

suyu is a familiar C++ based Switch emulator with a focus on compatibility. Completely free and open-source, forever.

-
+
Download + Coming Soon + + +
+ + + + + +

+ We're working on this page +

+

+ Check back soon for awesome stuff. In the meantime, you can join our Discord community to stay updated. +

+