Update +layout.svelte

+layout.svelte

@@ -2,7 +2,7 @@
 	import "../app.pcss";
 	import { onMount, onDestroy } from "svelte";
 	import Logo from "../components/LogoWithTextHorizontal.svelte";
-	import { CodeBranchOutline, DiscordSolid, Bars3Solid, CloseSolid } 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";
@@ -125,6 +125,9 @@
 	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;
@@ -167,6 +170,10 @@
 			title: "Suyu Git Repo",
 			target: "_blank",
 		},
+		// {
+		// 	name: $token || data.tokenCookie ? "Account" : "Sign up",
+		// 	href: $token || data.tokenCookie ? "/account" : "/signup",
+		// },
 		$token || data.tokenCookie
 			? {
 					name: "Account",
@@ -232,7 +239,7 @@
 			scrolled = window.scrollY > 0;
 		};
 
-		handleScroll();
+		handleScroll(); // we can't guarantee that the page starts at the top
 
 		cookies = Object.fromEntries(
 			document.cookie.split("; ").map((c) => {
@@ -326,6 +333,10 @@
 						<DiscordSolid />
 					</a>
 					{#if $token}
+						<!-- <a href={$token ? "/account" : "/signup"} class="button-sm"
+						>{$token ? "Account" : "Sign up"}</a
+					> -->
+						<!-- <a href="/account" class="button-sm">Account</a> -->
 						<AccountButton user={data.user} />
 					{:else}
 						<a href="/login" class="button-sm">Log in</a>
@@ -343,7 +354,7 @@
 							style="transition: 180ms; transition-property: opacity transform;"
 							class={`absolute ${dropdownOpen ? "rotate-45 opacity-0" : "opacity-1"}`}
 						>
-							<Bars3Solid />
+							<BarsSolid />
 						</div>
 						<div
 							style="transition: 180ms; transition-property: opacity transform;"
@@ -364,11 +375,32 @@
 		class={`fixed left-0 z-[100] h-screen w-full bg-[#0e0d10] p-9 pt-[120px] ${dropdownOpen ? "pointer-events-auto visible opacity-100" : "pointer-events-none opacity-0"} ${!dropdownOpen && dropdownCloseFinished ? "invisible" : ""}`}
 	>
 		<div class={`flex flex-col gap-8`}>
+			<!-- <a href="##"><h1 class="w-full text-5xl">Blog</h1></a>
+			<a href="##"><h1 class="w-full text-5xl">Docs</h1></a>
+			<a href="##"><h1 class="w-full text-5xl">FAQ</h1></a> -->
 			{#each navItems as item, i}
 				<a
 					style={`transition: ${
 						dropdownOpen
 							? generateTransition([
+									// {
+									// 	duration: 600,
+									// 	delay: (i + 1) / 4,
+									// 	property: "transform",
+									// 	timingFunction: transition,
+									// },
+									// {
+									// 	duration: 500,
+									// 	delay: i * 1.25,
+									// 	property: "filter",
+									// 	timingFunction: transition,
+									// },
+									// {
+									// 	duration: 400,
+									// 	delay: (i + 1) / 4,
+									// 	property: "opacity",
+									// 	timingFunction: transition,
+									// },
 									{
 										duration: 450,
 										delay: i * 0.6,